美文网首页
你下个Vite项目能不能用上Lightning CSS

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

作者: Senar | 来源:发表于2024-03-01 20:36 被阅读0次

    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

    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,透明度设置就会失效。

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

    总结

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

    相关文章

      网友评论

          本文标题:你下个Vite项目能不能用上Lightning CSS

          本文链接:https://www.haomeiwen.com/subject/ouwczdtx.html