CSS Module composes imports aren't added to webpack

[delijah]

This is a copy of webpack-contrib/css-loader#286. I think this issue applies to css-modules as well:

Say there's a project like this:

/* a.css */
.red { color: red };

/* b.css */
.main { composes: red from './a.css'; }

and a config roughly like:

module: {
  loaders: [
    {
      test: /a\.css$/,
      loader: 'style-loader!css-loader?modules&localIdentName=a--[local]',
    },
    {
      test: /b\.css$/,
      loader: 'style-loader!css-loader?modules&localIdentName=b--[local]',
    },
  ]
}

a.css will be processed by b.css' loader config even though it does't match the file test. This results in the equivalent of:

.b--red { color: red; }
.b--main { };

even though I'd expect the output to look like:

.a--red { color: red; }
.b--main { };

Ideally css-loader should webpack.addDependency for css module source dependencies so they get processed with the same set of loaders as the rest of the config and not jus the root file's loader url.

[delijah]

Another example:

webpack config

loaders: [{
    test: /\.css$/,
    loaders: [ 'style', 'css?modules&camelCase' ],
}, {
    test: /\.sass$/,
    loaders: [ 'style', 'css?modules&camelCase&importLoaders=1', 'sass' ],
}]

abc.sass

.title
  composes: title-font from "./styles.css"

styles.css

.title-font {
  color: red;
}

Expected behaviour: For the import of "styles.css" css-modules must use the loader for .css files.

Current behaviour: css-modules just uses the same loader as the current code is executed with (in this case the "styles.css" file will be imported by the .sass loader, which is wrong).

[delijah]

Anyone here to help?

[schickling]

Facing a issue. Any progress on this @css-modules?

[TheSisb]

I believe a solution was posted here webpack-contrib/css-loader#131 ?

[delijah]

That is just a workaround.

[delijah]

I really think composed classes should be imported by using it's corresponding webpack loader. So in my opinion it should be possible to do the following:

abc.css

.title {
  composes: title-font from "./styles.sass";
}

styles.sass

  .title-font
    color: red

This is not yet resolved.

[TrySound]

css-loader problem