GitHub 採用 CSS Modules 重構 Primer 系統並完成技術債清理
為何重要
GitHub 成功將一個龐大且繁重的 CSS-in-JS 技術債清理出來，並量化了 50% 以上的效能提升顯著回饋在營運層面。更特別的是，後期的剩餘任務利用 AI 工具極大加速了流程，這展示了大語言模型在複雜程式碼庫維護（如轉換函式引數、遷移類別名稱）中的實際生產力價值，成為開發者生態系的重要工具標竿。
為瞭解決前端元件數量激增導致的效能挑戰，GitHub 的 Primer 設計系統已於 2024 年完成從 CSS-in-JS 全遷移至 CSS Modules，並在後續處理了殘留的 sx prop 以全面移除對 styled-components 的依賴，同時分享了利用 FS (Feature Flags) 和視覺回歸測試來確保遷移安全性的實務經驗。
- 遷移至 CSS Modules 後，頁面伺服器端渲染（SSR）時間減少 55%，元件初始化速度提升 25%。
- 對於約 7,760 個
sxprop 的轉換工作，GitHub 在 2025 年 5 月完成，並透過引入 AI 工具協助，將 2026 年 4 月剩餘的 895 個 prop 銷毀至零，完成了整體重構。 - 遷移策略包含實施漸進式發布，透過「@primer/styled-react」包作為橋樑，在維持既存功能穩定的前提下逐漸匯入新樣式引擎。