Styling Linear for the future with StyleX

·

·

It took much longer than anticipated, and at times it was a struggle to keep the momentum going, but more than a 1,000 PRs later, we migrated Linear’s React applications from styled-components to StyleX.

It took much longer than anticipated, and at times it was a struggle to keep the momentum going, but more than a 1,000 PRs later, we migrated Linear’s React applications from styled-components to StyleX.

styled-components served Linear surprisingly well for a long time. Its API was very flexible, styles stayed colocated with components, and you could reach for regular CSS whenever you needed something more custom. That suited us because our team is unusually sensitive to little things, like the occasional pesky border radius.

styled-components served Linear surprisingly well for a long time. Its API was very flexible, styles stayed colocated with components, and you could reach for regular CSS whenever you needed something more custom. That suited us because our team is unusually sensitive to little things, like the occasional pesky border radius.

Eventually though, the endless configurability became a liability.

Eventually though, the endless configurability became a liability.

CSS already makes it too easy to style things at a distance, and patterns like styled(Button) made it normal to reopen a component from the outside rather than make its styling contract explicit. We felt the pain of this sharply after Linear’s redesign a few months ago, which has left us chasing a long tail of UI regressions.

CSS already makes it too easy to style things at a distance, and patterns like styled(Button) made it normal to reopen a component from the outside rather than make its styling contract explicit. We felt the pain of this sharply after Linear’s redesign a few months ago, which has left us chasing a long tail of UI regressions.

As our team grows, we wanted to create a stronger foundation for how UI is composed. Defining these boundaries is becoming especially important as agents contribute more and more to our code...