webpack-contrib/css-minimizer-webpack-pluginPublic

NotificationsYou must be signed in to change notification settings
Fork31
Star326

cssnano plugin for Webpack

License

MIT license

326 stars 31 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 253 Commits
.github		.github
.husky		.husky
src		src
test		test
types		types
.cspell.json		.cspell.json
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
commitlint.config.js		commitlint.config.js
jest.config.js		jest.config.js
lint-staged.config.js		lint-staged.config.js
package-lock.json		package-lock.json
package.json		package.json
setupTest.js		setupTest.js
tsconfig.json		tsconfig.json

Repository files navigation

css-minimizer-webpack-plugin

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

yarn add -D css-minimizer-webpack-plugin

pnpm add -D css-minimizer-webpack-plugin

Then add the plugin to yourwebpack configuration. For example:

webpack.config.js

constMiniCssExtractPlugin=require("mini-css-extract-plugin");constCssMinimizerPlugin=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

Name	Type	Default	Description
`test`	`String\|RegExp\|Array<String\|RegExp>`	`/\.css(\?.*)?$/i`	Test to match files against.
`include`	`String\|RegExp\|Array<String\|RegExp>`	`undefined`	Files to include.
`exclude`	`String\|RegExp\|Array<String\|RegExp>`	`undefined`	Files to exclude.
`parallel`	`Boolean\|Number`	`true`	Enable or disable multi-process parallel running.
`minify`	`Function\|Array<Function>`	`CssMinimizerPlugin.cssnanoMinify`	Allows to override default minify function.
`minimizerOptions`	`Object\|Array<Object>`	`{ preset: 'default' }`	Cssnano optimisationsoptions.
`warningsFilter`	`Function<(warning, file, source) -> Boolean>`	`() => true`	Allows filtering of css-minimizer warnings.

`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..

importsugarssfrom"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(/Droppingunreachablecode/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.

constCssMinimizerPlugin=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 mapsoptimization:{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 mapsoptimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minify:CssMinimizerPlugin.swcMinify,// Uncomment this line for options// minimizerOptions: {},}),],},};