Improving site performance by shipping more CSS
GitHub migrated its Primer design system from CSS-in-JS to CSS Modules to reduce client-side style initialization costs. The engineering team reports that this shift eliminated runtime overhead and improved server-side rendering performance. The change required updating every component to use native CSS files, ensuring styles are sent with HTML rather than processed dynamically in the browser.
In 2023 the Primer design system on GitHub began to swell as more components were added to pages, exposing the limits of its CSS‑in‑JS implementation. The engineering team swapped that approach for native CSS Modules, rewriting each component so its styles are compiled into static sheets delivered with the HTML. Feature flags let the new modules be toggled on gradually, and by December 2024 every Primer component had been converted. The migration removed the runtime work that previously initialized styles in the browser and on the server, yielding a 55 % reduction in server‑side rendering time and a 25 % cut in component‑initialization latency. Because the styles are now part of the initial response, pages load faster and the risk of style‑collision errors drops. The improvement demonstrates that a systematic, incremental rollout can deliver measurable performance gains without breaking existing functionality. It remains uncertain whether the same gains can be replicated across the broader GitHub codebase, where thousands of sx props still depend on the old CSS‑in‑JS pattern. The team has not yet determined how long it will take to retire styled‑components entirely or what trade‑offs might appear when extending the migration beyond Primer. Further testing will be needed to confirm the scalability of the approach.