你下個Vite專案能不能用上Lightning CSS

發表於2024-03-02
ViteLightning 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...

相關文章