A busca por performance em aplicações web modernas é uma jornada contínua, e o GitHub compartilhou recentemente os detalhes de uma transformação arquitetural significativa em seu sistema de design, o Primer. Em um esforço que se estendeu por anos, a plataforma migrou de uma solução CSS-in-JS para CSS Modules, alcançando ganhos expressivos na velocidade de renderização e simplificando sua base de código.
O desafio surgiu em 2023, quando o número de componentes em certas páginas do GitHub começou a crescer exponencialmente. Essa expansão trouxe consigo desafios de performance relacionados à solução CSS-in-JS então utilizada. A inicialização de estilos no lado do cliente tornava os carregamentos de página mais lentos, a renderização do lado do servidor (SSR) perdia performance com a coleta de estilos sendo deslocada para o cliente, e as atualizações de estilo se tornavam caóticas com o aumento de componentes. A equipe do Primer percebeu a necessidade de uma alternativa que eliminasse os custos de runtime no cliente e servidor, sem introduzir instabilidade durante a transição.
O Caminho para os CSS Modules
A solução encontrada pela equipe foi a adoção dos CSS Modules. Este formato permitiu a escrita de CSS nativo, mantendo a colocalização e encapsulamento esperados do CSS-in-JS. Os estilos passaram a ser escritos em arquivos .css ao lado do código JavaScript do componente, tratando os nomes das classes como locais por padrão. Isso preveniu colisões e a necessidade de qualquer runtime, com os estilos sendo compilados em stylesheets CSS enviados com o HTML da página. A mudança, contudo, era radical, exigindo a atualização de todos os componentes do Primer e do GitHub que utilizavam a técnica anterior. Sistemas de design, por sua natureza, são veículos ideais para implementar tais mudanças em larga escala.
Uma Migração Incremental e Segura
A estratégia para a transição para CSS Modules foi cuidadosamente planejada para evitar quebras na experiência do usuário. Para cada componente, o processo envolvia adicionar um novo arquivo que traduzia os estilos existentes para CSS Modules, adicionar o componente a um feature flag para alternar entre os estilos antigo e novo, e utilizar testes de regressão visual para garantir a identidade dos snapshots. A liberação gradual, começando pela equipe interna, passando por funcionários do GitHub e, finalmente, para todos os usuários, permitiu um ciclo de feedback forte e a identificação precoce de problemas. Essa abordagem incremental, aliada ao uso de feature flags, assegurou a segurança da migração e forneceu sinais claros sobre os benefícios de performance dos CSS Modules. Até dezembro de 2024, todos os componentes do Primer foram migrados, resultando em uma redução de 55% no tempo de SSR e 25% menos tempo para inicialização de componentes.
Desafios na Remoção do CSS-in-JS
Um dos obstáculos mais significativos na remoção do CSS-in-JS foi a dependência do sx prop, uma forma de customizar componentes do Primer. Embora oferecesse excelente suporte a TypeScript e integração com Design Tokens, o sx prop gerava altos custos de runtime devido à natureza dinâmica dos objetos inline. A primeira etapa para abandonar o CSS-in-JS foi, portanto, reduzir o uso do sx prop em todo o GitHub. Para viabilizar essa transição sem interrupções, foi criado um pacote intermediário, @primer/styled-react, que atuava como um wrapper. Isso permitiu que partes do codebase que ainda dependiam do sx prop continuassem a importar os componentes através deste wrapper, enquanto as partes já migradas podiam importar diretamente do @primer/react, aproveitando os ganhos de performance. A fase seguinte envolveu a tradução do uso do sx prop em equivalentes de CSS Modules, pacote por pacote, utilizando ferramentas como um plugin VS Code e codemods internos. A manutenção do styled-components entrou em modo de manutenção, reforçando a decisão do GitHub. A migração, que começou em abril de 2025 com cerca de 7.760 sx props, está programada para ser concluída em maio de 2026. Com a ajuda de automação e engenheiros dedicados, já foram observados ganhos de performance em SSR de até 22% em algumas páginas.
A Batalha dos Temas e o Fim da Jornada
A conclusão da migração do sx prop parecia o fim da linha para as dependências de styled-components. No entanto, o GitHub suporta sete temas distintos, cada um com variações de alto contraste, todos habilitados por styled-components. A necessidade de desacoplar o theming tornou-se o próximo grande passo. Felizmente, as variáveis de tema já eram definidas em CSS através do pacote @primer/css, e planos para theming sem styled-components já estavam em andamento. O foco passou a ser a remoção do uso de JavaScript e utilitários associados ao styled-components. Seguindo o mesmo padrão de migração incremental, a expectativa é que essa etapa seja concluída em dois meses, permitindo que, em junho de 2026, o GitHub opere 100% com CSS Modules. As salvaguardas implementadas permitiram a introdução segura de mudanças arquiteturais significativas. A jornada culminará na remoção de sx, styled-components e styled-system do dotcom sem quebrar a plataforma. O que começou como uma migração de CSS transformou-se em uma re-plataformização gradual da forma como o GitHub estiliza, tema e entrega UI em escala, com melhorias notáveis na performance e experiência do usuário.
Com reportagem de Brazil Valley
Source · The GitHub Blog
