Feature request: Transforming CSS after CSS is extracted

[whatisaphone]

Hi,

I am using this plugin in combination with CSS modules, and postcss with postcss-autoreset, With the recommended loader chain, autoreset is applied to each imported CSS module, rather than once at the end. When combined with composes, this means that the autoreset rules can be applied out of order.

Stripped-down example of my issue:

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

/* bar.css */
.bar {
  composes: foo from './foo.css';
  background: yellow;
}

// webpack config excerpt:
      { test: /[.]css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader' },
        ] },

// postcss.config.js
  plugins: [
    require('postcss-autoreset')({
      reset: {
        background: 'inherit',
        color: 'inherit',
      },
    }),
  ],

/* output css */
.foo { background: inherit; color: inherit; }
.foo, .bar { color: red; }
.bar { background: inherit; color: inherit; }
.bar { background: yellow; }

The color: inherit for .bar comes after the color: red, so unfortunately overrides it, and the color will not be red. I was able to solve this by running postcss on the combined, extracted CSS, rather than individually on each input. Unfortunately I had to break out of webpack to do it:

-    "build": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.config.js && yarn harden-css",
+    "harden-css": "postcss lib/index.css -o lib/index.css",

And the output is now correct (and more efficient as well!)

.foo, .bar { background: inherit; color: inherit; }
.foo, .bar { color: red; }
.bar { background: yellow; }

Is running a post-extraction transform something that is in scope for this plugin? Is there an existing way to do this as part of the loader chain that I missed?

[alexander-akait]

postcss-autoreset is not compatibility with css modules, it is out of scope this plugin, sorry. Also looks it is related more to css-loader + postcss-loader, we wan't remove css-modules from css-loader in near future in favor postcss-loader and plugin for postcss-modules (will be describe in docs how it can be done). Right now you can try to disable css-modules for css-loader and install and setup postcss-modules though postcss.config.js with right order to avoid this issue. Thanks! Feel free to feedback!

[whatisaphone]

I can't find any docs for combining webpack with postcss-modules. It looks like I should stick with my current approach for now while I wait for the new docs.

Thanks for the response!

[whatisaphone]

Some time ago I stumbled on https://github.com/mistakster/postcss-pipeline-webpack-plugin which solves my original issue and has been working nicely, so I'm closing this.