你的下个项目能不能用上Lightning CSS

Vite 自从 4.4 版本开始实验性支持 Lightning CSS，可以让项目的 CSS 打包速度更快，构建体积更小，我们来一起看看在 Vite 中怎么配置使用 Lightning CSS 吧。

什么是 Lightning CSS

引用官方的介绍：

An extremely fast CSS parser, transformer, bundler, and minifier. 一个非常快的CSS解析器、转换器、打包器和压缩工具。号称：Lightning CSS 比基于 JavaScript 的同类工具快 100 倍以上。它可以在单个线程上每秒压缩超过 270 万行代码。

转换、打包速度比碾压 PostCSS 的 esbuild 还要快，打包格式更加紧凑，使用 rust 编写，性能优异。使用由 Mozilla 创建并由 Firefox 使用的 cssparser(CSS解析器) 和 selectors(CSS选择器) 。这些提供了坚实的 CSS 解析基础，在此基础上 Lightning CSS 实现了对所有特定 CSS 规则和属性的支持，背靠 Mozilla 贴近标准。可以了解到 Lightning CSS 的优势比起传统的 PostCSS 可大太多了，既然这个工具这么优秀，该怎么实际应用呢？

在 Vite（4.4+） 中使用 Lightning CSS

根据 Vite 的文档描述，从 4.4 开始就已经开始实验性 支持使用 Lightning CSS 处理项目中 CSS 的转换和压缩。

安装 Lightning CSS

npm add -D lightningcss

在 vite.config.ts 中进行配置

将以下两个配置加入到你项目的 vite.config.ts 中:

export default defineConfig({
  css: {
    // 转换CSS交给lightningcss
    transformer: 'lightningcss',
    lightningcss: {
      // 关于lightningcss的配置添加在这里
    }
  },
  build: {
    // 构建CSS交给lightningcss
    cssMinify: 'lightningcss',
  }
}

恭喜你，现在就可以使用 Lightning CSS 处理项目中 CSS 的转换和压缩了🎉🎉🎉。等一下，有问题！这一番操作之后是不是发现页面有些样式已经有问题了？😜

使用 Lightning CSS 的一些限制

Lightning CSS 不能和 CSS 预处理器一起工作。

这就意味着如果你需要在项目中使用 scss, sass, less, stylus 这种 CSS 预处理器，就无法在项目中使用Lightning CSS。

如果你使用了 UnoCSS 并且使用了 @apply这类 指令，需要使用--at-apply: 替换 @apply

@apply 会借助于 PostCSS 来处理 CSS 的转换，无法被 Lightning CSS 正确处理，另外当在 --at-apply: 中使用像 bg-red/10 这类原子类的时候需要使用单引号包裹属性，--at-apply: 'bg-red/10'; 否则会被 Lightning CSS 解析为 bg-red / 10，透明度设置就会失效。

以上是个人在实际应用中碰到的一些问题（毕竟是实验性支持），各位在实践过程中如果有别的问题也可以在评论区讨论下👏。

总结

引入新的技术总是有风险的，现阶段 Vite 和 UnoCSS 对 Lightning CSS 的支持还不够稳定，可以持观望态度，谨慎引入现有项目，没有稳定之前万万不可应用到生产 。但是也不可因噎废食，毕竟连 TailwindCSS 也看中了 Lightning CSS 的性能提升，计划未来的演变方向要让自家的引擎 "氧化": Tailwind Oxide Engine 使用 Lightning CSS 来替换原本的 PostCSS 转换方案。最后，有用请点赞，喜欢请关注，我是Senar，我们下一篇再见～

参考链接：

cssparser github.com/servo/servo...
cssselectors github.com/servo/servo...
vite lightning cn.vitejs.dev/guide/featu...
Tailwind Oxide Engine tailwindcss.com/blog/2023-0...