CSS files bundled, even though excluded?

[peteruithoven]

In the following experiment I'm trying to bundle my dependencies. https://github.com/peteruithoven/cssmodules-react-jspm-experiment

I'm using jspm bundle 'src/**/* - [src/**/*]' bundle.js --inject, but for some reason it also bundles the css files in my src folder. The builder outputs:

     Building the bundle tree for src/**/* - [src/**/*]...
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#removeSelf is deprecated. Use Node#remove.

...
       npm:react@0.14.0-rc1/react
       src/components/button.css!npm:jspm-loader-css-modules@1.0.1-beta1
       src/global.css!npm:jspm-loader-css@1.0.1-beta1

ok   bundle.js added to config bundles.
ok   Built into bundle.js with source maps, unminified.

Why would it bundle these css files? How can I prevent this?

Using jspm version 0.16.11.

[guybedford]

It would bundle the CSS files if they are a dependency of anything within the src folder. If you want to JUST bundle what is in the src folder without its dependencies, use jspm bundle [src/**/*].

[guybedford]

Alternatively exclude the CSS folders too via -

  jspm bundle 'src/**/* - [src/**/*] - [css/**/*!css]

Although I'm not completely sure if wildcard globbing would work with plugins (in theory it can be supported, so feel free to post an issue if it doesn't).

[peteruithoven]

They are dependencies of code in the src folder, but shouldn't they be excluded with [src/**/*] since they are also located in the src folder. Or does [src/**/*] only point to js files? Could this be a bug of the css loading packages I'm using? (jspm-loader-css-modules and jspm-loader-css)

[guybedford]

@peteruithoven plugin syntax requires are not excluded by this command. Perhaps try jspm bundle 'src/**/* - [src/**/*] - [src/**/*!css]?

[peteruithoven]

plugin syntax requires are not excluded by this command

Why not? Seems useful?

jspm bundle 'src/**/* - [src/**/*] - [src/**/*!css]' bundle.js --inject seems to exclude: src/global.css!npm:jspm-loader-css@1.0.1-beta1 but still bundles: src/components/button.css!npm:jspm-loader-css-modules@1.0.1-beta1

[guybedford]

@peteruithoven I think this needs to be:

  jspm bundle 'src/**/* - [src/**/*] - [src/**/*.css!]`

Which seemed to be working fine for me in testing.

[guybedford]

(plugins are a separate space to normal requires, this exclusion without ! will work if setting loaders through meta syntax though)

[peteruithoven]

jspm bundle 'src/**/* - [src/**/*] - [src/**/*.css!]' bundle.js --inject Still doesn't exclude: src/components/button.css!npm:jspm-loader-css-modules@1.0.1-beta1

Could this be a jspm-loader-css-modules specific bug?

I don't understand the syntax, but I also tried the following, which didn't exclude any css files. jspm bundle 'src/**/* - [src/**/*] - [src/**/*.css*]' bundle.js --inject

In https://github.com/jspm/jspm-cli/issues/1109#issuecomment-141385673 you mention that it works the same as System.import(). But in all of these cases I'm trying to describe multiple files, I've never seen multiple files imports examples. It's also not a general globbing system, like used in gulp, because then src/**/* would also include css files. So some guidance, more examples would be appreciated. Preferably added to the docs I proposed here: https://github.com/jspm/jspm-cli/pull/1136

[guybedford]

@peteruithoven perhaps try jspm bundle src/**/* - [src/**/*] - [src/**/*.css!npm:jspm-loader-css-modules@1.0.1-beta1]

The point is that a give resource could be loaded by any number of plugins when using plugin syntax (CSS can be loaded as text). So exclusions need to be based on knowing which plugin we are excluding.

[peteruithoven]

jspm bundle src/**/* - [src/**/*] - [src/**/*.css!npm:jspm-loader-css-modules@1.0.1-beta1] indeed finally excludes that file.

But ideally I don't want to specify all the plugins I'm using. I just want to bundle dependencies. Ideally jspm bundle 'src/**/* - [src/**/*] covers this.

[guybedford]

@peteruithoven use loader configurations to do CSS requires then rather -

System.config({
  meta: {
    'src/*': { loader: 'my-css-loader' }
  }
});

[peteruithoven]

Adding loader configs makes that easier indeed, but I personally still find it confusing that something like src/**/* doesn't cover all the files, it seems to break regular globbing patterns.

I also discovered I can used the shorter mapped name. So with the following map config

System.config({
  ...
  map: {
    ...
    "css-modules": "npm:jspm-loader-css-modules@1.0.1-beta1"
    ...
  }
})

I can exclude packages loaded with that loader with for example:

jspm bundle 'src/**/* - [src/**/*] - [src/**/*.css!css-modules]' bundle.js --inject

[guybedford]

@peteruithoven great to see it's working for you there. ! plugin syntax creates a new space beyond the file system. A given file can be loaded by any given number of plugins, and subtractions work on exact modules so need the syntax present. If we wanted to expand glob subtraction to include arbitrary plugin removal, that would require arithmetic statement simplification - which is a type of algorithm similar to advanced compiler optimizations or proof theory. While an interesting area for possible development, this is not currently a priority.

[mpfau]

@peteruithoven use loader configurations to do CSS requires then rather

I tried that with the system-less plugin. Unfortunately, it does not work.

Snippet from my config.js

  packages: {
    "src": {
      "meta": {
        "./*.less": {
          "loader": "mpfau/system-less"
        }
      }
    }
  },

Bash:

matthias@west:~/dev/repositories/tutanota-next$ jspm bundle 'src/app.js - [src/**/*] - [src/**/*.less]' build/deps.js --inject
     Building the bundle tree for src/app.js - [src/**/*] - [src/**/*.less]...

       npm:mithril@0.2.2-rc.1
       npm:mithril@0.2.2-rc.1/mithril
       src/common/main.less

ok   build/deps.js added to config bundles.
ok   Built into build/deps.js with source maps, unminified.

It is always including the src/common/main.less. @guybedford am I doing sth wrong or is this a bug?

BTW: I also tried switching to the plugin syntax (import with main.less!mpfau/system-less). But this does not work as this syntax is not available for importing a less file from another less file...

[guybedford]

@mpfau yes this is a bug, being tracked in https://github.com/systemjs/builder/issues/447.

[mpfau]

@guybedford sorry, missed that one!

[dougludlow]

@guybedford I'm seeing this issue in the plugin-sass plugin. Is this an issue with the plugin itself, or with the builder? What version was this fixed in?

[dougludlow]

Interesting... I've been importing the sass files in my .ts files with import './style.scss!';. If I remove the ! from the import, it isn't included in the bundle anymore. Nevermind, I guess.