Melhorando o desempenho do site ao enviar mais CSS

O GitHub concluiu a migração do github.com de CSS-in-JS para CSS Modules em junho de 2026. A mudança começou no sistema de design Primer, que fornece componentes como botões, banners e breadcrumbs usados pela plataforma, e terminou com a remoção de sx, styled-components e styled-system do dotcom.

Por que a migração foi necessária

Em 2023, o número de componentes em algumas páginas cresceu rapidamente e expôs limitações da solução de CSS-in-JS usada pelo GitHub, incluindo custos de execução no cliente e no servidor. A equipe do Primer precisava de uma alternativa que preservasse acessibilidade, flexibilidade e desempenho sem interromper o funcionamento da plataforma durante a transição.

A solução escolhida foi CSS Modules:

• Os estilos passaram a ser escritos em arquivos CSS ao lado do código JavaScript dos componentes.
• Os nomes de classe ficaram locais por padrão, reduzindo colisões causadas por seletores globais.
• O CSS deixou de depender de comportamento em tempo de execução no cliente ou no servidor.
• As regras passaram a ser agrupadas em folhas de estilo enviadas junto com o HTML da página.
• A abordagem manteve parte da colocalização e do encapsulamento desejados pela equipe no CSS-in-JS, mas usando recursos nativos de CSS.

A mudança exigia atualizar todos os componentes do Primer e todos os componentes do GitHub que usavam a técnica anterior. Para reduzir o risco, a equipe adotou uma migração incremental: cada componente era convertido, protegido por feature flag, testado em produção e liberado gradualmente. Durante o período de transição, componentes compatíveis com sx eram disponibilizados por meio da biblioteca intermediária @primer/styled-react; os componentes já migrados e sem esse uso podiam ser importados diretamente de @primer/react.

Resultados no Primer e no código do GitHub

Todos os componentes do Primer haviam sido migrados para CSS Modules até dezembro de 2024. Os resultados de desempenho levaram a equipe a aplicar a mesma estratégia ao restante do GitHub e a planejar a remoção completa do CSS-in-JS.

O principal obstáculo era o sx, propriedade usada durante anos como padrão de estilização no GitHub. Ela permitia que as equipes personalizassem componentes com objetos inline, mas também mantinha dependências e custos de execução associados ao CSS-in-JS. O código-base tinha milhares de ocorrências de sx.

A migração começou em abril de 2025, com aproximadamente 7.760 sxprops. Ian Sanders criou um plugin para VS Code que ajudava na conversão de propriedades individuais, e a equipe também desenvolveu um codemod interno para migrar arquivos inteiros. O processo foi majoritariamente automatizado, mas exigiu revisão manual e validação cuidadosa.

Uma rotação de 8 engenheiros migrou 6.419 props em 6 meses. Em algumas páginas, o tempo de renderização no servidor melhorou entre 1% e 22%.

Quando o trabalho foi retomado em abril de 2026, restavam 895 sxprops. Uma equipe de 2 engenheiros, apoiada intensivamente pelos agentes de programação do GitHub Copilot, reduziu esse número a zero em 3 semanas.

Remoção das dependências de estilo

Eliminar os sxprops não encerrou imediatamente a migração. O GitHub oferece 7 temas, cada um com uma variação de alto contraste, e parte desse sistema ainda dependia de styled-components.

As variáveis de tema já eram definidas em CSS pelo pacote @primer/css, e o suporte a temas sem styled-components havia sido planejado durante a migração do @primer/react no fim de 2025. Restava remover o uso de JavaScript e os utilitários fornecidos pela dependência. A equipe repetiu o processo de migração gradual, com feature flags e liberação controlada. Após dois meses e alguns ajustes, a remoção das dependências foi liberada.

Desfecho e impacto técnico

Desde junho de 2026, o GitHub roda com 100% de CSS Modules. A plataforma removeu do dotcom:

• sx;
• styled-components;
• styled-system.

A estratégia de feature flags, testes em produção e rollout gradual permitiu fazer uma mudança arquitetural ampla sem quebrar o GitHub. O trabalho não foi apenas uma troca de formato de CSS: foi uma reestruturação progressiva de como a plataforma estiliza componentes, implementa temas e entrega a interface em escala. Além da remoção das dependências, o GitHub registrou ganhos de desempenho, especialmente no tempo de renderização no servidor.