Using postcss-loader after css-loader

Question

I am using CSS modules with webpack css-loader, then I bundle them with mini-css-extract-plugin. Here is how my config looks like:

{
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          localIdentName: "[name]-[local]_[hash:base64:5]",
          imports: true,
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  }

For some reason (see comments section) I would really like to apply postcss-loader not to every individual .css file, but to the whole bundle. How can I achieve that?

Every css module incapsulates in itself all the media queries the component should respond to. And I would like to use `css-mqpacker` to combine them together. In fact everything works in my current config, but css-mqpacker works within one particular .css file. And what I want is to apply postcss stuff to the whole bundle — Grundiss, May 23 '18 at 13:30

score 4 · Answer 1 · answered Jul 09 '18 at 08:24

4

Thank you all for trying to resolve my problem. After all I've found the solution. I do not use postcss-loader any more, but instead I use OptimizeCssAssetsPlugin like this:

new OptimizeCssAssetsPlugin({
  cssProcessor: postcss([CSSMQPacker]),
}),

answered Jul 09 '18 at 08:24

Grundiss

153
9

Thank you very much! This is probably sole hint all over the internet. Im now using your solution because of sharing `postcss-css-variables` between files. I have just one problem... when using `postcss-loader` I can correctly get warnings like `variable --xyz is undefined and used without a fallback` but when switching from `postcss-loader` to your solution via plugin warnings are completely swallowed so I can not detect possible issues. Can you help me please with this? – mikep Jun 10 '20 at 12:01
Next problem is not working source map and also building time during watch is slow because it is processing all files again and again not just one modified. So I think I should avoid going this way. – mikep Jun 10 '20 at 16:02

score 0 · Answer 2 · answered Jul 06 '18 at 16:41

Are you referencing your other CSS with @import?

I have been trying to do the same thing for merging duplicate CSS selectors. I've had moderate success using postcss-import. It will combine all of your imports so you can process it with postcss before css-loader bundles it all up.

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[name]-[local]_[hash:base64:5]'
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('postcss-import'),
                    require('css-mqpacker')
                ]
            }
        }
    ]
}

Unfortunately, this can lead to asset pathing issues as postcss knows nothing about webpack's path resolving.

You can work around that with aliases.


require('postcss-import')({
    resolve: id => id.replace(/^~?(@example-alias)/, path.resolve(__dirname, './src'))
}),

Hopefully this helps. I too would like a simpler solution with css-loader. Ideally: import & combine (css-loader) > postcss > bundle (css-loader)

score 0 · Answer 3 · answered Jul 07 '18 at 08:09

0

You can write a webpack plugin to run on the css bundle and apply you postCss plugin on it.

You can check as a reference some plugin that i've wrote: https://github.com/wix-incubator/extract-tpa-style-webpack-plugin/blob/master/src/index.js#L71

answered Jul 07 '18 at 08:09

felixmosh

32,615
9
69
88

Using postcss-loader after css-loader

3 Answers3