CSS Module composes imports aren't added to webpack

[chrislloyd]

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.

[Frizi]

This is directly connected to #131. Because webpack loaders config is disregarded for dependencies, css preprocessors are also ignored.

[delijah]

Is there any progress on this? Is there a reason why dependencies are not processed with webpack loaders config? @sokra

[fredericgrati]

I'm stuck with this issue. Is there any progress on this ?

I have roughly the same webpack config and the same result :

  module: {
    rules: [
      {
        test: /global\.css$/,
        use: extractLocalStyle.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            { loader: 'postcss-loader' },
          ],
        }),
      },
      {
        test: /\.css$/,
        exclude: [/global/, /node_modules/],
        use: extractLocalStyle.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                modules: true,
                sourceMap: true,
                localIdentName: '[name]_[local]_[hash:base64:3]',
              },
            },
            { loader: 'postcss-loader' },
          ],
        }),
      },
  ]
}

a.css

@import "./b.global.css";
    
.specific {
  line-height: 30px;
}

b.css

.global {
    line-height: 20px;
}

file-558a148428a98beb4fa4.css

.button_global_ivy {
    line-height: 20px;
}    
.button_specific_3Oc {
    line-height: 30px;
}

expected

.global {
    line-height: 20px;
}    
.button_specific_3Oc {
    line-height: 30px;
}

[alexander-akait]

PR welcome!

[alexander-akait]

Use importLoaders: false for this case, but better avoid this construction and use getLocalIdent function for change ident based on context/request