Vite 4.4实验性地支持Lightning CSS,Lightning CSS更快的CSS处理利器

Vite 4.4实验性

从Vite 4.4开始，Vite实验性地支持Lightning CSS。你可以通过在你的配置文件中添加 css.transformer: 'lightningcss' 来选择它，并安装可选的lightningcss依赖：

bash

npm add -D lightningcss

如果启用了这个选项，CSS文件将由Lightning CSS处理，而不是PostCSS。你可以将Lightning CSS选项传递给css.lightningcss 配置选项进行配置。

要配置CSS模块，你需要使用css.lightningcss.cssModules 来替代css.modules（后者用于配置PostCSS如何处理CSS模块）。

默认情况下，Vite使用esbuild来压缩CSS。 Lightning CSS也可以通过build.cssMinify: 'lightningcss' 作为CSS压缩器。

什么是Lightning CSS

Lightning CSS简单理解就是Rust版本的PostCSS,然后 Lightning CSS内置了一些功能，比如 CSS压缩，语法降级，语法支持前缀，CSS模块化功能

入门Lightning CSS

使用Node

首先，使用npm或Yarn等包管理器安装Lightning CSS

npm install --save-dev lightningcss

安装完成后，导入模块并调用Lightning CSS的API之一。transform函数将从Node Buffer编译CSS样式表。以下示例将输入的CSS进行压缩，并输出编译后的代码和源映射。

import {transform,browserslistToTargets} from "lightningcss"
import browserslist from 'browserslist';
let targets = browserslistToTargets(browserslist('>= 0.25%'));
let { code, map } = transform({
  filename: 'style.scss',
  code: Buffer.from('.foo {color: oklab(59.686% 0.1009 0.1192);;font-size:12px;margin-left:20px; }'),
  sourceMap: true,
  targets
});
console.log(code.toString())

输出：

.foo {
  color: #c65d07;
  color: lab(52.2319% 40.1449 59.9171);
  margin-left: 20px;
  font-size: 12px;
}

color: #c65d07;
  color: lab(52.2319% 40.1449 59.9171);
  margin-left: 20px;
  font-size: 12px;
}

• 语法降级、为浏览器目标添加CSS前缀等信息
  
• 使用bundle API处理@import规则并将其内联
  

使用Rust

Lightning CSS也可以作为Rust库来解析、转换和压缩CSS。有关Rust API文档，请参阅docs.rs。

使用Parcel

Parcel将Lightning CSS作为默认的CSS转换器。在package.json中添加一个browserslist属性，用于定义要编译CSS的目标浏览器。

虽然Lightning CSS处理了最常用的PostCSS插件，如autoprefixer、postcss-preset-env和CSS模块，但仍然需要用于像TailwindCSS这样的更自定义插件的PostCSS。在这种情况下，你的PostCSS配置将被自动识别。你可以从PostCSS配置中删除上述列出的插件，它们将由Lightning CSS处理。

你还可以在项目根目录的package.json中配置Lightning CSS。目前支持三个选项：

• drafts，用于启用CSS嵌套和自定义媒体查询
  
• pseudoClasses，允许用普通类替换某些伪类（如:focus-visible），这些类可以通过JavaScript应用（例如polyfill）
  
• cssModules，用于全局启用CSS模块，而不仅限于以.module.css结尾的文件，或者接受一个选项对象。

{
  "@parcel/transformer-css": {
    "cssModules": true,
    "drafts": {
      "nesting": true,
      "customMedia": true
    },
    "pseudoClasses": {
      "focusVisible": "focus-ring"
    }
  }
}

使用Deno或浏览器

lightningcss-wasm包可以在Deno或直接在浏览器中使用。它使用Lightning CSS的WebAssembly构建。使用TextEncoder和TextDecoder将代码从字符串转换为类型化数组，然后再转换回来。

import init, { transform } from 'https://unpkg.com/lightningcss-wasm?module';
await init();
let {code, map} = transform({
  filename: 'style.css',
  code: new TextEncoder().encode('.foo { color: red }'),
  minify: true,
});
console.log(new TextDecoder().decode(code));

请注意，WASM构建中目前不支持bundle和visitor API。

使用webpack

css-minimizer-webpack-plugin已经内置了对Lightning CSS的支持。要使用它，请使用npm或Yarn等包管理器在项目中安装Lightning CSS：

npm install --save-dev lightningcss css-minimizer-webpack-plugin browserslist

然后，配置css-minimizer-webpack-plugin以使用Lightning CSS作为压缩器。你可以使用minimizerOptions对象提供选项。有关详细信息，请参阅Transpilation。

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const lightningcss = require('lightningcss');
const browserslist = require('browserslist');
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.lightningCssMinify,
        minimizerOptions: {
          targets: lightningcss.browserslistToTargets(browserslist('>= 0.25%'))
        },
      }),
    ],
  },
};

使用Vite

vite-plugin-lightningcss为在Vite中使用Lightning CSS提供支持。

首先，通过包管理器（如npm）将其安装到项目中

npm install --save-dev vite-plugin-lightningcss

然后，在Vite配置中添加它。你可以向lightningcss插件传递选项，包括browserslist配置和Transpilation中记录的其他选项。

// vite.config.ts
import lightningcss from 'vite-plugin-lightningcss';
export default {
  plugins: [
    lightningcss({
      browserslist: '>= 0.25%',
    }),
  ],
};

即使使用此插件，Vite在处理和压缩CSS时仍然会内部使用PostCSS和esbuild，但它仍然是一个很好的替代方案，可以替代autoprefixer和postcss-preset-env等PostCSS插件。

使用CLI

Lightning CSS包含一个独立的CLI，用于编译、压缩和打包CSS文件。当你只需要编译CSS，而不需要来自更大的构建工具（如代码分割和对其他语言的支持）的更高级功能时，可以使用CLI。

要使用CLI，应该用npm兼容的包管理器安装lightningcss-cli包：

npm install --save-dev lightningcss-cli

然后，你可以通过npx、yarn或在package.json中设置一个脚本来运行lightningcss命令。

{
  "scripts": {
    "build": "lightningcss --minify --bundle --targets '>= 0.25%' input.css -o output.css"
  }
}

查看所有可用选项，请使用--help参数：

npx lightningcss --helplightningcss

错误恢复

默认情况下，Lightning CSS是严格的，当解析无效的规则或声明时会报错。然而，有时你可能会遇到无法轻松修改的第三方库，其中包含意外包含无效语法或针对IE的hack。在这些情况下，你可以启用errorRecovery选项（或--error-recovery CLI标志）。这将跳过无效的规则和声明，在输出中省略它们，并产生警告而不是错误。

source maps

Lightning CSS支持在编译、压缩和打包源代码时生成源映射，以便更容易进行调试。使用sourceMap选项在使用API时启用它，或者使用--sourcemapCLI标志。

如果输入的CSS来自其他编译器（如Sass或Less），你还可以使用inputSourceMap API选项将输入源映射传递给Lightning CSS。这将把编译后的位置映射回原始源代码中的位置。

最后，projectRoot选项可用于使源映射中的文件路径相对于根目录。这样可以在不同的机器上保持构建的稳定性。