| 点击在线阅读，体验更好 | 链接 |
|---|---|
| 现代JavaScript高级小册 | 链接 |
| 深入浅出Dart | 链接 |
| 现代TypeScript高级小册 | 链接 |
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
[图片上传失败...(image-90a984-1688738894537)]
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;
}
使用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"
}
}
}
参阅Parcel文档。
使用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选项可用于使源映射中的文件路径相对于根目录。这样可以在不同的机器上保持构建的稳定性。
