{"id":27911245,"url":"https://github.com/aliezzahn/rsbuild-plugin-css-optimizer","last_synced_at":"2025-12-27T03:35:46.533Z","repository":{"id":291401236,"uuid":"977527605","full_name":"aliezzahn/rsbuild-plugin-css-optimizer","owner":"aliezzahn","description":"An Rsbuild plugin to customize CSS minification, allowing you to choose between cssnano (JavaScript-based) or Lightning CSS (Rust-based) for high-performance CSS compression.","archived":false,"fork":false,"pushed_at":"2025-05-04T16:30:46.000Z","size":54,"stargazers_count":11,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-25T01:43:02.126Z","etag":null,"topics":["css","cssnano","lib","lightning-css","plugin","react","rsbuild","rspack","rust","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/rsbuild-plugin-css-optimizer","language":"TypeScript","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/aliezzahn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-04T12:14:41.000Z","updated_at":"2025-05-04T16:31:39.000Z","dependencies_parsed_at":"2025-05-04T12:31:55.431Z","dependency_job_id":null,"html_url":"https://github.com/aliezzahn/rsbuild-plugin-css-optimizer","commit_stats":null,"previous_names":["aliezzahn/rsbuild-plugin-css-optimizer"],"tags_count":0,"template":false,"template_full_name":"rspack-contrib/rsbuild-plugin-template","purl":"pkg:github/aliezzahn/rsbuild-plugin-css-optimizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliezzahn%2Frsbuild-plugin-css-optimizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliezzahn%2Frsbuild-plugin-css-optimizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliezzahn%2Frsbuild-plugin-css-optimizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliezzahn%2Frsbuild-plugin-css-optimizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aliezzahn","download_url":"https://codeload.github.com/aliezzahn/rsbuild-plugin-css-optimizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliezzahn%2Frsbuild-plugin-css-optimizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28071442,"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","status":"online","status_checked_at":"2025-12-27T02:00:05.897Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","cssnano","lib","lightning-css","plugin","react","rsbuild","rspack","rust","webpack"],"created_at":"2025-05-06T10:02:05.696Z","updated_at":"2025-12-27T03:35:46.526Z","avatar_url":"https://github.com/aliezzahn.png","language":"TypeScript","readme":"[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/web-infra-dev/awesome-rspack)\n\n# rsbuild-plugin-css-optimizer\n\nAn Rsbuild plugin to customize CSS minification, allowing you to choose between [cssnano](https://github.com/cssnano/cssnano) (JavaScript-based) or [Lightning CSS](https://lightningcss.dev) (Rust-based) for high-performance CSS compression.\n\n`rsbuild-plugin-css-optimizer` internally integrates [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) to optimize CSS assets in production builds.\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/rsbuild-plugin-css-optimizer\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/rsbuild-plugin-css-optimizer?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/rsbuild-plugin-css-optimizer?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/rsbuild-plugin-css-optimizer.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- **Flexible Minifier Choice**: Switch between `cssnano` for extensive optimizations or `Lightning CSS` for 5-10x faster minification.\n- **Performance**: Leverage `Lightning CSS`’s Rust-based engine for parallel processing and native performance.\n- **Type Safety**: TypeScript types ensure correct configuration for each minifier.\n- **Seamless Rsbuild Integration**: Automatically applies minification in production builds when `minify.css` is enabled.\n- **Customizable Options**: Fine-tune `cssnano` and `Lightning CSS` settings for browser targeting, CSS features, and more.\n\n## Installation\n\nInstall the plugin and its dependency:\n\n```bash\nnpm add rsbuild-plugin-css-optimizer -D\n```\n\n```bash\nbun add -d rsbuild-plugin-css-optimizer \n```\n\n## Usage\n\nAdd the `pluginCssMinimizer` to your Rsbuild configuration in `rsbuild.config.ts`. The plugin enables CSS minification in production builds when `output.minify.css` is `true`.\n\n### Basic Example (Lightning CSS)\n\n```ts\n// rsbuild.config.ts\nimport { pluginCssMinimizer } from \"rsbuild-plugin-css-optimizer\";\n\nexport default {\n  plugins: [\n    pluginCssMinimizer({\n      minifier: \"lightningcss\",\n      lightningCssOptions: {\n        minimizerOptions: {\n          targets: [\"\u003e 0.25%\", \"not dead\"],\n        },\n      },\n    }),\n  ],\n};\n```\n\n### Basic Example (cssnano)\n\n```ts\n// rsbuild.config.ts\nimport { pluginCssMinimizer } from \"rsbuild-plugin-css-optimizer\";\n\nexport default {\n  plugins: [\n    pluginCssMinimizer(), // Uses cssnano by default\n  ],\n};\n```\n\n## Options\n\nThe plugin accepts a `PluginCssMinimizerOptions` object with the following properties:\n\n### `minifier`\n\n- **Type**: `'cssnano' | 'lightningcss'`\n- **Default**: `'cssnano'`\n- **Description**: Specifies the CSS minifier to use.\n  - `'cssnano'`: JavaScript-based minifier with a wide range of optimizations.\n  - `'lightningcss'`: Rust-based minifier for significantly faster performance.\n- **Example**:\n  ```ts\n  pluginCssMinimizer({\n    minifier: \"lightningcss\",\n  });\n  ```\n\n### `cssnanoOptions`\n\n- **Type**: `ConfigChain\u003cCssMinimizerPlugin.BasePluginOptions \u0026 CssMinimizerPlugin.DefinedDefaultMinimizerAndOptions\u003cCssNanoOptions\u003e\u003e | Function`\n- **Default**:\n  ```ts\n  {\n    minify: CssMinimizerWebpackPlugin.cssnanoMinify,\n    minimizerOptions: {\n      preset: ['default', { mergeLonghand: false }],\n    },\n  }\n  ```\n- **Description**: Configuration for `cssnano`, applied when `minifier` is `'cssnano'`. Can be an object merged with defaults or a function to modify options. See [cssnano documentation](https://cssnano.co/docs) for all available options.\n- **Sub-options**:\n  - `configFile` (string, optional): Path to a cssnano configuration file.\n  - `preset` (string | [string, object], optional): Preset name and configuration (e.g., `['default', { mergeLonghand: false }]`).\n- **Example (Object)**:\n  ```ts\n  pluginCssMinimizer({\n    minifier: \"cssnano\",\n    cssnanoOptions: {\n      minimizerOptions: {\n        preset: [\"advanced\", { discardComments: { removeAll: true } }],\n      },\n    },\n  });\n  ```\n- **Example (Function)**:\n  ```ts\n  pluginCssMinimizer({\n    minifier: \"cssnano\",\n    cssnanoOptions: (options) =\u003e {\n      options.minimizerOptions = {\n        preset: require.resolve(\"cssnano-preset-simple\"),\n      };\n      return options;\n    },\n  });\n  ```\n\n### `lightningCssOptions`\n\n- **Type**: `ConfigChain\u003cCssMinimizerPlugin.BasePluginOptions \u0026 CssMinimizerPlugin.DefinedDefaultMinimizerAndOptions\u003cLightningCssOptions\u003e\u003e | Function`\n- **Default**:\n  ```ts\n  {\n    minify: CssMinimizerWebpackPlugin.lightningCssMinify,\n    minimizerOptions: {\n      targets: 'defaults',\n    },\n  }\n  ```\n- **Description**: Configuration for `Lightning CSS`, applied when `minifier` is `'lightningcss'`. Can be an object merged with defaults or a function to modify options. See [Lightning CSS documentation](https://lightningcss.dev/options.html) for all available options.\n- **Sub-options**:\n  - `targets` (string | string[] | { [key: string]: number }, optional): Browser targets using browserslist syntax (e.g., `['\u003e 0.25%', 'not dead']`) or version objects (e.g., `{ chrome: 80 }`).\n  - `drafts` (object, optional): Enable draft CSS features, such as `{ nesting: true }`.\n- **Example (Object)**:\n  ```ts\n  pluginCssMinimizer({\n    minifier: \"lightningcss\",\n    lightningCssOptions: {\n      minimizerOptions: {\n        targets: [\"chrome \u003e= 80\", \"firefox \u003e= 78\"],\n        drafts: { nesting: true },\n      },\n    },\n  });\n  ```\n- **Example (Function)**:\n  ```ts\n  pluginCssMinimizer({\n    minifier: \"lightningcss\",\n    lightningCssOptions: (options) =\u003e {\n      options.minimizerOptions.targets = [\"\u003e 0.5%\"];\n      return options;\n    },\n  });\n  ```\n\n## Full Example\n\n```ts\n// rsbuild.config.ts\nimport { pluginCssMinimizer } from \"rsbuild-plugin-css-optimizer\";\n\nexport default {\n  output: {\n    minify: {\n      css: true, // Enable CSS minification\n    },\n  },\n  plugins: [\n    pluginCssMinimizer({\n      minifier: \"lightningcss\",\n      lightningCssOptions: {\n        minimizerOptions: {\n          targets: [\"\u003e 0.25%\", \"not dead\"],\n          drafts: { nesting: true },\n        },\n      },\n    }),\n    // Alternatively, use cssnano\n    pluginCssMinimizer({\n      minifier: \"cssnano\",\n      cssnanoOptions: {\n        minimizerOptions: {\n          preset: [\"default\", { discardComments: { removeAll: true } }],\n        },\n      },\n    }),\n  ],\n};\n```\n\n## Performance\n\n- **Lightning CSS**:\n  - **Speed**: 5-10x faster than `cssnano` due to Rust’s compiled performance and parallel processing.\n  - **Use Case**: Ideal for large projects or frequent builds where build speed is critical.\n- **cssnano**:\n  - **Speed**: Slower but provides extensive optimization plugins for fine-grained control.\n  - **Use Case**: Best for projects prioritizing minimal CSS output size over build performance.\n\n## Notes\n\n- **Source Maps**: Enable source maps in Rsbuild with `devtool: 'source-map'` for both minifiers.\n- **Browser Targets**: For `Lightning CSS`, use browserslist syntax (e.g., `['\u003e 0.25%']`) or version objects (e.g., `{ chrome: 80 }`). The default (`'defaults'`) targets modern browsers.\n- **cssnano Compatibility**: The `mergeLonghand: false` default prevents issues with properties like `safe-area-inset-top` (see [cssnano issue #803](https://github.com/cssnano/cssnano/issues/803)).\n- **Production Only**: Minification applies only in production builds when `isProd` is `true` and `minify.css` is enabled.\n\n## Troubleshooting\n\n- **Minification Not Applied**:\n  - Verify `output.minify.css` is `true` or `minify` is `true` in your Rsbuild config.\n  - Ensure the build is in production mode (`isProd: true`).\n- **Invalid Options**:\n  - Check TypeScript errors for incorrect `cssnanoOptions` or `lightningCssOptions`.\n  - Refer to [cssnano](https://cssnano.co/docs) or [Lightning CSS](https://lightningcss.dev/options.html) documentation for valid options.\n\n## Contributing\n\nContributions are welcome! Please submit issues or pull requests to the [plugin repository](https://github.com/aliezzahn/rsbuild-plugin-css-optimizer).\n\n## License\n\n[MIT](./LICENSE)\n","funding_links":[],"categories":["Plugins"],"sub_categories":["Rsbuild Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliezzahn%2Frsbuild-plugin-css-optimizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faliezzahn%2Frsbuild-plugin-css-optimizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliezzahn%2Frsbuild-plugin-css-optimizer/lists"}