UnoCSS 中文网

主题

Lightning CSS 处理器 ​

🌐 Lightning CSS processor

@unocss/processor-lightningcss 使用 Lightning CSS 处理每一个生成的 UnoCSS 层。它可以压缩 CSS、编译现代 CSS 语法，并为你的浏览器目标添加兼容性转换。

源代码

安装 ​

🌐 Installation

bash
pnpm add -D @unocss/processor-lightningcss
bash
yarn add -D @unocss/processor-lightningcss
bash
npm install -D @unocss/processor-lightningcss
bash
bun add -D @unocss/processor-lightningcss

用法 ​

🌐 Usage

在你的 UnoCSS 配置中将处理器添加到 processors 数组中：

🌐 Add the processor to the processors array in your UnoCSS configuration:

uno.config.ts
ts
import processorLightningCSS from '@unocss/processor-lightningcss'
import { defineConfig } from 'unocss'

export default defineConfig({
  processors: [
    processorLightningCSS({
      targets: {
        chrome: 111 << 16,
        safari: 15 << 16,
      },
    }),
  ],
})

在 UnoCSS 生成每个非空层之后，处理器会运行。它的输出会通过 getLayer()、getLayers() 和生成的 css 结果返回。

🌐 The processor runs after UnoCSS generates each non-empty layer. Its output is returned by getLayer(), getLayers(), and the generated css result.

选项 ​

🌐 Options

处理器接受 Lightning CSS TransformOptions，除了 code 和 filename。UnoCSS 为每个生成的层提供这些值。

🌐 The processor accepts Lightning CSS TransformOptions, except for code and filename. UnoCSS supplies those values for each generated layer.

当前图层名称被用作文件名。例如，utilities 图层作为 utilities.css 传递给 Lightning CSS，这使得识别转换错误更容易。

🌐 The current layer name is used as the filename. For example, the utilities layer is passed to Lightning CSS as utilities.css, which makes transformation errors easier to identify.

压缩 ​

🌐 Minification

默认情况下，当 envMode 是 build 时会启用压缩，当它是 dev 时会禁用压缩。可以通过显式设置 minify 来覆盖此行为：

🌐 By default, minification is enabled when envMode is build and disabled when it is dev. Set minify explicitly to override that behavior:

uno.config.ts
ts
processorLightningCSS({
  minify: true,
})

浏览器目标 ​

🌐 Browser targets

使用 targets 来控制 Lightning CSS 应用哪些兼容性转换：

🌐 Use targets to control which compatibility transforms Lightning CSS applies:

uno.config.ts
ts
processorLightningCSS({
  targets: {
    chrome: 111 << 16,
    firefox: 113 << 16,
    safari: 15 << 16,
  },
})

仅限 Node.js ​

🌐 Node.js only

这个处理器使用 Lightning CSS 的原生 Node.js 版本，主要用于构建时使用。当它在 Node.js 外部被调用时，UnoCSS 会发出一次警告，并返回未更改的原始 CSS。

🌐 This processor uses the native Node.js build of Lightning CSS and is intended for build-time usage. When it is invoked outside Node.js, UnoCSS emits a warning once and returns the original CSS unchanged.

许可 ​

🌐 License