Linear migra de styled-components para StyleX

Linear está trocando styled-components por StyleX para tirar o peso da geração de estilos do runtime e melhorar a performance do cliente. A decisão não foi só técnica, mas arquitetural: reduzir a liberdade perigosa que styled-components oferece, como reabrir componentes de fora ou usar seletores combinadores caros. Com React 18, a falta de suporte ao useInsertionEffect no styled-components virou um problema real, e irreversível, já que a biblioteca entrou em modo de manutenção.

O time da Linear queria um sistema com tempo mínimo de execução, resolução previsível de estilos, contratos de estilo tipados e encapsulamento mais forte. Avaliaram vanilla-extract, mas recusaram por exigir arquivos separados e ter uma API fragmentada. O StyleX, mantido pelo Meta e usado em escala no Facebook e Instagram, alinha-se melhor com o fluxo de trabalho deles: estilos próximos ao componente, API enxuta e extração estática robusta. A migração ainda permite escape hatches controlados via CSS Modules, quando necessário.

Mover estilos para o build time corta custo direto no cliente, especialmente em navegação entre páginas, o ganho relatado é de 30% na velocidade de renderização. Isso impacta experiência do usuário e métricas de desempenho críticas, como interatividade e carregamento percebido. Além disso, impor guardrails no styling reduz dívidas técnicas em UI, tornando o código mais previsível e seguro para times crescerem sem quebrar interfaces acidentalmente.

A adoção de agentes programáveis para automatizar parte da migração mostra um novo padrão no desenvolvimento: humanos definem a arquitetura e as regras, enquanto agentes executam transformações massivas com supervisão. O projeto gerou mais de 500 PRs e 100 mil linhas de ferramentas customizadas, provando que automação inteligente já é viável em refatorações complexas, mesmo sem um design system bem definido.