Lightning CSS 使用指南：从入门到精通

什么是 Lightning CSS

Lightning CSS 是一个高性能的 CSS 处理工具，它能够解析、转换和压缩 CSS 代码。相比传统的 CSS 处理器，它具有以下显著优势：

1. 极速处理：采用 Rust 编写，性能远超 JavaScript 实现的处理器
2. 现代化支持：原生支持 CSS 新特性如嵌套规则、自定义媒体查询等
3. 模块化设计：可作为库集成到各种构建工具中

安装 Lightning CSS

在 Node.js 项目中安装 Lightning CSS 非常简单：

npm install --save-dev lightningcss

或者使用 Yarn：

yarn add --dev lightningcss

核心 API 使用

基本转换功能

Lightning CSS 提供了 transform API 来处理 CSS 代码：

import { transform } from 'lightningcss';

const result = transform({
  filename: 'style.css',
  code: Buffer.from('.foo { color: red }'),
  minify: true,          // 启用压缩
  sourceMap: true        // 生成源映射
});

console.log(result.code.toString()); // 输出处理后的 CSS

高级特性

1. 浏览器目标适配：

   import { browserslistToTargets } from 'lightningcss';
   
   const targets = browserslistToTargets(browserslist('>= 0.25%'));
   
   transform({
     code: Buffer.from('...'),
     targets
   });
   

2. CSS 模块支持：

   transform({
     code: Buffer.from('...'),
     cssModules: true
   });
   

3. 实验性语法支持：

   transform({
     code: Buffer.from('...'),
     experimentalFeatures: {
       nesting: true,     // 启用嵌套规则
       customMedia: true  // 启用自定义媒体查询
     }
   });
   

集成到构建工具

与 Parcel 集成

Parcel 内置支持 Lightning CSS，只需在 package.json 中配置：

{
  "@parcel/transformer-css": {
    "cssModules": true,
    "experimentalFeatures": {
      "nesting": true
    }
  }
}

与 webpack 集成

通过 css-minimizer-webpack-plugin 使用：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.lightningCssMinify
      })
    ]
  }
};

与 Vite 集成

在 vite.config.js 中配置：

export default {
  css: {
    transformer: 'lightningcss'
  },
  build: {
    cssMinify: 'lightningcss'
  }
};

命令行工具使用

Lightning CSS 提供了独立的 CLI 工具：

1. 安装 CLI：

   npm install --save-dev lightningcss-cli
   

2. 基本使用：

   npx lightningcss --minify --bundle input.css -o output.css
   

3. 常用选项：

   • --minify: 压缩输出
   • --bundle: 打包 @import 规则
   • --sourcemap: 生成源映射
   • --targets: 指定浏览器目标

错误处理与调试

当遇到无效 CSS 语法时，Lightning CSS 默认会报错。可以通过以下方式处理：

transform({
  code: Buffer.from('...'),
  errorRecovery: true  // 跳过无效语法而非报错
});

性能优化建议

1. 合理配置浏览器目标：精确指定需要支持的浏览器范围
2. 按需启用实验性语法：不需要的特性保持关闭
3. 批量处理文件：使用 bundle API 处理多个文件
4. 复用配置：避免每次处理都重新创建配置对象

常见问题解答

Q: 如何处理 Legacy 浏览器兼容性？

A: 通过 targets 选项指定需要支持的浏览器范围，Lightning CSS 会自动添加必要的前缀和语法转换。

Q: 如何与 Sass/Less 配合使用？

A: 可以先使用 Sass/Less 处理预处理器语法，然后将结果传递给 Lightning CSS 进行后续处理。

Q: 为什么我的 CSS 嵌套没有生效？

A: 需要显式启用嵌套实验性语法：experimentalFeatures: { nesting: true }。

通过本指南，您应该已经掌握了 Lightning CSS 的核心功能和常见用法。无论是作为独立工具使用，还是集成到现有构建流程中，Lightning CSS 都能显著提升您的 CSS 处理效率。