StyleX — The CSS Library Behind Meta’s Platforms

It has been a while since a new CSS library took the spotlight. Granted, it isn’t as hyped as Tailwind was when it first came out, but nevertheless, Meta’s StyleX deserves its fair of attention.

What is StyleX?

StyleX is “a simple, easy-to-use JavaScript syntax and compiler for styling web apps.”
So it is Yet Another CSS Library™?
Well, yes, but also, it’s unique in several ways.
Its syntax is not one of those ways though:

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

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
});

Isn’t that just JSS?
StyleX, JSS, and a few others, are all CSS-in-JS libraries, they all share a similar CSS-like syntax. StyleX compiles your declarative JavaScript code into plain, fast CSS, but what makes StyleX unique is a set of features and optimizations that makes it an optimal choice for building large-scale component-oriented UIs -like most modern frontends are built these days- and especially with React and React-like libraries such as Preact and Solid.

StyleX’s main features

• Type-Safety: Since StyleX focuses on scalability and maintainability, a natural feature to have is TypeScript type-safety — Type-safe APIs, styles, and themes.
• Scalability: StyleX uses atomic CSS to minimize its CSS output, and make sure the size of the resulting CSS will plateau even as your project grows.
• Predictability: A well-known -and hated- issue with CSS is how unpredictable it can be sometimes, an issue that can be much worse in some CSS libraries like TailwindCSS where you don’t have a real way to manage specificity in your styles. StyleX solves these issues by scoping the CSS class names to only style the element they were directly used in, as well as applying the “last style applied always wins” rule for styles.
• Performance: StyleX manages to be very speedy by shipping a runtime optimized for merging class names and bundling all your styles into a static CSS file at compile-time, as well as having no runtime style injection, aka, no JavaScript is tinkering with your styles after the compiler finishes its job.
• Composability: StyleX allows you to apply styles conditionally, merge and compose them, and use local constants to keep them DRY.

---

Using the thing

Using StyleX is dead simple.
You only need to:

Configure the compiler

import plugin from '@stylexjs/rollup-plugin';

const config = () => ({
  plugins: [
    plugin({ ...options })
  ]
})

export default config;

Define styles

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

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
});

Use them

export function ReactDiv({ style, children }){
  return <div {…stylex.props(styles.root, style)}>{children}</div>;
};

---

StyleX vs TailwindCSS

StyleX has been promoted as a so-called “Tailwind killer”, it sure sounds cool – and nil for pro Tailwind-ers – but I don’t think it is a true statement, instead, I see that both Tailwind and StyleX have their places, even if they sometimes intercept each others’.

Built for scalability and maintainability

Looking at the few features we mentioned before, it is clear that StyleX is aimed at large or growing projects, which can benefit from its performance and scalability, and with its composability it is also seemingly a great fit for building component libraries for React and React-like frameworks.

Built for rapid development

TailwindCSS the other hand aims to provide developers with a wide set of utilities that can be used to style components and avoid the hassle of managing your CSS styles altogether, you can simply configure your theme and start styling your component without worrying about the details, it isn’t built for building large-scale maintainable applications, or component libraries, but for rapid UI development using a its built-in units and themes.
That doesn’t mean that Tailwind cannot be used for large-scale applications, it helps the developers avoid the hassle of managing their own styles as mentioned before, it is also performant and it has many ready-to-use class-based and component-based -either styled or headless- libraries that can be directly plugged into your project, but as mentioned, TailwindCSS focuses on rapid development.

---

Conclusion

StyleX is a new and powerful tool that has the potential to help developers build more maintainable apps and libraries more efficiently, as it specializes in the niche of component oriented applications and enterprise.

What are your opinions about it?