你的下个项目能不能用上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 万行代码。

转换、打包速度比碾压 PostCSSesbuild 还要快,打包格式更加紧凑,使用 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

bash 复制代码
npm add -D lightningcss

在 vite.config.ts 中进行配置

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

js 复制代码
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,透明度设置就会失效。

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

总结

引入新的技术总是有风险的,现阶段 ViteUnoCSSLightning 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...

相关推荐
还是鼠鼠1 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
还是鼠鼠4 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味4 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj5 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠6 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象6 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录6 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX6 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing6 小时前
react redux监测值的变化
前端·javascript·react.js
engchina7 小时前
CSS 样式化表格:从基础到高级技巧
前端·css