关于前端:你下个Vite项目能不能用上Lightning-CSS

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

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 https://github.com/servo/servo/tree/master/components/selectors

cssselectors https://github.com/servo/servo/tree/master/components/selectors

vite lightning https://cn.vitejs.dev/guide/features#lightning-css

Tailwind Oxide Engine https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023…