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

左手的ㄟ右手 2023-10-13 13:07 81阅读 0赞

> [lightning css中文文档][lightning css]

### Vite 4.4实验性 ###

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

bash

npm add -D lightningcss

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

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

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

### 什么是Lightning CSS ###

![lightning-css.png][]

> 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 } from 'lightningcss';
    
    let {
         code, map } = transform({
        
      filename: 'style.css',
      code: Buffer.from('.foo { color: red }'),
      minify: true,
      sourceMap: true
    });

*  [语法降级、为浏览器目标添加CSS前缀等信息][CSS]
 *  [使用`bundle` API处理`@import`规则并将其内联][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.lightningcss.cssModules]，用于全局启用CSS模块，而不仅限于以`.module.css`结尾的文件，或者接受一个选项对象。

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

参阅[Parcel文档][Parcel 1]。

### 使用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][CSS]。

// 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][CSS]中记录的其他选项。

// 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时启用它，或者使用`--sourcemap`CLI标志。

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

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

[lightning css]: https://lightningcss.coding-time.cn
[Lightning CSS]: https://lightningcss.dev/
[css.transformer_ _lightningcss]: https://vitejs.dev/config/shared-options.html#css-transformer
[lightningcss]: https://www.npmjs.com/package/lightningcss
[css.lightningcss]: https://vitejs.dev/config/shared-options.html#css-lightningcss
[css.lightningcss.cssModules]: https://lightningcss.dev/css-modules.html
[css.modules]: https://vitejs.dev/config/shared-options.html#css-modules
[build.cssMinify_ _lightningcss]: https://vitejs.dev/config/build-options.html#css-minify
[lightning-css.png]: https://img-blog.csdnimg.cn/img_convert/7766fdc95b8d0029380df01a5cf7f3df.png
[Node Buffer]: https://nodejs.org/api/buffer.html
[CSS]: https://lightningcss.dev/transpilation.html
[bundle_ API_import]: https://lightningcss.dev/bundling.html
[docs.rs]: https://docs.rs/lightningcss
[Parcel]: https://parceljs.org/
[drafts]: https://lightningcss.dev/transpilation.html#draft-syntax
[pseudoClasses]: https://lightningcss.dev/transpilation.html#pseudo-class-replacement
[Parcel 1]: https://parceljs.org/languages/css
[css-minimizer-webpack-plugin]: https://webpack.js.org/plugins/css-minimizer-webpack-plugin/
[vite-plugin-lightningcss]: https://github.com/lawrencecchen/vite-plugin-lightningcss