Skip to content

CSSO full restructuring minification files to serve your webpack bundles

License

Notifications You must be signed in to change notification settings

zoobestik/csso-webpack-plugin

Repository files navigation

CSSO Webpack Plugin

npm node dependencies status downloads

Logo

Why is not csso-loader or postcss-csso?

  • Full restructuring in bundles: better

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

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

Install

npm i -D csso-webpack-plugin

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

npm i -D csso-webpack-plugin@1

Usage

Plugin good to use in pair with ExtractTextPlugin or MiniCssExtractPlugin.

const CssoWebpackPlugin = require('csso-webpack-plugin').default;

module.exports = {
  module: { /* ... */ },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new CssoWebpackPlugin(),
  ]
}

Options

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

Arguments:

  • optionscsso options.
  • options.pluginOutputPostfixfunction(file) or string postfix, if passed, plugin will create two assets vanilla and compressed. Example:
    {
        plugins: [
            new ExtractTextPlugin('test.css'),
            new CssoWebpackPlugin({ pluginOutputPostfix: 'min' })
            /* Generated:
                test.css — uncompressed file
                test.min.css — minimized with csso file
            */
        ]
    }
  • 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

Develop By Logo By MIT license