3萬行代碼重寫CSS引擎，OCaml團隊把Node.js踢出了構

2024年，一個法國開發團隊為了擺脫Node.js依賴，用OCaml寫了一套完整的CSS工具鏈。最終產物Cascade有3萬行代碼，能解析、生成、優化、對比現代CSS——包括Tailwind v4才支持的@layer和容器查詢。這相當于用一門40歲的函數式語言，造了一把前端工程化的瑞士軍刀。

事情的起因很具體：Thomas Gazagnaire想給自己的網站換皮膚，卻發現整個構建流程被Node.js綁架了。

他是MirageOS核心開發者，網站用OCaml寫的，樣式用Tailwind CSS。每次改樣式都要啟動Node生態，這讓他不舒服。「我想讓Markdown到樣式化HTML再到CSS，全是單個dune構建，零Node依賴?！顾诓┛椭袑懙馈?/p>

移植Tailwind的CSS生成邏輯到OCaml，需要驗證輸出是否正確。但現成的CSS對比工具要么 abandoned（被遺棄），要么只支持CSS 2/3，對@layer、容器查詢、嵌套規則和現代色彩空間全部抓瞎。

于是他開始寫一個diff工具。這需要解析器。解析器需要類型化的AST。AST需要優化器。三個月后，Cascade誕生了。

從字符串到AST：一次編譯期保險

Cascade的核心設計是把CSS變成強類型的OCaml數據。解析器用手寫遞歸下降實現，覆蓋CSS Syntax Level 3到Level 5。輸入一段帶重復規則的CSS：

`.btn`出現了兩次，這在生成式CSS里很常見——不同模塊各自輸出自己的樣式，最后拼在一起。

Cascade的解析器保留兩個規則，返回類型化的AST。如果你用OCaml的eDSL直接構造規則，拼寫錯誤如`dsiplay`會在編譯期報錯，把顏色傳給`padding`也是類型錯誤。這是動態CSS預處理器做不到的事。

生成階段，AST可以渲染為格式化或壓縮的CSS。打印器會自動優化：white變成#fff。優化階段更激進：合并重復的`.btn`規則，按層疊順序保留最后的`background-color`，同時尊重`!important`和故意留下的內容回退模式。

cssdiff：結構級對比，不是文本diff

Cascade附帶的cssdiff工具解決了一個真實痛點：驗證移植后的CSS生成器是否與原版行為一致。

文本diff對CSS沒用。兩個文件可能寫法不同但語義相同——屬性順序調換、簡寫展開、十六進制大小寫差異。cssdiff做結構級比較，理解選擇器優先級、層疊規則和繼承。

因為它是純OCaml，可以通過js_of_ocaml編譯到瀏覽器運行。Gazagnaire在博客里放了在線演示，可以上傳兩份CSS看差異，或選預設樣例。

為什么選OCaml？不是炫技，是生態位

OCaml社區有個特點：同一批人反復重寫自己的基礎設施。Gazagnaire的博客就經歷過ocaml-cow、Canopy、自定義MirageOS unikernel多次迭代。這次輪到CSS工具鏈。

這種「重復造輪子」在工業界是浪費，在函數式語言社區是特征。每輪重寫都利用類型系統的新能力，把運行時錯誤變成編譯期錯誤。Cascade的eDSL讓CSS構造具備OCaml的類型檢查，相當于給樣式層加了靜態分析。

對目標用戶——25-40歲的科技從業者——這個案例的價值在于：它展示了如何把「逃離Node.js依賴」這個具體痛點，拆解成可驗證的技術步驟。不是喊口號，是寫3萬行代碼，覆蓋CSS標準的邊緣情況，再配一個瀏覽器可運行的diff工具。

項目已開源。Gazagnaire在博客結尾說，Cascade現在對他夠用了，但歡迎貢獻。如果你也在維護一個想擺脫Node.js的OCaml項目，或者只是好奇強類型CSS長什么樣，可以去試那個在線demo。

最后一個細節：演示頁面的示例選擇器里，有一項叫「Tailwind v4 output」。這說明他們已經在用這套工具追蹤最前沿的CSS生成器行為——不是追過去，是追正在發生的事。