GitHub 用功能旗標、相容層，以及針對尾端工作的 AI 代理，終結了自家的 CSS-in-JS 執行階段

到了 2023 年，某些 GitHub 頁面上的元件數量暴增，既有的 CSS-in-JS 方案也因此付出代價：樣式在用戶端初始化，拖慢了初始頁面載入；樣式收集轉移到伺服器端，使伺服器端渲染品質下降；樣式更新也逐漸失控。Primer 團隊決定從根源解決問題，並訂下一條硬性限制：遷移期間絕不能弄壞 GitHub。

答案是 CSS Modules：原生 CSS 檔與各元件放在同一目錄，完全沒有用戶端或伺服器端執行階段。由於格式截然不同，團隊採逐個元件遷移：加入翻譯後的樣式表，把元件置於切換新舊樣式的功能旗標之後，用視覺回歸快照驗證像素完全一致，然後依序向團隊、向全體員工、最後向所有人推出旗標。到了 2024 年 12 月，每個 Primer 元件都完成遷移，頁面伺服器端渲染快了 55%，元件初始化快了 25%。

更難的一半是 GitHub 自家的程式碼庫：sx prop 多年來一直是樣式標準，數千個實例阻礙了改用無執行階段的 @primer/react。團隊打造了 @primer/styled-react，這是一個過渡包裝套件，讓使用 sx 的程式碼透過它匯入相同元件，而其他程式碼則匯入快速路徑。

接著轉換工作逐套件進行：2025 年 4 月高峰時約有 7,760 個 sx prop 待遷移，一個 VS Code 外掛和一個內部 codemod 完成了大部分工作，8 名工程師在六個月內搬移了 6,419 個 prop，各頁面的 SSR 增益介於 1% 到 22%。2026 年 4 月，兩名工程師搭配 Copilot 程式設計代理，在三週內把剩下的 895 個降到零；到了 2026 年 6 月，GitHub 已 100% 跑在 CSS Modules 上，sx、styled-components 和 styled-system 全都消失。

在功能旗標後方遷移，並搭配視覺回歸快照；過渡包裝套件讓既有的 sx 使用方繼續運作，同時新的匯入取得速度優勢。

CSS-in-JS 的執行階段成本會隨頁面複雜度增加，因此解法必須移除執行階段本身，而不是對它調校。

功能旗標加上視覺回歸快照，讓每個遷移步驟都可逆且像素一致，這正是設計系統團隊得以改動其他團隊所依賴元件的原因。

@primer/styled-react 包裝套件把兩項遷移解耦：元件內部可以現代化，而數千個 sx 呼叫點則原封不動，直到輪到它們。

Codemod、專用的 VS Code 外掛，最後是 Copilot 程式設計代理，把 7,760 個 prop 的苦工變成大多自動化的工作，並由兩個人完成。

設計系統是推動全平台變更最省力的載體：修好元件，產品自然跟上——有了旗標和快照測試，即使是多年的遷移也絕不會弄壞正式環境。

GitHub 自 2026 年 6 月起完全跑在 CSS Modules 上。為遷移建立的防護措施——旗標、快照、分階段推出——承載了四年的架構變更，期間正式環境零故障，而同一套做法如今也支撐著 Primer 平台未來的各項工作。