Em junho de 2026, a GitHub concluiu a operação de seu site inteiramente com CSS Modules, encerrando sua dependência de CSS-in-JS, incluindo styled-components, styled-system e propriedades sx. A empresa afirma que essa mudança reduziu o tempo de renderização no servidor em 55% e também diminuiu em 25% o tempo necessário para inicializar os componentes na página.
A medida foi uma resposta ao aumento do número de componentes em algumas páginas da GitHub desde 2023. A solução anterior exigia a inicialização dos estilos no cliente, aumentava o custo de coleta dos estilos durante a renderização no servidor e tornava as atualizações de estilo mais difíceis à medida que o número de componentes na página crescia.
Por que a GitHub escolheu CSS Modules?
CSS Modules permite escrever os estilos em arquivos CSS próximos ao código-fonte do componente, fazendo com que os nomes das classes sejam locais por padrão para reduzir conflitos. Mais importante neste caso, a abordagem elimina a necessidade de comportamento em tempo de execução no cliente ou no servidor, pois os estilos são compilados em arquivos CSS enviados junto com o HTML da página.
O processo de migração começou pelo sistema de design Primer. A equipe adicionou arquivos CSS Modules para cada componente, vinculou os componentes a feature flags que permitiam alternar entre os estilos antigo e novo e, em seguida, usou testes de regressão visual para verificar a correspondência dos resultados. Depois, a expansão ocorreu gradualmente, da equipe do Primer para os funcionários da GitHub e, por fim, para todos os usuários.
Em dezembro de 2024, todos os componentes do Primer haviam migrado para CSS Modules. Mas isso não era suficiente, porque grandes partes da base de código da GitHub ainda usavam a propriedade sx para personalizar componentes por meio de objetos incorporados. Embora esse método oferecesse boa integração com TypeScript e tokens de design, sua natureza dinâmica aumentava o custo de execução e dificultava a expansão à medida que o número de componentes crescia.
Gerenciando a migração em larga escala
Para evitar quebrar os usos existentes, a GitHub criou uma biblioteca intermediária chamada @primer/styled-react. Essa biblioteca permitiu continuar usando sx com os componentes migrados para CSS Modules, enquanto os caminhos que não precisavam de sx podiam importar diretamente de @primer/react.
O processo de remoção do sx começou em abril de 2025, quando havia cerca de 7.760 usos dessa propriedade. Com a ajuda de uma extensão interna para o VS Code e de uma ferramenta codemod, um grupo de oito engenheiros migrou 6.419 usos ao longo de seis meses, com ganhos no tempo de renderização no servidor que variaram de 1% a 22% em algumas páginas. Em abril de 2026, o número caiu de 895 para zero em três semanas, com a participação de dois engenheiros e o uso de agentes de programação no GitHub Copilot.
Os temas visuais continuaram sendo um desafio adicional, pois a GitHub oferece suporte a sete temas, cada um com um modo de alto contraste, e partes desse sistema estavam vinculadas ao styled-components. Por isso, a equipe também migrou os usos de JavaScript e as ferramentas de temas, mantendo as variáveis de cor definidas no CSS.
O que a experiência significa para os desenvolvedores?
Os números da GitHub mostram que eliminar a lógica de estilos em tempo de execução pode proporcionar ganhos concretos quando as interfaces de usuário crescem. Mas o principal valor da experiência não está na escolha do CSS Modules em si, e sim na forma de execução: compatibilidade gradual, feature flags, testes visuais, lançamento progressivo e automação passível de revisão.
Por outro lado, o processo revela que migrar do CSS-in-JS não se limita a substituir a forma de escrever estilos. Foi necessário remover as propriedades sx, desvincular os temas do styled-components e manter a compatibilidade dos componentes durante um longo período. Portanto, os resultados não provam que todo projeto obterá os mesmos ganhos; eles estão relacionados ao tamanho da GitHub, à estrutura de seus componentes e à forma como utiliza estilos dinâmicos.