Linear conclui migração de 1.000+ PRs de styled-components para StyleX do Meta
Linear, a ferramenta de gerenciamento de projetos conhecida por sua velocidade, finalizou a transição de suas aplicações React de styled-components para StyleX, a biblioteca atomic CSS-in-JS do Meta. A migração envolveu mais de 1.000 pull requests, conforme descrito pelo engenheiro Kenneth Skovhus. Um artigo anterior em seu blog pessoal documentava o projeto em 58% de conclusão, e o time finalizou tudo no início de agosto de 2026 após aproximadamente cinco meses de trabalho.
Por que migrar?
A geração de CSS em tempo de execução (runtime CSS-in-JS) tem um custo: os usuários pagam pela geração de estilos e injeção de regras enquanto o cliente renderiza. Linear sentiu esse custo muito mais após fazer upgrade para React 18's concurrent rendering, justamente quando styled-components entrou em modo de manutenção. Cody Olsen, da Sanity, até criou um fork otimizado usando useInsertionEffect do React 18, que ele chamou de último recurso e que reduziu os tempos de renderização da Linear em 40%.
A segunda razão foi encapsulamento. Padrões como styled(Button) tornavam muito fácil restylar um componente de fora, algo que o time queria tornar deliberadamente difícil conforme agentes de código são usados cada vez mais.
Como StyleX funciona
StyleX move a geração de estilos para o tempo de build e emite classes atômicas livres de colisões. Uma definição típica tem esta aparência:
Linear avaliou a maioria das opções de estilo para React e encontrou vanilla-extract como a alternativa mais próxima, mas a rejeitou por sua API fragmentada e arquivos de estilo separados. Em vez de migrar manualmente, Skovhus construiu um codemod determinístico, agora com mais de 500 PRs e aproximadamente 100.000 linhas de código, completo com um playground online. Times tentando o mesmo movimento podem começar com a documentação do StyleX, contar com o Oxlint para regras customizadas, e manter CSS Modules como um escape hatch para seletores globais, como Linear fez.
Os resultados
O pagamento, segundo Linear, foi de 20 a 35% menos trabalho na main-thread em páginas com muitas visualizações, aproximadamente 30% de navegação mais rápida em uma máquina de mid-tier, e zero regras CSS injetadas durante uma mudança de página.
Uma tendência em crescimento
A migração ocorreu em meio a um surge mais amplo do StyleX. This Week in React notou que a biblioteca estava em moda no X, seguindo a própria mudança do Cursor de Tailwind e do open-sourcing do design system Astryx do Meta. No Syntax, Scott Tolinski e Wes Bos perguntaram por que todos estavam se movendo para StyleX, concluindo que a rigidez extra não é muito divertida para humanos, mas agentes prosperam nela. Reid Burke, staff engineer que certa vez executou um sistema atômico semelhante no Yahoo, alertou times para ficarem atentos à armadilha de escolher grandes superfícies de API, já que a API aberta e Turing-completa de styled-components é exatamente o que tornava a automação tão difícil.
