Lightning CSS：100x 更快的 CSS 編譯器

如果你的專案每次儲存 CSS 檔案後，需要等待好幾秒才能看到瀏覽器自動重新整理（hot reload）的結果——這個延遲很可能不是 JavaScript 的問題，而是你的 CSS 編譯器。PostCSS 是過去五年大多數前端專案默認的 CSS 處理工具，但它的效能瓶頸在大型專案裡越來越明顯。Lightning CSS——原名 Parcel CSS——是一個 Rust 開發的 CSS parser、transformer 和 minifier，號稱比 PostCSS 快 100 倍。Next.js 已經選擇它作為 CSS 編譯器，這個選擇代表了一個明確的方向。

---

為什麼 CSS 編譯速度重要

開發體驗的瓶頸

CSS 處理的常見流程：

# 你儲存 .scss 或 .css 檔案
# PostCSS 處理（ Autoprefixer、 nesting、 minification）
# 瀏覽器收到更新

# 小型專案：100-200ms
# 中型專案：500ms-1s
# 大型專案：1-3s 或更長

這個等待時間會破壞「儲存即見」的開發體驗。當等待時間超過 1 秒，開發者就會不自覺地減少儲存的頻率。

Lightning CSS 的效能數據

工具	處理 100 個檔案	處理 1000 個檔案
PostCSS	850ms	8.5s
Lightning CSS	8ms	80ms
提升	106x	106x

這個差距在大型專案裡感受非常明顯。

---

Lightning CSS 的核心功能

Lightning CSS 是一個「all-in-one」的 CSS 處理工具：

Autoprefixing

// Lightning CSS 自動處理瀏覽器前綴
// 輸入
.button {
  display: flex;
  user-select: none;
}

// 輸出（根據 browserslist 配置）
.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

CSS Nesting

// Lightning CSS 支援原生 CSS Nesting
// 輸入
.card {
  padding: 16px;

  & .title {
    font-size: 1.5rem;
  }
}

// 輸出
.card { padding: 16px; }
.card .title { font-size: 1.5rem; }

Minification

// Lightning CSS 的 minification 比 cssnano 快很多
// 輸入
.article {
  color: #333333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ffffff;
}

// 輸出
.article{color:#333;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background-color:#fff}

聲明合併（Merging）

// Lightning CSS 會合並可以合併的聲明
// 輸入
.box {
  color: red;
  font-size: 16px;
  color: blue;
  font-size: 20px;
}

// 輸出
.box {
  color: blue;
  font-size: 20px;
}

---

與 PostCSS 的比較

生態系對比

維度	Lightning CSS	PostCSS
生態大小	小（單一工具）	大（數百個 plugins）
設定複雜度	低	高
效能	極快	中等
功能豐富度	有限	極高
學習曲線	低	中

PostCSS 的價值在於它的 plugin 生態系。如果你需要：

• Stylelint 的進階 linting
• postcss-preset-env 的未來語法
• 特定的前處理器整合

PostCSS 仍然是更好的選擇。

遷移到 Lightning CSS

如果你決定從 PostCSS 遷移到 Lightning CSS：

// postcss.config.js
// 過去
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-nesting': {},
    'autoprefixer': {},
    'cssnano': {},
  },
};

// lightningcss.config.js
// 現在
import { defineConfig } from 'lightningcss';

export default defineConfig({
  // Autoprefixing
  targets: ['> 0.5%', 'last 2 versions'],

  // 啟用 nidesting
  nesting: true,

  // Minification
  minify: true,

  // 聲明合併
  optimize: true,
});

---

Next.js 為什麼選擇 Lightning CSS

Next.js 從版本 14 開始使用 Lightning CSS 作為預設的 CSS 處理器：

// next.config.js
module.exports = {
  experimental: {
    // Next.js 14+ 預設使用 Lightning CSS
    lightningCss: true,
  },
};

這個選擇的意義

Next.js 選擇 Lightning CSS，代表了幾個明確的信號：

1. 效能優先：Next.js 的開發團隊認為 CSS 編譯速度是值得優化的
2. 簡化棧：減少一個需要維護的相依性
3. Rust 化趨勢：前端工具鏈正在向 Rust 轉移

對於 Next.js 使用者的影響

# 如果你本來就使用 PostCSS
# 升級到 Next.js 14+ 後，Lightning CSS 會自動處理 CSS

# 如果你使用 Sass/SCSS
# Next.js 仍然支援 sass/less-loader
# Lightning CSS 主要處理標準 CSS

---

Lightning CSS 的適用場景

適合使用 Lightning CSS 的專案

• 大型 Next.js 專案：享受 Lightning CSS 的效能優勢
• 追求極致建置速度的 Vite 專案：配合 Rolldown 使用
• 需要簡單 CSS 處理的專案：autoprefixing + nesting + minification 就足夠

不適合使用 Lightning CSS 的專案

• 需要豐富 PostCSS plugins 的專案：Stylelint、postcss-preset-env 等
• 需要特定前處理器整合的專案：Sass/Less 的完整功能
• 需要高度客製化處理的專案

---

Rust 化趨勢的象徵

Lightning CSS 是 2026 年前端工具鏈 Rust 化趨勢的一個例子：

工具	語言	速度提升
esbuild	Go	10-100x vs webpack
Rolldown	Rust	10-30x vs Rollup
Oxc	Rust	30x vs Babel
Lightning CSS	Rust	100x vs PostCSS
Biome	Rust	10-56x vs ESLint

這個趨勢的驅動因素很簡單：JavaScript 的執行速度有上限，Rust/Go 的執行速度遠超 JavaScript。

---

結語：選擇適合的工具

Lightning CSS 的價值主張很清晰：如果你只需要 Autoprefixing、Nesting 和 Minification，Lightning CSS 是一個極快的選擇。

但 PostCSS 不會消失。PostCSS 的 plugin 生態系是十多年累積的結果，不是 Lightning CSS 短期內能複製的。

對於 Next.js 14+ 的使用者，Lightning CSS 會自動接管你的 CSS 處理，不需要任何設定。對於其他框架的使用者，可以評估 Lightning CSS 是否能滿足你的需求——如果能的話，它能給你一個數量級的效能提升。

---

延伸閱讀

• Tailwind CSS 4.0 升級指南 — @theme CSS-first 配置
• Rollup 與 Rolldown — Rust 打造的 Bundler

本文是「2026 前端工具演進」系列文章之一。