LightningCssMinimizerRspackPlugin

Rspack のみ

このプラグインは、CSSアセットをminifyするためにlightningcssを使用します。optimization.minimizerを参照してください。

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

オプション

include

型: string | RegExp | (string | RegExp)[]
デフォルト: undefined

minifyするファイルを指定するために使用します。これは出力ファイルのパスと一致します。

exclude

型: string | RegExp | (string | RegExp)[]
デフォルト: undefined

minifyから除外するファイルを指定するために使用します。これは出力ファイルのパスと一致します。

test

型: string | RegExp | (string | RegExp)[]
デフォルト: undefined

CSSファイルが照合されるパターンを提供するために使用します。出力ファイル名が指定されたパターンに一致する場合、minifyされ、そうでない場合はminifyされません。

removeUnusedLocalIdents

型: boolean
デフォルト: true

未使用のCSS Modulesのローカル識別子（未使用のCSSクラス名、ID、@keyframe名を含む）を自動的に削除するかどうか。これらの宣言は削除されます。

例えば、次のCSS Modulesでは、クラス名aとbがエクスポートされていますが、クラス名aのみがjsファイルで使用されています。

index.module.css

.a {
  color: red;
}

.b {
  color: blue;
}

index.js

import * as styles from './index.module.css';
document.body.className = styles.a;

この時点で、クラス名bが未使用であるという情報は、Rspackのツリーシェイキング機能を通じて取得され、lightningcssに提供されます。minify中、クラス名bの宣言はCSS出力から削除され、次の最終出力になります。

.a{color: red}

minimizerOptions

minifyのためにLightning CSSに渡される設定。

以下はサポートされている設定です。targets設定はプレーンなbrowserslistクエリです。その他の詳細な使用法については、Lightning CSS ドキュメントを参照してください。

情報

minifyによってブラウザの非互換性を引き起こす可能性のある高度な構文が導入されないように、デフォルトのtargetsは"fully supports es6"に設定されています（minifyは下位レベルの構文を高度な構文に変換する可能性があるため、より短くなります）。
excludeオプションは、デフォルトですべての機能で構成されています。通常、builtin:lightningcss-loaderまたは他のローダーで構文の低下を行っているため、このプラグインはminifyプロセス中に構文が低下するのを避けるために、デフォルトですべての機能を除外します。

最良のminify結果を得るために、ユーザーが独自のtargetsを構成することをお勧めします。

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;
};

このページの内容

LightningCssMinimizerRspackPlugin#

オプション#

include#

exclude#

test#

removeUnusedLocalIdents#