内置 lightningcss-loader

Added in v1.0.0

builtin:lightningcss-loader 使用 Rspack 内置的 lightningcss 处理 CSS，可以替代 postcss-loader 中的降级功能，让 CSS 编译更快。

示例

如果需要在项目中使用 builtin:lightningcss-loader，需进行如下配置。

  1. const rspack = require('@rspack/core');
  3. module.exports = {
  4.   module: {
  5.     rules: [
  6.       {
  7.         test: /\.css$/,
  8.         use: [
  9.           {
  10.             loader: 'builtin:lightningcss-loader',
  11.             options: {
  12.               targets: 'ie 10',
  13.             },
  14.           },
  15.           // ... other loader
  16.         ],
  17.       },
  18.     ],
  19.   },
  20. };

类型声明

你可以使用 @rspack/core 导出的 LightningcssLoaderOptions 类型来开启类型提示：

  • rspack.config.js:
  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.css$/,
  6.         use: [
  7.           {
  8.             loader: 'builtin:lightningcss-loader',
  9.             /** @type {import('@rspack/core').LightningcssLoaderOptions} */
  10.             options: {
  11.               targets: 'ie 10',
  12.             },
  13.           },
  14.           // ... other loader
  15.         ],
  16.       },
  17.     ],
  18.   },
  19. };

Options

下面是 builtin:lightningcss-loader 支持的配置。详细的解释请查看 lightningcss 文档

  1. type LightningcssFeatureOptions = {
  2.   nesting?: boolean;
  3.   notSelectorList?: boolean;
  4.   dirSelector?: boolean;
  5.   langSelectorList?: boolean;
  6.   isSelector?: boolean;
  7.   textDecorationThicknessPercent?: boolean;
  8.   mediaIntervalSyntax?: boolean;
  9.   mediaRangeSyntax?: boolean;
  10.   customMediaQueries?: boolean;
  11.   clampFunction?: boolean;
  12.   colorFunction?: boolean;
  13.   oklabColors?: boolean;
  14.   labColors?: boolean;
  15.   p3Colors?: boolean;
  16.   hexAlphaColors?: boolean;
  17.   spaceSeparatedColorNotation?: boolean;
  18.   fontFamilySystemUi?: boolean;
  19.   doublePositionGradients?: boolean;
  20.   vendorPrefixes?: boolean;
  21.   logicalProperties?: boolean;
  22.   selectors?: boolean;
  23.   mediaQueries?: boolean;
  24.   color?: boolean;
  25. };
  27. type LightningcssLoaderOptions = {
  28.   minify?: boolean;
  29.   errorRecovery?: boolean;
  30.   targets?: string[] | string;
  31.   include?: LightningcssFeatureOptions;
  32.   exclude?: LightningcssFeatureOptions;
  33.   /**
  34.    * @deprecated Use `drafts` instead.
  35.    * This will be removed in the next major version.
  36.    */
  37.   draft?: Drafts;
  38.   drafts?: Drafts;
  39.   nonStandard?: NonStandard;
  40.   pseudoClasses?: PseudoClasses;
  41.   unusedSymbols?: Set<String>;
  42. };

targets

browserslist 查询字符串。

下面是一些 targets 的用法示例。

  • 设置 browserslist 查询字符串：
  1. const loader = {
  2.   loader: 'builtin:lightningcss-loader',
  3.   /** @type {import('@rspack/core').LightningcssLoaderOptions} */
  4.   options: {
  5.     targets: 'ie 10',
  6.   },
  7. };
  • 设置 browserslist 查询字符串数组：
  1. const loader = {
  2.   loader: 'builtin:lightningcss-loader',
  3.   /** @type {import('@rspack/core').LightningcssLoaderOptions} */
  4.   options: {
  5.     targets: ['chrome >= 87', 'edge >= 88', '> 0.5%'],
  6.   },
  7. };