postcss-loader doesn’t process CSS Modules composition target

[iamakulov]

CSS Modules have a class composition feature which acts similarly to LESS’ :extend() rule. It is enabled by the composes property. The problem is that the class referenced by this property is not processed by postcss-loader.

Example:

/* a.css */
.a {
  display: flex;
}

/* b.css */
.b {
  composes: a from "./a.css";
  user-select: none;
}

/* Webpack config */
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader?modules&localIdentName=[name]--[local]--[hash:base64:5]', 'postcss-loader']
      }
    ]
  },
  postcss: function () {
    return [autoprefixer({ browsers: ['last 2 versions'] })];
  }
};

With autoprefixer added, the code is compiled to the following:

/* b.css */
.b {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

As you see, the user-select property is processed and prefixed, whereas display: flex is not.

[ai]

You should use css-loader before postcss-loader.

[MoOx]

@ai It's not possible.
postcss-loader execute the postcss transformation before css-modules produce the css to javascript code. That's probably an discussion that should be done in the css-loader repo. I asked @sokra to make the postcss instance of css modules public so we can plug and transform at the same moment (which might helps in the kind of situation) but we refused :/

[iamakulov]

+1, tried it before submitting the issue.

@MoOx, do you know if there is a way to fix the issue without changes from the css-loader side?

[MoOx]

With my knowledge, there isn't. css-loader does things in a different context... That's sucks for css-modules, like a lot.

[iamakulov]

Found the solution: webpack/css-loader#137.

[ai]

Also you can use postcss-modules. I think CSS→JSON magic is not really good.
https://github.com/outpunk/postcss-modules

[ai]

@iamakulov maybe we should add this info to docs? Can you send a PR?

[iamakulov]

Yep, sure, today or tomorrow.

[ovaldi]

Good job!