BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

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

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

Listen to this article -  0:00

Linear, the project management tool long prized for its speed, has finished moving its React applications from styled-components to StyleX, Meta's atomic CSS-in-JS library, in a migration that engineer Kenneth Skovhus describes as taking more than 1,000 pull requests. An earlier write-up on his personal blog had documented the project at 58 percent complete, and the team wrapped it up in early August 2026 after roughly five months of work.

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:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  box: { padding: 16, color: 'blue' },
});

Linear evaluated most React styling options and found vanilla-extract the closest alternative, but rejected it for its fragmented API and separate style files. Rather than migrate by hand, Skovhus built a deterministic codemod, now past 500 PRs and roughly 100,000 lines, complete with an online playground. Teams attempting the same move can start from the StyleX docs, lean on Oxlint for custom rules, and keep CSS Modules as an escape hatch for global selectors, as Linear did. The payoff, per Linear, was 20 to 35 percent less main-thread work on view-heavy pages, about 30 percent faster navigation on a mid-tier machine, and zero CSS rules injected during a page change.

The move landed amid a wider StyleX surge as This Week in React noted the library was all the rage on X, following Cursor's own switch from Tailwind and Meta open-sourcing its Astryx design system. On Syntax, Scott Tolinski and Wes Bos asked why everyone was moving to StyleX, concluding that the extra rigidity is not much fun for humans, but agents thrive on it. Staff engineer Reid Burke, who once ran a similar atomic system at Yahoo, warned teams to beware the pitfall of choosing large API surfaces, since styled-components' open, Turing-complete API is exactly what made automation so hard.

A GitHub discussion titled "Using StyleX is great, but the guidelines are super restrictive" captures a common complaint about limits on parent-dependent and global selectors.

Linear is a project management and issue tracking tool built for software teams, long known for a keyboard-driven interface and an emphasis on speed. StyleX is Meta's open source atomic CSS-in-JS library, which moves style generation to build time and emits small, collision-free atomic classes rather than injecting CSS as the app runs. It powers Facebook, Instagram and WhatsApp on the web, and has drawn wider interest as teams look for styling systems that trade runtime flexibility for predictable performance and stricter component boundaries.

About the Author

Rate this Article

Adoption
Style

BT