組み込み lightningcss-loader

追加されたバージョン1.0.0

builtin:lightningcss-loaderは、Rspackの組み込みlightningcssを使用してCSSを処理します。これにより、postcss-loaderの構文変換機能を置き換え、CSS変換を高速化できます。

例

プロジェクトでbuiltin:lightningcss-loaderを使用するには、次のように設定する必要があります。

const rspack = require('@rspack/core');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'builtin:lightningcss-loader',
            options: {
              targets: 'ie 10',
            },
          },
          // ... other loaders
        ],
      },
    ],
  },
};

型宣言

@rspack/coreによってエクスポートされるLightningcssLoaderOptions型を使用して、型ヒントを有効にすることができます。

rspack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'builtin:lightningcss-loader',
            /** @type {import('@rspack/core').LightningcssLoaderOptions} */
            options: {
              targets: 'ie 10',
            },
          },
          // ... other loaders
        ],
      },
    ],
  },
};

オプション

以下は、builtin:lightningcss-loaderでサポートされている設定です。詳細な設定については、lightningcssドキュメントを参照してください。

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

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

ターゲット

browserslistクエリ文字列。

ターゲットの設定例を以下に示します。

browserslistクエリ文字列の設定

const loader = {
  loader: 'builtin:lightningcss-loader',
  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
  options: {
    targets: 'ie 10',
  },
};

browserslistクエリ文字列の配列の設定

const loader = {
  loader: 'builtin:lightningcss-loader',
  /** @type {import('@rspack/core').LightningcssLoaderOptions} */
  options: {
    targets: ['chrome >= 87', 'edge >= 88', '> 0.5%'],
  },
};

このページについて

組み込み lightningcss-loader#

例#

型宣言#

オプション#

ターゲット#

組み込み lightningcss-loader

例

型宣言

オプション

ターゲット