This plugin usescssnano to optimize and minify your CSS.

It serves as a more accurate alternative tooptimize-css-assets-webpack-plugin, with better support for source maps, assets with query strings, caching, and parallel processing.

Getting Started

To begin, you'll need to installcss-minimizer-webpack-plugin:

npm install css-minimizer-webpack-plugin --save-dev

or

yarn add -D css-minimizer-webpack-plugin

or

pnpm add -D css-minimizer-webpack-plugin

Then add the plugin to yourwebpack configuration. For example:

webpack.config.js

const MiniCssExtractPlugin=require("mini-css-extract-plugin");const CssMinimizerPlugin=require("css-minimizer-webpack-plugin");module.exports={  module:{    rules:[{        test:/\.s?css$/,        use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"],},],},  optimization:{    minimizer:[// For webpack v5, you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line // `...`,newCssMinimizerPlugin(),],},  plugins:[newMiniCssExtractPlugin()],};

[!NOTE]

This enables CSS optimization only in production mode by default.

To enable it in development mode as well, set theoptimization.minimize option totrue:

webpack.config.js

// [...]module.exports={  optimization:{// [...]    minimize:true,},};

Finally, run Webpack using your preferred method.

Note about source maps

This plugin works only withsource-map,inline-source-map,hidden-source-map andnosources-source-map values for thedevtool option.

Why? Because CSS support only these source map types.

The plugin respects thedevtool setting and uses theSourceMapDevToolPlugin internally.

Using a supporteddevtool value enables source map generation.

Enabling thecolumns option inSourceMapDevToolPlugin also allows source map generation.

Use source maps to map error message locations to their original modules (note that this may slow down compilation).

If you use your ownminify function please refer to theminify section for correct handling of source maps.

Options

test

• Type:String|RegExp|Array<String|RegExp>
• Default:/\.css(\?.*)?$/i

Test to match files against.

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        test:/\.foo\.css$/i,}),],},};

include

• Type:String|RegExp|Array<String|RegExp>
• Default:undefined

Files to include.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        include:/\/includes/,}),],},};

exclude

• Type:String|RegExp|Array<String|RegExp>
• Default:undefined

Files to exclude.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        exclude:/\/excludes/,}),],},};

parallel

• Type:Boolean|Number
• Default:true

Use multi-process parallel running to improve the build speed.

The default number of concurrent runs:os.cpus().length - 1 oros.availableParallelism() - 1 (if this function is supported).

ℹ️ Parallelization can speed up your build significantly and is thereforehighly recommended.If a parallelization is enabled, the packages inminimizerOptions must be required via strings (packageName orrequire.resolve(packageName)). Read more inminimizerOptions

Boolean

Enable or disable multi-process parallel running.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        parallel:true,}),],},};

Number

Enable multi-process parallel running and specify the number of concurrent runs.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        parallel:4,}),],},};

minify

• Type:Function|Array<Function>
• Default:CssMinimizerPlugin.cssnanoMinify

Overrides the default minify function.

By default, plugin usescssnano package.

This is useful when using or testing unpublished versions or forks.

Possible options:

• CssMinimizerPlugin.cssnanoMinify
• CssMinimizerPlugin.cssoMinify
• CssMinimizerPlugin.cleanCssMinify
• CssMinimizerPlugin.esbuildMinify
• CssMinimizerPlugin.lightningCssMinify (previouslyCssMinimizerPlugin.parcelCssMinify, the package was renamed, but we keep it for backward compatibility)
• async (data, inputMap, minimizerOptions) => {return {code: "a{color: red}", map: "...", warnings: [], errors: []}}

[!WARNING]

Always userequire insideminify function whenparallel option is enabled.

Function

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minimizerOptions:{          level:{1:{              roundingPrecision:"all=3,px=5",},},},        minify: CssMinimizerPlugin.cleanCssMinify,}),],},};

Array

If an array of functions is passed to theminify option, theminimizerOptions must also be an array.

The function index in theminify array corresponds to the options object with the same index in theminimizerOptions array.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minimizerOptions:[{},// Options for the first function (CssMinimizerPlugin.cssnanoMinify){},// Options for the second function (CssMinimizerPlugin.cleanCssMinify){},// Options for the third function],        minify:[          CssMinimizerPlugin.cssnanoMinify,          CssMinimizerPlugin.cleanCssMinify,async(data, inputMap, minimizerOptions)=>{//  Custom minifier functionreturn{              code:`a{color: red}`,              map:`{"version": "3", ...}`,              warnings:[],              errors:[],};},],}),],},};

minimizerOptions

• Type:Object|Array<Object>
• Default:{ preset: 'default' }

Cssnano optimisationsoptions.

Object

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minimizerOptions:{          preset:["default",{              discardComments:{ removeAll:true},},],},}),],},};

Array

The function index in theminify array corresponds to the options object with the same index in theminimizerOptions array.

If you useminimizerOptions like object, allminify function accept it.

If parallelization is enabled, the packages inminimizerOptions must be referenced via strings (packageName orrequire.resolve(packageName)). In this case, we shouldn't userequire/import.

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minimizerOptions:{          preset: require.resolve("cssnano-preset-simple"),},}),],},};

processorOptions (⚠ only cssnano)

• Type:Object
• Default:{ from: assetName }

Allows filtering optionsprocessoptions for the cssnano.

Theparser, stringifier andsyntax can be either a function or a string indicating the module that will be imported.

[!WARNING]

If any of these options are passed as a function, theparallel option must be disabled..

import sugarssfrom"sugarss";module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        parallel:false,        minimizerOptions:{          processorOptions:{            parser: sugarss,},},}),],},};

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minimizerOptions:{          processorOptions:{            parser:"sugarss",},},}),],},};

warningsFilter

• Type:Function<(warning, file, source) -> Boolean>
• Default:() => true

Filter css-minimizer warnings (By defaultcssnano).

Returntrue to keep the warning, or a falsy value (false/null/undefined) to suppress it.

[!WARNING]

Thesource parameter will beundefined unless source maps are enabled.

webpack.config.js

module.exports={  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({warningsFilter:(warning, file, source)=>{if(/Dropping unreachable code/i.test(warning)){returntrue;}if(/file\.css/i.test(file)){returntrue;}if(/source\.css/i.test(source)){returntrue;}returnfalse;},}),],},};

Examples

Use sourcemaps

Don't forget to enablesourceMap options for all loaders.

const CssMinimizerPlugin=require("css-minimizer-webpack-plugin");module.exports={  devtool:"source-map",  module:{    rules:[{        test:/\.s?css$/,        use:[          MiniCssExtractPlugin.loader,{ loader:"css-loader", options:{ sourceMap:true}},{ loader:"sass-loader", options:{ sourceMap:true}},],},],},  optimization:{    minimizer:[newCssMinimizerPlugin()],},  plugins:[newMiniCssExtractPlugin()],};

Remove all comments

Remove all comments, including those starting with/*!.

module.exports={  optimization:{    minimizer:[newCssMinimizerPlugin({        minimizerOptions:{          preset:["default",{              discardComments:{ removeAll:true},},],},}),],},};

Using custom minifiercsso

webpack.config.js

module.exports={// Uncomment if you need source maps// devtool: "source-map",  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minify: CssMinimizerPlugin.cssoMinify,// Uncomment this line for options// minimizerOptions: { restructure: false },}),],},};

Using custom minifierclean-css

webpack.config.js

module.exports={// Uncomment if you need source maps// devtool: "source-map",  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minify: CssMinimizerPlugin.cleanCssMinify,// Uncomment this line for options// minimizerOptions: { compatibility: 'ie11,-properties.merging' },}),],},};

Using custom minifieresbuild

webpack.config.js

module.exports={// Uncomment if you need source maps// devtool: "source-map",  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minify: CssMinimizerPlugin.esbuildMinify,}),],},};

Using custom minifierlightningcss, previously@parcel/css

webpack.config.js

module.exports={// devtool: "source-map", // Uncomment for source maps  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minify: CssMinimizerPlugin.lightningCssMinify,// Uncomment this line for options// minimizerOptions: { targets: { ie: 11 }, drafts: { nesting: true } },}),],},};

Using custom minifierswc

webpack.config.js

module.exports={// devtool: "source-map", // Uncomment for source maps  optimization:{    minimize:true,    minimizer:[newCssMinimizerPlugin({        minify: CssMinimizerPlugin.swcMinify,// Uncomment this line for options// minimizerOptions: {},}),],},};

Contributing

We welcome all contributions!

If you're new here, please take a moment to review our contributing guidelines.

CONTRIBUTING

License

MIT