How to configure cssnano for CSS minification?

Question

I am trying to configure cssnano plugin for the postcss-loader, which minifies CSS, very similar, as described here.

Webpack config:

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                cssnano({
                  preset: ['default', {
                    discardComments: {
                      removeAll: true,
                    },
                    // how to find index of all available options?
                  }]
                })
              ]
            }
          },
          'sass-loader'
        ]
      }
    ]
  },

...

Here are listed all the optimisations from cssnano documentation

And here is an example of how to override a single optimisation discardComments on top of default preset.

Is it possible to override each optimisation configuration individually, like with discardComments? This could be very handy in creating a separate configurations for dev and production.

Also, in this repo is an unsuccessful attempt with minimal example and the boilerplate.

EDIT: cssnano devs told it is not possible to configure each optimisation individually, instead, it might be possible to use each optimisation plugin separately source

Finesse · Answer 1 · 2021-01-18T02:39:24.337

Using cssnano with postcss-loader and mini-css-extract-plugin is not the best option for minification in Webpack because the setup minifies individual source files instead of the whole emitted CSS file (it has excess white spaces). The best option is to use optimize-css-assets-webpack-plugin.

Install it:

npm install --save-dev optimize-css-assets-webpack-plugin

And use add it to you Webpack config:

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [] // Don't add cssnano here. Remove the loader completely if you have no plugins.
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        // cssnano configuration
        cssProcessorPluginOptions: {
          preset: ['default', {
            discardComments: {
              removeAll: true
            }
          }],
        },
      })
    ]
  }

...

The cssnano options index: https://cssnano.co/optimisations/

But if you use style-loader instead of mini-css-extract-plugin, you should use postcss-loader with cssnano because optimize-css-assets-webpack-plugin optimizes only the emitted CSS files.

Finesse, thank you for the answer. Does it have any side effects on default webpack optimization? — Daniel, Dec 03 '19 at 14:58
@Daniel, Webpack has no CSS optimization by default. I don't know whether this setup will affect the JS minimization. Please try it; if Webpack doesn't minimize the JS, just add [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) explicitly. — Finesse, Dec 04 '19 at 03:34

score 1 · Answer 2 · answered Dec 03 '19 at 04:44

You can view my full config here

Actually I use webpack shell plugin to run postcss command every time I build in dev mode

plugins: [
        new WebpackShellPlugin({
            onBuildStart: ['echo "Starting postcss command"'],
            onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
        })
    ],

So what it does is when the build done the postcss command will kick in to minify css file in wwwroot/dist

score 0 · Answer 3 · answered Dec 03 '19 at 00:40

please find following steps to creat that
Minimize CSS files with cssnano
wpack.io uses postcss-loader and thereby PostCSS. So we can take advantage of it to minify our CSS/SASS files during production builds.

1
Install and use cssnano
npm i -D cssnano
or with 
yarn add --dev cssnano
2
Edit postcss.config.js file
/* eslint-disable global-require, import/no-extraneous-dependencies */
const postcssConfig = {
    plugins: [require('autoprefixer')],
};

// If we are in production mode, then add cssnano
if (process.env.NODE_ENV === 'production') {
    postcssConfig.plugins.push(
        require('cssnano')({
            // use the safe preset so that it doesn't
            // mutate or remove code from our css
            preset: 'default',
        })
    );
}

module.exports = postcssConfig;
Save it and you are good to go.

please find below notes if you stuck: Note that only when you run npm run build, the CSS files will be minified. It is not minified during npm start (development mode) to keep things fast. It is actually controlled from the postcss.config.js file itself, hence we add it conditionally in if (process.env.NODE_ENV === 'production'). — umang naik, Dec 03 '19 at 00:40
Umang naik, thank you for your answer. However you didn't adress the problem i am looking forward to solve. The question is about how to enable each optimisation individually instead of turning cssnano on and off alltogether. — Daniel, Dec 03 '19 at 00:51

How to configure cssnano for CSS minification?

3 Answers3