Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer
An Rsbuild to customize the CSS minimizer, switch to cssnano or other tools for CSS compression.
https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer
rsbuild rsbuild-plugin rspack
Last synced: 16 days ago
JSON representation
An Rsbuild to customize the CSS minimizer, switch to cssnano or other tools for CSS compression.
- Host: GitHub
- URL: https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer
- Owner: rspack-contrib
- License: mit
- Created: 2024-07-04T10:44:02.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-01T01:46:17.000Z (26 days ago)
- Last Synced: 2024-12-01T02:31:16.109Z (26 days ago)
- Topics: rsbuild, rsbuild-plugin, rspack
- Language: TypeScript
- Homepage:
- Size: 88.9 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rspack - @rsbuild/plugin-css-minimizer
README
# @rsbuild/plugin-css-minimizer
An Rsbuild to customize the CSS minimizer, switch to [cssnano](https://github.com/cssnano/cssnano) or other tools for CSS compression.
`@rsbuild/plugin-css-minimizer` internally integrates [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin).
## Usage
Install:
```bash
npm add @rsbuild/plugin-css-minimizer -D
```
Add plugin to your `rsbuild.config.ts`:
```ts
// rsbuild.config.ts
import { pluginCssMinimizer } from "@rsbuild/plugin-css-minimizer";
export default {
plugins: [pluginCssMinimizer()],
};
```
## Options
### pluginOptions
Used to customize the options of css-minimizer-webpack-plugin.
The value of `pluginOptions` will be merged with the default options inside the plugin using `Object.assign` and then passed to the css-minimizer-webpack-plugin. You can refer to the [README documentation](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) of css-minimizer-webpack-plugin to explore all available options.
- **Type:** `Object | Function | undefined`
- **Default:**
```ts
const defaultOptions = {
minify: CssMinimizerWebpackPlugin.cssnanoMinify,
minimizerOptions: {
preset: [
"default",
{
mergeLonghand: false,
},
],
},
};
```
- **Example 1:** modify the `preset` configuration of [cssnano](https://github.com/cssnano/cssnano).
```js
pluginCssMinimizer({
pluginOptions: {
minimizerOptions: {
preset: require.resolve("cssnano-preset-simple"),
},
},
});
```
- **Example 2:** pass a function to modify the default options.
```js
pluginCssMinimizer({
pluginOptions: (options) => {
options.minimizerOptions = {
preset: require.resolve("cssnano-preset-simple"),
};
},
});
```
- **Example 3:** Switch to other tools for CSS minification.
```js
import {
pluginCssMinimizer,
CssMinimizerWebpackPlugin,
} from '@rsbuild/plugin-css-minimizer';
pluginCssMinimizer({
pluginOptions: {
minify: CssMinimizerWebpackPlugin.cleanCssMinify,
minimizerOptions: {
level: {
1: {
roundingPrecision: "all=3,px=5",
},
},
},
},
}),
```
## License
[MIT](./LICENSE).