Moving Linear from styled‑components to StyleX
Linear migrated from styled-components to StyleX, improving performance, type safety, and bundle size. The rewrite of thousands of components resulted in faster runtime and a more maintainable styling system.
Background
Linear is a popular project-management tool (often called "the best issue tracker") known for its fast, clean interface. Its frontend was originally built with **styled-components**, a CSS-in-JS library that lets developers write actual CSS inside JavaScript/React code, using dynamic template literals ("tagged templates"). Over time, styled-components caused performance issues (especially with React's concurrent rendering) and slower build times. **StyleX** is a newer CSS-in-JS solution developed internally at Meta (Facebook/Instagram), designed for better performance and scalability in large apps. It uses a compile-time approach—turning styles into static class names at build time rather than injecting them at runtime—which reduces overhead during rendering. The article details Linear's migration from styled-components to StyleX, covering engineering trade-offs (runtime vs. compile-time CSS), migration tooling, and the performance improvements they gained.