StyleX Facebook Style Library Killer of Tailwind CSS

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 talks, 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>
  );
}

1. Overriding Styles in Button

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

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

1. 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,
  },
});

1. 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>
  );
}

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