GitHub's CSS Modules Migration Yields Major Performance Gains
How shifting from CSS-in-JS to CSS Modules reduced rendering times by up to 55%
1CSS-in-JS scaling challenges
By 2023, GitHub's Primer Design System faced critical performance issues as page component counts grew exponentially. The CSS-in-JS approach caused slower initial page loads due to client-side style initialization and degraded server-side rendering performance. Style updates became increasingly difficult to manage as component density increased. The engineering team identified these growing pains as fundamental limitations of their runtime styling solution, necessitating architectural changes to maintain performance at scale.
2CSS Modules selection
The Primer team chose CSS Modules as their migration target because it offered native CSS authoring while maintaining component encapsulation. This approach eliminated client/server runtime costs by compiling styles into static CSS files delivered with HTML. CSS Modules provided local scoping by default, preventing global selector collisions. However, adoption required rewriting every Primer component and updating GitHub's codebase - a massive undertaking for a platform serving millions of developers daily.
3Incremental migration strategy
GitHub implemented a phased approach to minimize risk: each component was duplicated with CSS Modules while maintaining the original CSS-in-JS version. Feature flags toggled between implementations, allowing gradual rollout from internal teams to all users. Visual regression tests ensured pixel-perfect matching between old and new implementations. This created a feedback loop where issues could be caught early while continuously delivering performance improvements to production.
4Performance improvements achieved
By December 2024, all Primer components migrated to CSS Modules showed significant gains: 55% faster server-side rendering and 25% quicker component initialization. These metrics validated the architectural shift and prompted expansion beyond the design system. The success with Primer components demonstrated that static CSS compilation could handle GitHub's scale while dramatically improving rendering performance across the application.
5SX prop migration challenge
The sx prop represented GitHub's biggest CSS-in-JS legacy issue - thousands of inline style objects scattered throughout the codebase. While convenient for customization, these dynamic styles carried high runtime costs. The team created @primer/styled-react as a transitional wrapper, allowing gradual sx removal without breaking existing implementations. This temporary solution maintained backward compatibility while enabling performance improvements for updated components.
6Automated migration tools
From April 2025-May 2026, engineers migrated 7,760 sx instances using custom VS Code plugins and codemods. Initially requiring manual oversight, the process became increasingly automated. A rotation of 8 engineers moved 6,419 props in 6 months, achieving 1-22% SSR improvements. By April 2026, AI-assisted tools like Copilot enabled two engineers to eliminate the remaining 895 props in just three weeks.
7Theme system overhaul
After sx migration, GitHub still needed to replace styled-components theming supporting seven themes with high-contrast variants. The team decoupled theme variables from JavaScript, moving them to CSS through @primer/css. This final step required careful migration of theme utilities while maintaining visual consistency across all interface states, completing the platform's full transition to static CSS.
8Architectural impact
What began as a CSS optimization evolved into a fundamental replatforming of GitHub's UI architecture. By June 2026, the elimination of styled-components, sx props, and styled-system reduced runtime overhead while improving maintainability. The migration demonstrated how large-scale platforms can incrementally modernize critical systems without disrupting user experience, establishing patterns for future architectural evolutions.
9Lessons for large-scale migrations
GitHub's success highlights key strategies for complex frontend transitions: feature flags enable gradual rollout, automation accelerates repetitive tasks, and temporary compatibility layers reduce friction. Most importantly, measuring performance at each stage builds confidence in architectural changes. These patterns apply beyond CSS to any significant platform evolution requiring zero-downtime migration.
Original article: The GitHub Blog — GitHub's CSS Modules Migration Yields Major Performance Gains