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 的苦差事变成了主要由自动化完成的工作，最终由两个人完成。

设计系统是平台级变更最廉价的载体：修复组件，产品就会随之改变——借助功能开关和快照测试，即使是多年的迁移也从未破坏生产环境。

自 2026 年 6 月起，GitHub 已完全运行在 CSS Modules 上。为迁移构建的保障措施——功能开关、快照、分阶段推出——承载了四年的架构变更，没有发生生产环境故障，同样的方法现在支撑着未来的 Primer 平台工作。