Amidst the challenges of handling CSS in this monumental task, the Feacebook (Meta) team encountered issues that many large projects and companies face. The myriad options, such as build-time vs run-time, CSS vs CSS in JavaScript, and the choice of utility-first systems like Tailwind, presented complex decisions.

To address these challenges, Facebook introduced StyleX, a new CSS platform that would serve as the third pillar in their application architecture.

While GraphQL and Relay handled data, and React managed the DOM, StyleX took charge of styling. This new system aimed to learn from the mistakes of the past and overcome scaling issues experienced with the previous architecture, similar to CSS modules.

Ok, enough tasks, let’s see how StyleX works:

Demo Code

I. Install StyleX

npm install --save @stylexjs/stylex

II. Example of use:

1. StyleX Button Component

This code defines a Button component using StyleX, a CSS-in-JS library. The styles object is created with a set of base styling properties for the button, such as appearance, colors, and padding. The Button component receives props like onClick, children, and an optional style prop for additional styling. The stylex.props function is used to combine the base styles with any custom styles passed through the style prop. This enables the creation of a customizable and reusable button component with a clean separation of concerns between styles and components.

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

const styles = stylex.create({
  base: {
    appearance: "none",
    borderWidth: 0,
    borderStyle: "none",
    backgroundColor: "blue",
    color: "white",
    borderRadius: 4,
    paddingBlock: 4,
    paddingInline: 8,
  },
});

export default function Button({
  onClick,
  children,
  style,
}) {
  return (
    <button {...stylex.props(styles.base, style)} onClick={onClick}>
      {children}
    </button>
  );
}

2. Overriding Styles in Button

const buttonStyles = stylex.create({
  red: {
    backgroundColor: "red",
    color: "blue",
  },
});

<Button onClick={handleClick} style={buttonStyles.red}>
  Styleable Button
</Button>

3. Theming with Design Tokens

StyleX also supports design tokens and theming, offering excellent type-safe support for both. By defining design tokens and theming at a granular level, StyleX enables users to customize styling elements precisely. The use of CSS variables enhances flexibility, allowing themes to be applied dynamically based on media queries or other conditions.

import * as stylex from "@stylexjs/stylex";
import type { StyleXStyles, Theme } from "@stylexjs/stylex/lib/StyleXTypes";

// Define design tokens
export const buttonTokens = stylex.defineVars({
  bgColor: "blue",
  textColor: "white",
  cornerRadius: "4px",
  paddingBlock: "4px",
  paddingInline: "8px",
});

// Use design tokens in Button component
export default function Button({
  onClick,
  children,
  style,
  theme,
}) {
  return (
    <button {...stylex.props(theme, styles.base, style)} onClick={onClick}>
      {children}
    </button>
  );
}

// Create styles based on design tokens
const styles = stylex.create({
  base: {
    appearance: "none",
    borderWidth: 0,
    borderStyle: "none",
    backgroundColor: buttonTokens.bgColor,
    color: buttonTokens.textColor,
    borderRadius: buttonTokens.cornerRadius,
    paddingBlock: buttonTokens.paddingBlock,
    paddingInline: buttonTokens.paddingInline,
  },
});

4. Conditional Styles

const styles = stylex.create({
  base: {
    // other styles...
  },
  emphasized: {
    fontWeight: "bold",
  },
});

export default function Button({
  onClick,
  children,
  emphasized,
}) {
  return (
    <button
      {...stylex.props(styles.base, emphasized && styles.emphasized)}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

One notable aspect of StyleX is its co-location of styles with components, enhancing developer experience and code readability. Although it doesn’t offer the shorthand styles of Tailwind, StyleX compensates with compile-time CSS advantages, ensuring more control over styling.

Why do I shoot using StyleX?

1. Deterministic Resolution: StyleX provides “Deterministic Resolution,” ensuring a predictable order of loading styles. This helps avoid unexpected styling discrepancies when navigating through different routes on your website, addressing issues commonly encountered with lazy-loaded CSS.
2. Co-location of Styles: With StyleX, styles are co-located directly with the components that use them.
3. Compile-Time CSS: StyleX offers the advantage of compile-time CSS, providing performance benefits over run-time systems. This means that the styles are processed during build time, reducing the need for extensive client-side processing and enhancing overall application performance.
4. Control Over Styling: StyleX allows for precise control over styling. You can define clear boundaries for what aspects of the styling can be overridden, making it easier to version components with confidence and ensuring a more maintainable codebase.
5. Design Tokens and Theming: StyleX supports design tokens and theming, allowing you to define and use reusable styling variables.
6. Conditional and Dynamic Styles: StyleX supports both conditional and dynamic styles. This flexibility allows you to create styles that adapt based on certain conditions, making it easier to handle different states and scenarios in your components.
7. Integration with React/Next.js : If you’re already using React in your project, StyleX seamlessly integrates with React components. This integration makes it a natural choice for projects built with React, providing a consistent and efficient way to manage styles in the React ecosystem.

Conclusion

In conclusion, the introduction of StyleX at Facebook, initially as a key component of their React rewrite, has proven to be a success. The system has significantly contributed to reducing the site’s CSS footprint and mitigating loading order issues. As StyleX makes its way into the open source community, it offers a robust solution for larger projects and teams, providing invaluable tooling in the realm of design systems. While it may not offer the off-the-shelf ease of use like Tailwind, StyleX’s strengths lie in its ability to support complex projects with precision and control. As Meta embraces open source contributions, StyleX stands as a testament to their commitment to providing powerful tools for diverse development needs.

❤️ If you like my work, please follow me and subscribe ❤️

• Follow me
• Subscribe
• LinkedIn
• Visit Front-end World and subscribe.