@rsbuild/plugin-css-minimizer

An Rsbuild to customize the CSS minimizer, switch to cssnano or other tools for CSS compression.

@rsbuild/plugin-css-minimizer internally integrates css-minimizer-webpack-plugin.

Usage

Install:

1npm add @rsbuild/plugin-css-minimizer -D

Add plugin to your rsbuild.config.ts:

1// rsbuild.config.ts
2import { pluginCssMinimizer } from "@rsbuild/plugin-css-minimizer";
3
4export default {
5  plugins: [pluginCssMinimizer()],
6};

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 of css-minimizer-webpack-plugin to explore all available options.

• Type: Object | Function | undefined
• Default:

1const defaultOptions = {
2  minify: CssMinimizerWebpackPlugin.cssnanoMinify,
3  minimizerOptions: {
4    preset: [
5      "default",
6      {
7        mergeLonghand: false,
8      },
9    ],
10  },
11};

• Example 1: modify the preset configuration of cssnano.

1pluginCssMinimizer({
2  pluginOptions: {
3    minimizerOptions: {
4      preset: require.resolve("cssnano-preset-simple"),
5    },
6  },
7});

• Example 2: pass a function to modify the default options.

1pluginCssMinimizer({
2  pluginOptions: (options) => {
3    options.minimizerOptions = {
4      preset: require.resolve("cssnano-preset-simple"),
5    };
6  },
7});

• Example 3: Switch to other tools for CSS minification.

1import {
2  pluginCssMinimizer,
3  CssMinimizerWebpackPlugin,
4} from '@rsbuild/plugin-css-minimizer';
5
6pluginCssMinimizer({
7  pluginOptions: {
8    minify: CssMinimizerWebpackPlugin.cleanCssMinify,
9    minimizerOptions: {
10      level: {
11        1: {
12          roundingPrecision: "all=3,px=5",
13        },
14      },
15    },
16  },
17}),

License

MIT.