Programming and Software Development

How GitHub Improved Its Site’s Performance by Abandoning CSS-in-JS

GitHub completed the migration of its site to CSS Modules instead of CSS-in-JS, reducing server-side rendering time by 55% and component initialization time by 25%. The experience shows how feature flags, visual testing, and automation helped carry out a broad rebuild without breaking the site.

2026-09-25
4 min read
20 views
certi.news Editorial Team
How GitHub Improved Its Site’s Performance by Abandoning CSS-in-JS

In June 2026, GitHub completed the rollout of its site running entirely on CSS Modules, ending its reliance on CSS-in-JS, including styled-components, styled-system, and sx properties. The company says the transition reduced server-side rendering time by 55% and cut the time required to initialize components on the page by 25%.

The move came in response to the growth in the number of components on some GitHub pages since 2023. The previous solution required style initialization on the client, increased the cost of collecting styles during server-side rendering, and made formatting updates more difficult as the number of components on a page grew.

Why Did GitHub Choose CSS Modules?

CSS Modules allow styles to be written in CSS files located alongside the component’s source, while making class names local by default to reduce collisions. Most importantly in this case, they eliminate the need for runtime behavior on the client or server, since the styles are compiled into CSS files sent with the page’s HTML.

The migration began with the Primer design system. The team added CSS Modules files for each component, connected the components to feature flags that enabled switching between the old and new approaches, and then used visual regression tests to verify that the results matched. The rollout was subsequently expanded gradually from the Primer team to GitHub employees and then to all users.

By December 2024, all Primer components had migrated to CSS Modules. But that was not enough, because large parts of GitHub’s codebase were still using the sx property to customize components through inline objects. Although this approach provided good integration with TypeScript and design tokens, its dynamic nature increased runtime costs and made scaling more difficult as the number of components grew.

Managing the Transition at Scale

To avoid breaking existing use cases, GitHub created an intermediate library called @primer/styled-react. This library allowed sx to continue being used with components that had migrated to CSS Modules, while routes that did not need sx could import directly from @primer/react.

The removal of sx began in April 2025, when there were approximately 7,760 uses of the property. With the help of an internal VS Code extension and a codemod tool, a group of eight engineers migrated 6,419 uses over six months, with server-side rendering time improvements ranging from 1% to 22% on some pages. In April 2026, the number fell from 895 to zero within three weeks, with the participation of two engineers and the use of coding agents in GitHub Copilot.

Visual themes remained an additional challenge, as GitHub supports seven themes, each with a high-contrast mode, and parts of this system were tied to styled-components. The team therefore also migrated JavaScript uses and theme utilities, while keeping color variables defined in CSS.

What Does the Experience Mean for Developers?

GitHub’s figures show that eliminating runtime styling logic can deliver tangible gains when user interfaces grow substantially. But the most important value in the experience is not the choice of CSS Modules itself, but the implementation method: phased compatibility, feature flags, visual testing, gradual rollout, and reviewable automation.

At the same time, the process shows that moving away from CSS-in-JS is not limited to replacing the syntax used to write styles. It required removing sx properties, decoupling themes from styled-components, and maintaining component compatibility over a long period. The results therefore do not prove that every project will achieve the same gains; they are tied to GitHub’s size, its component architecture, and how it uses dynamic styling.

News source
c
Author

certi.news Editorial Team

In the same category

You may also like

View all news