Lightning CSS

Lightning CSS

Lightning CSS 是一款使用 Rust 编写的超高速 CSS 解析器、转换器、打包器和压缩器。它用一个工具取代 PostCSS + autoprefixer + postcss-preset-env。

何时使用此技能

在以下情况下使用此技能……	在以下情况下使用其他工具……
在 Vite 中配置 CSS 处理	生成实用类（使用 UnoCSS）
替换 PostCSS/autoprefixer 流程	检查 CSS 规则（使用 Stylelint）
设置浏览器目标转译	编写 CSS-in-JS（使用框架工具）
启用 CSS modules	格式化 CSS 代码（使用 Biome/Prettier）
为生产环境压缩 CSS	需要没有 Lightning CSS 等效项的 PostCSS 插件
打包 CSS @import 链

核心能力

• 原生 Rust：转换速度比 PostCSS 快 100 倍以上
• 一体化：取代 autoprefixer、postcss-preset-env、postcss-import、cssnano
• 语法降级：根据目标将现代 CSS 转换为浏览器兼容的 CSS
• 厂商前缀：根据目标自动添加和移除前缀
• CSS modules：内置作用域类名
• 压缩：输出比 esbuild 的 CSS 压缩器更小
• 打包：内联 @import 规则并解析依赖项

安装

# As Vite dependency (most common)
npm add -D lightningcss browserslist

# Standalone CLI
npm add -g lightningcss-cli

# Bun
bun add -d lightningcss browserslist

Vite 集成

基本设置

// vite.config.ts
import { defineConfig } from 'vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

与 UnoCSS 搭配（推荐组合）

// vite.config.ts
import UnoCSS from 'unocss/vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  plugins: [UnoCSS()],
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

通过 Vite 使用 CSS Modules

// vite.config.ts - use css.lightningcss.cssModules (NOT css.modules)
export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      cssModules: {
        pattern: '[hash]_[local]'
      }
    }
  }
})

草案语法功能

// Enable experimental CSS features
export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      drafts: {
        customMedia: true
      }
    }
  }
})

CLI 用法

# Transform and minify
lightningcss --minify --bundle --targets '>= 0.25%' input.css -o output.css

# With source maps
lightningcss --minify --bundle --sourcemap input.css -o output.css

# Error recovery (skip invalid rules)
lightningcss --error-recovery input.css -o output.css

转换功能

Lightning CSS 会根据浏览器目标自动转译：

功能	现代 CSS	转译后的输出
嵌套	.parent { .child { } }	.parent .child { }
颜色函数	oklch(0.7 0.15 180)	rgb(...) 回退值
color-mix()	color-mix(in srgb, red, blue)	计算后的颜色值
light-dark()	light-dark(white, black)	媒体查询回退
逻辑属性	margin-inline	margin-left/margin-right
媒体范围语法	(480px <= width <= 768px)	(min-width: 480px) and (max-width: 768px)
厂商前缀	user-select: none	-webkit-user-select: none + 无前缀版本
数学函数	clamp()、round()	尽可能转换为静态值
自定义媒体查询	@custom-media --mobile (max-width: 768px)	内联媒体查询
:is() / :not()	复杂选择器	展开的回退写法
system-ui 字体	font-family: system-ui	跨平台字体栈

CSS Modules

Lightning CSS 内置 CSS modules 支持：

/* styles.module.css */
.container {
  composes: base from './base.module.css';
  padding: 1rem;
}

.title {
  color: var(--heading-color);
}

// Component usage
import styles from './styles.module.css'
element.className = styles.container

替换 PostCSS 流程

PostCSS 插件	Lightning CSS 等效项
autoprefixer	内置（通过 targets）
postcss-preset-env	内置（语法降级）
postcss-import	--bundle 标志
postcss-nesting	内置（通过 targets）
postcss-custom-media	drafts.customMedia: true
cssnano	--minify 标志
postcss-modules	cssModules: true

迁移步骤

1. 移除 PostCSS 依赖和 postcss.config.js
2. 将 lightningcss 和 browserslist 添加为开发依赖
3. 在 Vite 配置中设置 css.transformer: 'lightningcss'
4. 设置 build.cssMinify: 'lightningcss'
5. 通过 browserslist（.browserslistrc 或 package.json）配置目标
6. 将 CSS modules 配置从 css.modules 移至 css.lightningcss.cssModules

浏览器目标

# .browserslistrc
>= 0.25%
not dead
not op_mini all

// package.json alternative
{
  "browserslist": [">= 0.25%", "not dead"]
}

Agent 优化

场景	命令
快速压缩	lightningcss --minify input.css -o output.css
打包并压缩	lightningcss --minify --bundle input.css -o output.css
指定目标	lightningcss --minify --targets '>= 0.25%' input.css -o output.css
错误恢复	lightningcss --error-recovery input.css -o output.css
检查 Vite 配置	查看 vite.config.ts 中的 css.transformer 和 css.lightningcss
检查 browserslist	查看 .browserslistrc 或 package.json 中的 browserslist

快速参考

标志	描述
--minify	压缩输出的 CSS
--bundle	内联 @import 规则
--targets	浏览器目标（browserslist 查询）
--sourcemap	生成源映射
--error-recovery	跳过无效规则，而不是报错
-o <file>	输出文件路径

参考资料

• 官方文档：https://lightningcss.dev
• Vite 集成：https://vite.dev/guide/features#lightning-css
• 转译功能：https://lightningcss.dev/transpilation.html
• CSS 模块：https://lightningcss.dev/css-modules.html