Description
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?