CSSO Webpack Plugin

Why is not csso-loader or postcss-csso?

• Full restructuring in bundles:

• No problems with custom syntax like css-modules – :global(.c .d) .a { color: #fff; }

• Possible to generate both pure and minimized versions at the same time.

Install

1npm i -D csso-webpack-plugin

For node < 8.0.0 use 1.x version with csso@^3:

1npm i -D csso-webpack-plugin@1

Usage

Plugin good to use in pair with ExtractTextPlugin or MiniCssExtractPlugin.

1const CssoWebpackPlugin = require('csso-webpack-plugin').default;
2
3module.exports = {
4  module: { /* ... */ },
5  plugins: [
6    new MiniCssExtractPlugin({
7      filename: "[name].css",
8      chunkFilename: "[id].css"
9    }),
10    new CssoWebpackPlugin(),
11  ]
12}

Options

1new CssoWebpackPlugin([options: CssoOptions], [filter: function | RegExp])

Arguments:

• options — csso options.
• options.pluginOutputPostfix — function(file) or string postfix, if passed, plugin will create two assets vanilla and compressed. Example:

  1{
  2    plugins: [
  3        new ExtractTextPlugin('test.css'),
  4        new CssoWebpackPlugin({ pluginOutputPostfix: 'min' })
  5        /* Generated:
  6            test.css — uncompressed file
  7            test.min.css — minimized with csso file
  8        */
  9    ]
  10}

• filter — Detect should be file processed. Defaults: to ends with .css.

Flow support

I don't now why, but plugin ships with flow typings (typedef too). To use them in your project, add this to the [libs] section of your .flowconfig:

[libs]
node_modules/csso-webpack-plugin/lib/index.js.flow

Acknowledgements