StyleX Has a Free API You Should Know About

#css #react #javascript #meta

StyleX is Meta's CSS-in-JS solution that powers Facebook and Instagram. It combines the DX of CSS-in-JS with zero-runtime performance through build-time extraction and atomic CSS output.

Why Meta Built StyleX

Meta needed CSS for 100+ engineers working on the same codebase. CSS Modules didn't scale. Runtime CSS-in-JS was too slow. StyleX compiles styles at build time into deduplicated atomic CSS — used at Meta's scale since 2021.

Key Features:

Zero Runtime — Styles compile to atomic CSS at build time
Deterministic Resolution — Last style always wins, no specificity issues
Type-Safe — Full TypeScript support
Optimized Output — Atomic CSS means minimal bundle size
Dead Code Elimination — Unused styles automatically removed

Quick Start

npm install @stylexjs/stylex @stylexjs/babel-plugin

import * as stylex from "@stylexjs/stylex"

const styles = stylex.create({
  button: {
    backgroundColor: "#3b82f6",
    color: "white",
    padding: "12px 24px",
    borderRadius: 8,
    ":hover": { backgroundColor: "#2563eb" }
  },
  danger: {
    backgroundColor: "red"
  }
})

function Button({ danger }) {
  return <button {...stylex.props(styles.button, danger && styles.danger)}>Click</button>
}