跳到主要内容

Lightning CSS

问题​

Lightning CSS 是什么？它如何替代 PostCSS + Autoprefixer？

答案​

Lightning CSS 是用 Rust 编写的 CSS 解析器、转换器和压缩器，比 PostCSS 快 100 倍以上。Parcel 默认使用它，Vite 也已集成支持。

关于 PostCSS 原理，可参考 PostCSS 与 Autoprefixer。

Lightning CSS vs PostCSS​

维度PostCSS + AutoprefixerLightning CSS
语言JavaScriptRust
速度1x100x+
功能插件驱动内置：前缀、降级、压缩、CSS Modules
Browserslist通过 Autoprefixer内置支持
CSS Nesting需要插件内置
CSS Modules需要 postcss-modules内置
压缩cssnano（慢）内置（极快）

在 Vite 中使用​

vite.config.ts
export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(
        browserslist('>= 0.25%')
      ),
      // 自动添加浏览器前缀
      // 自动降级新 CSS 语法
      // 内置 CSS Modules 支持
    },
  },
  build: {
    cssMinify: 'lightningcss', // 用 Lightning CSS 压缩
  },
});

内置的 CSS 转换能力​

Lightning CSS 一个工具替代了多个 PostCSS 插件：

PostCSS 插件Lightning CSS 内置
autoprefixer✅ 浏览器前缀
postcss-nesting✅ CSS Nesting 降级
postcss-custom-media✅ Custom Media
postcss-color-function✅ 颜色函数降级
cssnano✅ 压缩
postcss-modules✅ CSS Modules

常见面试问题​

Q1: 为什么 Lightning CSS 比 PostCSS 快 100 倍？​

答案：

  1. Rust vs JS：编译型语言 vs 解释型语言
  2. 单 pass：解析、转换、压缩在一次遍历中完成（PostCSS 每个插件独立遍历）
  3. 内存效率：Rust 的零成本抽象，无 GC 开销
  4. 内置功能：不需要在多个插件间传递 AST

相关链接​