close
Guide
Config
Plugin
API
Blog
About
Contribute
Guide
Config
Plugin
API
Blog
About
Contribute

LightningCssMinimizerRspackPlugin

Rspack only

This plugin uses lightningcss to minify CSS assets. See optimization.minimizer.

module.exports = {
  // ...
  optimization: {
    minimizer: [new rspack.LightningCssMinimizerRspackPlugin(options)],
  },
};

Options

include

  • Type: string | RegExp | (string | RegExp)[]
  • Default: undefined

Use this to specify which files should be minified, it matches the path of the output files.

exclude

  • Type: string | RegExp | (string | RegExp)[]
  • Default: undefined

Use this to specify which files should be excluded from minification, it matches the path of the output files.

test

  • Type: string | RegExp | (string | RegExp)[]
  • Default: undefined

Use this to provide a pattern that CSS files are matched against. If the output filename matches the given pattern, it will be minified, otherwise it won't be.

removeUnusedLocalIdents

  • Type: boolean
  • Default: true

Whether to automatically remove the unused local idents of CSS Modules, including unused CSS class names, ids, and @keyframe names. The declarations of these will be removed.

For example, in the following CSS Modules, class names a and b are exported, but only class name a is used in the js file:

index.module.css
.a {
  color: red;
}

.b {
  color: blue;
}
index.js
import * as styles from './index.module.css';
document.body.className = styles.a;

At this point, the information that class name b is unused will be obtained via Rspack's tree shaking feature and provided to lightningcss. During minimization, the declaration for class name b will be removed from the CSS output, resulting in the following final output:

.a{color: red}

minimizerOptions

Configuration passed to Lightning CSS for minification.

Below are the configurations supported, targets configuration is plain browserslist query, for other detailed usage, please refer to Lightning CSS documentation

INFO
  1. The default targets is set to "fully supports es6" to ensure that minification does not introduce advanced syntax that could cause browser incompatibility (minification might turn lower-level syntax into advanced syntax because it is shorter).
  2. The exclude option is configured with all features by default. We usually do syntax degradation in builtin:lightningcss-loader or other loaders, so this plugin excludes all features by default to avoid syntax downgrading during the minimize process.

We recommend and encourage users to configure their own targets to achieve the best minification results. 

type LightningCssMinimizerOptions = {
  errorRecovery?: boolean;
  targets?: string[] | string;
  include?: LightningcssFeatureOptions;
  exclude?: LightningcssFeatureOptions;
  draft?: Drafts;
  nonStandard?: NonStandard;
  pseudoClasses?: PseudoClasses;
  unusedSymbols?: Set<String>;
};

type LightningcssFeatureOptions = {
  nesting?: boolean;
  notSelectorList?: boolean;
  dirSelector?: boolean;
  langSelectorList?: boolean;
  isSelector?: boolean;
  textDecorationThicknessPercent?: boolean;
  mediaIntervalSyntax?: boolean;
  mediaRangeSyntax?: boolean;
  customMediaQueries?: boolean;
  clampFunction?: boolean;
  colorFunction?: boolean;
  oklabColors?: boolean;
  labColors?: boolean;
  p3Colors?: boolean;
  hexAlphaColors?: boolean;
  spaceSeparatedColorNotation?: boolean;
  fontFamilySystemUi?: boolean;
  doublePositionGradients?: boolean;
  vendorPrefixes?: boolean;
  logicalProperties?: boolean;
  selectors?: boolean;
  mediaQueries?: boolean;
  color?: boolean;
};