Apply postcss plugins to webpack css asset

This webpack plugin gets css extracted by MiniCssExtractPlugin and applies postcss plugins to it.

Why?

If you use postcss-loader, not all its plugins are effective in file-by-file processing. For instance, css structural optimizations or media query packaging better apply to one css production file that can be generated by MiniCssExtractPlugin.

Installation

npm install --save-dev webpack postcss postcss-assets-webpack-plugin

Options

• test - regular expression for matching files returned from MiniCssExtractPlugin.
• plugins - array of postcss plugins
• log - boolean if plugin can print info to the console, true by default

Usage

Simple example of webpack config that tranforms css-modules with less and postcss. Autoprefixer is used in development and production, mqpacker and csswring are used only for production build.

1import webpack from 'webpack';
2import csswring from 'csswring';
3import mqpacker from 'mqpacker';
4import autoprefixer from 'autoprefixer';
5import MiniCssExtractPlugin from 'mini-css-extract-plugin';
6import PostCSSAssetsPlugin from 'postcss-assets-webpack-plugin';
7
8const devMode = process.env.NODE_ENV !== 'production'
9
10webpackConfig = {
11  <...>
12  postcss() {
13    return [autoprefixer({browser: 'last 2 version', cascade: false})]
14  },
15
16  module: {
17    rules: [
18      {
19        test: /\.less$/,
20        exclude: [/node_modules/],
21        use: [
22          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
23          {
24            loader: 'css-loader',
25            options: {
26              modules: true,
27              sourceMap: true,
28              importLoaders: 1,
29              minimize: false, // We use PostcssAssetsPlugin instead to minimize result chunks as a whole
30              localIdentName: '[name]_[local]_[sha512:hash:base64:3]',
31            },
32          },
33          {
34            loader: 'postcss-loader',
35            options: {
36              sourceMap: true,
37            },
38          },
39          {
40            loader: 'less-loader',
41          },
42        ],
43      }
44    ],
45  },
46
47  plugins: [
48    new MiniCssExtractPlugin({
49      filename: devMode ? '[name].css' : '[name].[hash].css',
50      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
51    })
52
53    new PostCSSAssetsPlugin({
54      test: /\.css$/,
55      log: true,
56      plugins: [
57        // Pack same CSS media query rules into one media query rule
58        mqpacker,
59        // Minify CSS file with source maps. That’s only
60        csswring({preservehacks: true, removeallcomments: true}),
61      ],
62    }),
63  ],
64};