O GitHub eliminou seu runtime de CSS-in-JS com flags, shims — e agentes de IA para a cauda

Em 2023, o número de componentes em algumas páginas do GitHub estava explodindo, e a solução de CSS-in-JS existente estava pagando por isso: os carregamentos iniciais de página ficaram mais lentos à medida que os estilos eram inicializados no cliente, a renderização no servidor se degradou à medida que a coleta de estilos passou para o servidor, e as atualizações de estilo cresceram fora de controle. A equipe do Primer decidiu corrigir o problema na origem com uma restrição rígida: nada poderia quebrar o GitHub durante a migração.

A resposta foram os CSS Modules: arquivos CSS nativos colocados junto de cada componente, sem nenhum runtime no cliente ou no servidor. Como o formato era radicalmente diferente, a equipe migrou componente por componente: adicionar uma folha de estilos traduzida, colocar o componente atrás de uma flag que alternava entre estilos antigos e novos, verificar com snapshots de regressão visual que os pixels eram idênticos e, então, liberar a flag para a equipe, para o staff e, por fim, para todos. Em dezembro de 2024, todos os componentes do Primer estavam migrados, com as páginas renderizando no servidor 55% mais rápido e os componentes inicializando 25% mais rápido.

A metade mais difícil era o próprio código do GitHub, onde a prop sx tinha sido o padrão de estilização por anos — milhares de instâncias bloqueando a troca para o @primer/react sem runtime. A equipe criou o @primer/styled-react, um pacote wrapper transitivo que permite ao código que usa sx importar os mesmos componentes por meio dele, enquanto todo o resto importa o caminho rápido.

A conversão então correu pacote por pacote: em um pico de abril de 2025 de cerca de 7.760 props sx a migrar, um plugin do VS Code e um codemod interno fizeram a maior parte do trabalho, e 8 engenheiros moveram 6.419 props em seis meses, com ganhos de SSR de 1% a 22% por página. Em abril de 2026, dois engenheiros com agentes de codificação do Copilot levaram as 895 restantes a zero em três semanas; em junho de 2026, o GitHub rodava 100% em CSS Modules, com sx, styled-components e styled-system todos eliminados.

Migrar atrás de feature flags com snapshots de regressão visual; um pacote wrapper transitivo mantém os consumidores legados de sx funcionando enquanto os novos imports ganham a velocidade.

O custo de runtime do CSS-in-JS escalava com a complexidade da página, então a correção tinha de remover o próprio runtime em vez de ajustá-lo.

Feature flags mais snapshots de regressão visual tornaram cada etapa da migração reversível e idêntica em pixels, o que permitiu a uma equipe de design system alterar componentes dos quais outras equipes dependiam.

O wrapper @primer/styled-react desacoplou as duas migrações: os internos dos componentes podiam se modernizar enquanto milhares de pontos de chamada de sx permaneciam intocados até chegar a sua vez.

Codemods, um plugin dedicado do VS Code e, por fim, agentes de codificação do Copilot transformaram uma maratona de 7.760 props em trabalho majoritariamente automatizado, concluído por duas pessoas.

Design systems são o veículo mais barato para mudanças em toda a plataforma: corrija os componentes e o produto acompanha — com flags e testes de snapshot, até uma migração de vários anos nunca quebra a produção.

O GitHub roda inteiramente em CSS Modules desde junho de 2026. As salvaguardas criadas para a migração — flags, snapshots, lançamentos graduais — sustentaram quatro anos de mudança arquitetural sem quebras em produção, e o mesmo playbook agora dá suporte ao trabalho futuro da plataforma Primer.