Linear Completes 1,000-PR Migration From styled-components to Meta's StyleX

InfoQ Homepage News Linear Completes 1,000-PR Migration From styled-components to Meta's StyleX

Runtime CSS-in-JS makes users pay for style generation and rule injection while the client renders, and Linear felt that cost sharply after upgrading to React 18's concurrent rendering, around the same time styled-components entered maintenance mode . Sanity's Cody Olsen even shipped an optimised fork using React 18's useInsertionEffect, which he called a last resort and which cut Linear's render times by 40 percent. The second reason was encapsulation, patterns like styled(Button) made it too easy to restyle a component from the outside, something the team wanted to make deliberately hard as coding agents are used more .

StyleX shifts style generation to build time and emits collision-free atomic classes. A typical definition looks like this: