{"id":13677613,"url":"https://github.com/webpack-contrib/css-minimizer-webpack-plugin","last_synced_at":"2025-05-14T03:07:49.270Z","repository":{"id":37077321,"uuid":"205691078","full_name":"webpack-contrib/css-minimizer-webpack-plugin","owner":"webpack-contrib","description":"cssnano plugin for Webpack","archived":false,"fork":false,"pushed_at":"2025-03-06T17:17:30.000Z","size":5419,"stargazers_count":325,"open_issues_count":3,"forks_count":30,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-03T11:45:53.552Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"webpack"}},"created_at":"2019-09-01T14:51:57.000Z","updated_at":"2025-03-24T01:51:04.000Z","dependencies_parsed_at":"2024-06-04T13:58:48.277Z","dependency_job_id":"39b0a2d6-48a7-47cf-af64-ef2bded95aba","html_url":"https://github.com/webpack-contrib/css-minimizer-webpack-plugin","commit_stats":{"total_commits":238,"total_committers":24,"mean_commits":9.916666666666666,"dds":0.7016806722689075,"last_synced_commit":"915229386cd32f22c71b09242cae164585f50fc2"},"previous_names":["lneveu/cssnano-webpack-plugin"],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fcss-minimizer-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fcss-minimizer-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fcss-minimizer-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fcss-minimizer-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/css-minimizer-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247237682,"owners_count":20906330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T13:00:44.638Z","updated_at":"2025-04-10T17:18:58.195Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![cover][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# css-minimizer-webpack-plugin\n\nThis plugin uses [cssnano](https://cssnano.github.io/cssnano/) to optimize and minify your CSS.\n\nJust like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin) but more accurate with source maps and assets using query string, allows caching and works in parallel mode.\n\n## Getting Started\n\nTo begin, you'll need to install `css-minimizer-webpack-plugin`:\n\n```console\nnpm install css-minimizer-webpack-plugin --save-dev\n```\n\nor\n\n```console\nyarn add -D css-minimizer-webpack-plugin\n```\n\nor\n\n```console\npnpm add -D css-minimizer-webpack-plugin\n```\n\nThen add the plugin to your `webpack` configuration. For example:\n\n**webpack.config.js**\n\n```js\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst CssMinimizerPlugin = require(\"css-minimizer-webpack-plugin\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /.s?css$/,\n        use: [MiniCssExtractPlugin.loader, \"css-loader\", \"sass-loader\"],\n      },\n    ],\n  },\n  optimization: {\n    minimizer: [\n      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line\n      // `...`,\n      new CssMinimizerPlugin(),\n    ],\n  },\n  plugins: [new MiniCssExtractPlugin()],\n};\n```\n\nThis will enable CSS optimization only in production mode.\n\nIf you want to run it also in development set the `optimization.minimize` option to `true`:\n\n**webpack.config.js**\n\n```js\n// [...]\nmodule.exports = {\n  optimization: {\n    // [...]\n    minimize: true,\n  },\n};\n```\n\nAnd run `webpack` via your preferred method.\n\n## Note about source maps\n\n**Works only with `source-map`, `inline-source-map`, `hidden-source-map` and `nosources-source-map` values for the [`devtool`](https://webpack.js.org/configuration/devtool/) option.**\n\nWhy? Because CSS support only these source map types.\n\nThe plugin respect the [`devtool`](https://webpack.js.org/configuration/devtool/) and using the `SourceMapDevToolPlugin` plugin.\nUsing supported `devtool` values enable source map generation.\nUsing `SourceMapDevToolPlugin` with enabled the `columns` option enables source map generation.\n\nUse source maps to map error message locations to modules (this slows down the compilation).\nIf you use your own `minify` function please read the `minify` section for handling source maps correctly.\n\n## Options\n\n|                    Name                     |                      Type                      |              Default               | Description                                                                                      |\n| :-----------------------------------------: | :--------------------------------------------: | :--------------------------------: | :----------------------------------------------------------------------------------------------- |\n|             **[`test`](#test)**             |    `String\\|RegExp\\|Array\u003cString\\|RegExp\u003e`     |         `/\\.css(\\?.*)?$/i`         | Test to match files against.                                                                     |\n|          **[`include`](#include)**          |    `String\\|RegExp\\|Array\u003cString\\|RegExp\u003e`     |            `undefined`             | Files to include.                                                                                |\n|          **[`exclude`](#exclude)**          |    `String\\|RegExp\\|Array\u003cString\\|RegExp\u003e`     |            `undefined`             | Files to exclude.                                                                                |\n|         **[`parallel`](#parallel)**         |               `Boolean\\|Number`                |               `true`               | Enable/disable multi-process parallel running.                                                   |\n|           **[`minify`](#minify)**           |          `Function\\|Array\u003cFunction\u003e`           | `CssMinimizerPlugin.cssnanoMinify` | Allows to override default minify function.                                                      |\n| **[`minimizerOptions`](#minimizeroptions)** |            `Object\\|Array\u003cObject\u003e`             |      `{ preset: 'default' }`       | Cssnano optimisations [options](https://cssnano.github.io/cssnano/docs/what-are-optimisations/). |\n|   **[`warningsFilter`](#warningsfilter)**   | `Function\u003c(warning, file, source) -\u003e Boolean\u003e` |            `() =\u003e true`            | Allow to filter css-minimizer warnings.                                                          |\n\n### `test`\n\nType: `String|RegExp|Array\u003cString|RegExp\u003e` - default: `/\\.css(\\?.*)?$/i`\n\nTest to match files against.\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        test: /\\.foo\\.css$/i,\n      }),\n    ],\n  },\n};\n```\n\n### `include`\n\nType: `String|RegExp|Array\u003cString|RegExp\u003e`\nDefault: `undefined`\n\nFiles to include.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        include: /\\/includes/,\n      }),\n    ],\n  },\n};\n```\n\n### `exclude`\n\nType: `String|RegExp|Array\u003cString|RegExp\u003e`\nDefault: `undefined`\n\nFiles to exclude.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        exclude: /\\/excludes/,\n      }),\n    ],\n  },\n};\n```\n\n### `parallel`\n\nType: `Boolean|Number`\nDefault: `true`\n\nUse multi-process parallel running to improve the build speed.\nDefault number of concurrent runs: `os.cpus().length - 1` or `os.availableParallelism() - 1` (if this function is supported).\n\n\u003e ℹ️ Parallelization can speed up your build significantly and is therefore **highly recommended**.\n\u003e If a parallelization is enabled, the packages in `minimizerOptions` must be required via strings (`packageName` or `require.resolve(packageName)`). Read more in [`minimizerOptions`](#minimizeroptions)\n\n#### `Boolean`\n\nEnable/disable multi-process parallel running.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        parallel: true,\n      }),\n    ],\n  },\n};\n```\n\n#### `Number`\n\nEnable multi-process parallel running and set number of concurrent runs.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        parallel: 4,\n      }),\n    ],\n  },\n};\n```\n\n### `minify`\n\nType: `Function|Array\u003cFunction\u003e`\nDefault: `CssMinimizerPlugin.cssnanoMinify`\n\nAllows overriding default minify function.\nBy default, plugin uses [cssnano](https://github.com/cssnano/cssnano) package.\nUseful for using and testing unpublished versions or forks.\n\nPossible options:\n\n- `CssMinimizerPlugin.cssnanoMinify`\n- `CssMinimizerPlugin.cssoMinify`\n- `CssMinimizerPlugin.cleanCssMinify`\n- `CssMinimizerPlugin.esbuildMinify`\n- `CssMinimizerPlugin.lightningCssMinify` (previously`CssMinimizerPlugin.parcelCssMinify`, the package was renamed, but we keep it for backward compatibility)\n- `async (data, inputMap, minimizerOptions) =\u003e {return {code: \"a{color: red}\", map: \"...\", warnings: [], errors: []}}`\n\n\u003e [!WARNING]\n\u003e\n\u003e **Always use `require` inside `minify` function when `parallel` option enabled**.\n\n#### `Function`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          level: {\n            1: {\n              roundingPrecision: \"all=3,px=5\",\n            },\n          },\n        },\n        minify: CssMinimizerPlugin.cleanCssMinify,\n      }),\n    ],\n  },\n};\n```\n\n#### `Array`\n\nIf an array of functions is passed to the `minify` option, the `minimizerOptions` must also be an array.\nThe function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: [\n          {}, // Options for the first function (CssMinimizerPlugin.cssnanoMinify)\n          {}, // Options for the second function (CssMinimizerPlugin.cleanCssMinify)\n          {}, // Options for the third function\n        ],\n        minify: [\n          CssMinimizerPlugin.cssnanoMinify,\n          CssMinimizerPlugin.cleanCssMinify,\n          async (data, inputMap, minimizerOptions) =\u003e {\n            // To do something\n            return {\n              code: `a{color: red}`,\n              map: `{\"version\": \"3\", ...}`,\n              warnings: [],\n              errors: [],\n            };\n          },\n        ],\n      }),\n    ],\n  },\n};\n```\n\n### `minimizerOptions`\n\nType: `Object|Array\u003cObject\u003e`\nDefault: `{ preset: 'default' }`\n\nCssnano optimisations [options](https://cssnano.co/docs/what-are-optimisations/).\n\n#### `Object`\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          preset: [\n            \"default\",\n            {\n              discardComments: { removeAll: true },\n            },\n          ],\n        },\n      }),\n    ],\n  },\n};\n```\n\n#### `Array`\n\nThe function index in the `minify` array corresponds to the options object with the same index in the `minimizerOptions` array.\nIf you use `minimizerOptions` like object, all `minify` function accept it.\n\n\u003e If a parallelization is enabled, the packages in `minimizerOptions` must be required via strings (`packageName` or `require.resolve(packageName)`). In this case, we shouldn't use `require`/`import`.\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          preset: require.resolve(\"cssnano-preset-simple\"),\n        },\n      }),\n    ],\n  },\n};\n```\n\n##### `processorOptions` (⚠ only cssnano)\n\nType: `Object`\nDefault: `{ from: assetName }`\n\nAllows filtering options [`processoptions`](https://postcss.org/api/#processoptions) for the cssnano.\nThe `parser`,` stringifier` and `syntax` can be either a function or a string indicating the module that will be imported.\n\n\u003e [!WARNING]\n\u003e\n\u003e **If a function is passed, the `parallel` option must be disabled.**.\n\n```js\nimport sugarss from \"sugarss\";\n\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        parallel: false,\n        minimizerOptions: {\n          processorOptions: {\n            parser: sugarss,\n          },\n        },\n      }),\n    ],\n  },\n};\n```\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          processorOptions: {\n            parser: \"sugarss\",\n          },\n        },\n      }),\n    ],\n  },\n};\n```\n\n### `warningsFilter`\n\nType: `Function\u003c(warning, file, source) -\u003e Boolean\u003e`\nDefault: `() =\u003e true`\n\nAllow filtering css-minimizer warnings (By default [cssnano](https://github.com/cssnano/cssnano)).\nReturn `true` to keep the warning, a falsy value (`false`/`null`/`undefined`) otherwise.\n\n\u003e [!WARNING]\n\u003e\n\u003e The `source` argument will contain `undefined` if you don't use source maps.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        warningsFilter: (warning, file, source) =\u003e {\n          if (/Dropping unreachable code/i.test(warning)) {\n            return true;\n          }\n\n          if (/file\\.css/i.test(file)) {\n            return true;\n          }\n\n          if (/source\\.css/i.test(source)) {\n            return true;\n          }\n\n          return false;\n        },\n      }),\n    ],\n  },\n};\n```\n\n## Examples\n\n### Use sourcemaps\n\nDon't forget to enable `sourceMap` options for all loaders.\n\n```js\nconst CssMinimizerPlugin = require(\"css-minimizer-webpack-plugin\");\n\nmodule.exports = {\n  devtool: \"source-map\",\n  module: {\n    rules: [\n      {\n        test: /.s?css$/,\n        use: [\n          MiniCssExtractPlugin.loader,\n          { loader: \"css-loader\", options: { sourceMap: true } },\n          { loader: \"sass-loader\", options: { sourceMap: true } },\n        ],\n      },\n    ],\n  },\n  optimization: {\n    minimizer: [new CssMinimizerPlugin()],\n  },\n  plugins: [new MiniCssExtractPlugin()],\n};\n```\n\n### Remove all comments\n\nRemove all comments (including comments starting with `/*!`).\n\n```js\nmodule.exports = {\n  optimization: {\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          preset: [\n            \"default\",\n            {\n              discardComments: { removeAll: true },\n            },\n          ],\n        },\n      }),\n    ],\n  },\n};\n```\n\n### Using custom minifier [csso](https://github.com/css/csso)\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  // Uncomment if you need source maps\n  // devtool: \"source-map\",\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minify: CssMinimizerPlugin.cssoMinify,\n        // Uncomment this line for options\n        // minimizerOptions: { restructure: false },\n      }),\n    ],\n  },\n};\n```\n\n### Using custom minifier [clean-css](https://github.com/jakubpawlowicz/clean-css)\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  // Uncomment if you need source maps\n  // devtool: \"source-map\",\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minify: CssMinimizerPlugin.cleanCssMinify,\n        // Uncomment this line for options\n        // minimizerOptions: { compatibility: 'ie11,-properties.merging' },\n      }),\n    ],\n  },\n};\n```\n\n### Using custom minifier [esbuild](https://github.com/evanw/esbuild)\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  // Uncomment if you need source maps\n  // devtool: \"source-map\",\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minify: CssMinimizerPlugin.esbuildMinify,\n      }),\n    ],\n  },\n};\n```\n\n### Using custom minifier [lightningcss](https://github.com/parcel-bundler/lightningcss), previously `@parcel/css`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  // Uncomment if you need source maps\n  // devtool: \"source-map\",\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minify: CssMinimizerPlugin.lightningCssMinify,\n        // Uncomment this line for options\n        // minimizerOptions: { targets: { ie: 11 }, drafts: { nesting: true } },\n      }),\n    ],\n  },\n};\n```\n\n### Using custom minifier [swc](https://github.com/swc-project/swc)\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  // Uncomment if you need source maps\n  // devtool: \"source-map\",\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new CssMinimizerPlugin({\n        minify: CssMinimizerPlugin.swcMinify,\n        // Uncomment this line for options\n        // minimizerOptions: {},\n      }),\n    ],\n  },\n};\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/css-minimizer-webpack-plugin.svg\n[npm-url]: https://npmjs.com/package/css-minimizer-webpack-plugin\n[node]: https://img.shields.io/node/v/css-minimizer-webpack-plugin.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/css-minimizer-webpack-plugin/workflows/css-minimizer-webpack-plugin/badge.svg\n[tests-url]: https://github.com/webpack-contrib/css-minimizer-webpack-plugin/actions\n[cover]: https://codecov.io/gh/webpack-contrib/css-minimizer-webpack-plugin/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/css-minimizer-webpack-plugin\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=css-minimizer-webpack-plugin\n[size-url]: https://packagephobia.now.sh/result?p=css-minimizer-webpack-plugin\n","funding_links":["https://opencollective.com/webpack"],"categories":["Plugins"],"sub_categories":["Rspack Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fcss-minimizer-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fcss-minimizer-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fcss-minimizer-webpack-plugin/lists"}