GitHub relata ganho de performance migrando de CSS-in-JS a CSS Modules

O problema de performance com CSS-in-JS

O sistema de design Primer, que sustenta grande parte da interface do GitHub, começou a enfrentar problemas de performance a partir de 2023, quando o número de componentes por página cresceu de forma explosiva. A solução CSS-in-JS então usada gerava três custos: carregamentos iniciais mais lentos porque os estilos eram inicializados no cliente, queda na performance de renderização no servidor e atualizações de estilos fora de controle conforme o número de componentes aumentava.

A escolha do CSS Modules

A equipe do Primer escolheu CSS Modules: estilos escritos em arquivos CSS junto ao código JavaScript dos componentes, com nomes de classe locais por padrão para evitar colisões de seletores globais. A principal vantagem é que a abordagem elimina qualquer comportamento de runtime no cliente ou no servidor - os estilos são agrupados em folhas de estilo enviadas junto com o HTML da página. Como a mudança era radicalmente diferente da solução anterior e exigia atualizar todos os componentes do Primer e do GitHub, o time apostou no design system como veículo para entregar a mudança em escala.

Migração incremental do Primer

A estratégia foi incremental: para cada componente, o time criava um novo arquivo traduzindo os estilos para CSS Modules, adicionava o componente a uma feature flag que alternava entre estilos antigos e novos, validava com testes de regressão visual que os snapshots eram idênticos e liberava a flag gradualmente - primeiro para o time, depois para funcionários do GitHub e, por fim, para todos os usuários. Em dezembro de 2024, todos os componentes do Primer estavam migrados, com ganhos de 55% menos tempo para renderizar uma página no servidor e 25% menos tempo de inicialização dos componentes.

Milhares de props sx para migrar

Remover o CSS-in-JS do GitHub como um todo exigia eliminar a prop sx, que era o mecanismo padrão de estilização: oferecia excelente suporte de TypeScript integrado aos Design Tokens e colocação junto ao componente, mas tinha alto custo de runtime pela natureza dinâmica dos objetos inline e não escalava quando muitos componentes usavam sx na mesma página.

Como o restante da base de código ainda dependia de styled-components, o time criou o pacote transicional @primer/styled-react, que permitia continuar usando sx nos componentes já migrados. A fase "Styled Box Zero", iniciada em abril de 2025 com um pico de cerca de 7.760 props sx, combinou um plugin de VS Code criado pelo desenvolvedor Ian Sanders e um codemod interno para automação. Uma rotatividade de 8 engenheiros migrou 6.419 props em 6 meses, com ganhos de tempo de renderização no servidor entre 1% e 22% em algumas páginas. Quando o trabalho foi retomado em abril de 2026, dois engenheiros reduziram de 895 para 0 as props restantes em três semanas, auxiliados por Copilot coding agents. O anúncio do modo de manutenção de styled-components, durante o esforço, reforçou a direção tomada.

Desacoplamento dos temas

Completada a migração de sx, restava remover a dependência de styled-components dos sete temas do GitHub (todos com variação de alto contraste), que eram habilitados por essa biblioteca. Como as variáveis de tema já eram definidas em CSS via @primer/css, bastou remover os usos e utilitários de JavaScript, novamente com migrações, feature flags e liberação gradual. Dois meses depois, a remoção da dependência foi liberada - também atrás de uma feature flag.

Resultado final

Desde junho de 2026, o GitHub roda 100% em CSS Modules. O time removeu sx, styled-components e styled-system do dotcom sem quebrar o produto ao longo do caminho. Segundo os autores, o que parecia uma migração de CSS revelou-se um replataformamento gradual de como o GitHub estiliza, tematiza e entrega interface em escala, com feature flags servindo de salvaguarda para testar em produção, detectar erros e corrigir com eficiência.