GitHub killed its CSS-in-JS runtime with flags, shims — and AI agents for the tail

By 2023 the number of components on some GitHub pages was exploding, and the existing CSS-in-JS solution was paying for it: initial page loads slowed as styles initialized on the client, server-side rendering degraded as style collection shifted to the server, and style updates grew out of control. The Primer team decided to fix the problem at the source with a hard constraint: nothing could break GitHub during the migration.

The answer was CSS Modules: native CSS files colocated with each component, no client or server runtime at all. Since the format was radically different, the team migrated component by component: add a translated stylesheet, put the component behind a flag toggling old and new styles, verify with visual-regression snapshots that the pixels were identical, then roll the flag out to the team, to staff, and finally to everyone. By December 2024 every Primer component was migrated, with pages server-side rendering 55% faster and components initializing 25% faster.

The harder half was GitHub's own codebase, where the sx prop had been the styling standard for years — thousands of instances blocking the switch to runtime-free @primer/react. The team built @primer/styled-react, a transitive wrapper package that lets sx-using code import the same components through it while everyone else imports the fast path.

Conversion then ran package by package: at an April 2025 peak of about 7,760 sx props to migrate, a VS Code plugin and an internal codemod did most of the work, and 8 engineers moved 6,419 props in six months with SSR gains of 1% to 22% per page. In April 2026 two engineers with Copilot coding agents took the remaining 895 to zero in three weeks; by June 2026 GitHub ran on 100% CSS Modules, with sx, styled-components and styled-system all gone.

Migrate behind feature flags with visual-regression snapshots; a transitive wrapper package keeps legacy sx consumers working while new imports get the speed.

The runtime cost of CSS-in-JS scaled with page complexity, so the fix had to remove the runtime itself rather than tune it.

Feature flags plus visual-regression snapshots made every migration step reversible and pixel-identical, which is what let a design-system team change components other teams depended on.

The @primer/styled-react wrapper decoupled the two migrations: component internals could modernize while thousands of sx call sites stayed untouched until their turn.

Codemods, a dedicated VS Code plugin and finally Copilot coding agents turned a 7,760-prop slog into mostly automated work finished by two people.

Design systems are the cheapest vehicle for platform-wide change: fix the components and the product follows — with flags and snapshot tests, even a multi-year migration never breaks production.

GitHub has been running entirely on CSS Modules since June 2026. The safeguards built for the migration — flags, snapshots, staged rollouts — carried four years of architectural change with no production breakage, and the same playbook now backs future Primer platform work.