使用LightningCSS优化CSS构建流程的实践指南

LightningCSS是一款高性能的CSS处理工具，它能够替代传统的PostCSS+Cssnano组合，提供更快的构建速度和更现代化的CSS处理能力。本文将介绍如何在不依赖复杂构建工具的情况下，直接通过Node.js脚本使用LightningCSS来优化CSS构建流程。

LightningCSS的核心优势

LightningCSS相比传统CSS处理工具具有几个显著优势：

1. 性能卓越：采用Rust编写，处理速度远超JavaScript实现的工具
2. 功能全面：内置嵌套语法支持、自动前缀、代码压缩等现代CSS处理功能
3. 兼容性保障：支持根据browserslist配置自动生成兼容性代码

纯Node.js环境下的实现方案

以下是一个完整的实现示例，展示了如何在不使用Webpack、Vite等构建工具的情况下，直接通过Node.js脚本处理CSS文件：

import glob from 'glob';
import path from 'path';
import fs from 'fs';
import chalk from 'chalk';

import browserslist from 'browserslist';
import { bundle, Features, browserslistToTargets } from 'lightningcss';

// 配置项从package.json中读取
const config = {
    src: process.env.npm_package_config_css,
    dist: process.env.npm_package_config_cssDist,
    browsers: process.env.npm_package_browserslist,
};

console.log(chalk.magenta('Generating Development CSS'), '\n');

// 使用glob获取所有CSS文件
await glob('*.css', { cwd: path.resolve(config.src) })
    .then(files => {
        processStack(files);
    })
    .catch(error => {
        console.warn(error);
    });

function processStack(files, folderPath = config.src) {
    // 确保目标目录存在
    fs.mkdirSync(config.dist, { recursive: true });
    
    files.forEach((file) => {
        const destination = config.dist + file;
        
        // 使用LightningCSS处理CSS文件
        const result = bundle({
            filename: folderPath + file,
            sourceMap: true,
            include: Features.Nesting, // 启用嵌套语法支持
            targets: browserslistToTargets(browserslist(config.browsers)),
        });

        // 处理警告信息
        if (result.warnings) {
            result.warnings.forEach(function(warn) {
                console.warn(chalk.yellow(warn.message));
                console.log(warn.loc.filename, warn.loc.line + ':' + warn.loc.column);
            });
        }

        // 手动添加sourceMap引用
        let code = result.code.toString() + `\n/*# sourceMappingURL=${file}.map */`;
        
        // 写入处理后的CSS文件
        fs.writeFile(destination, code, 'utf8', (err) => {
            if (err) throw err;
            console.log(destination + ' ' + chalk.green('generated'));
        });

        // 写入sourceMap文件
        if (result.map) {
            fs.writeFile(destination + '.map', result.map, 'utf8', (err) => {
                if (err) throw err;
                console.log(destination + ' ' + chalk.green('Map generated'));
            });
        }
    });
}

关键实现细节解析

1. 文件处理流程：

   • 使用glob模块查找指定目录下的所有CSS文件
   • 为每个文件创建LightningCSS处理任务
   • 将处理结果写入目标目录

2. LightningCSS配置：

   • sourceMap: true 生成sourceMap便于调试
   • include: Features.Nesting 启用CSS嵌套语法支持
   • targets 根据browserslist配置自动处理浏览器兼容性

3. 注意事项：

   • LightningCSS默认不会在输出CSS中添加sourceMap引用注释，需要手动添加
   • 处理过程中产生的警告信息需要单独处理
   • 目标目录需要确保存在，否则会报错

与传统方案的对比

相比传统的PostCSS+Cssnano方案，LightningCSS方案具有以下改进：

1. 性能提升：处理速度显著提高，特别是在大型项目上
2. 配置简化：无需维护复杂的PostCSS插件链
3. 功能集成：嵌套语法、自动前缀等常用功能内置，无需额外插件

实际应用建议

1. 渐进式迁移：可以先在部分CSS文件上试用，逐步替换现有方案
2. 版本控制：建议将生成的CSS和sourceMap文件都纳入版本控制
3. 持续集成：可以在CI/CD流程中加入CSS构建步骤，确保一致性

通过这种纯Node.js的实现方式，开发者可以在不引入复杂构建工具的情况下，享受到LightningCSS带来的性能优势和现代化CSS处理能力，特别适合中小型项目或对构建流程有简化需求的场景。