Claude Code for StyleX Meta — Workflow Guide

Written by Michael Lip · Solo founder of Zovo · $400K+ on Upwork · 100% JSS Join 50+ builders · More at zovo.one

The Setup

You are styling React components with StyleX, Meta’s compile-time CSS-in-JS library used in production at Facebook and Instagram. StyleX generates atomic CSS classes at build time, providing type-safe styles with zero runtime overhead. Claude Code can write CSS-in-JS, but it generates runtime-based solutions like styled-components or emotion instead of StyleX’s compile-time approach.

What Claude Code Gets Wrong By Default

  1. Uses styled-components or emotion. Claude writes styled.div`color: red;` with runtime CSS generation. StyleX compiles styles at build time — stylex.create({ root: { color: 'red' } }) generates atomic CSS classes during compilation.

  2. Applies styles with className strings. Claude writes className="text-red-500" or dynamic class concatenation. StyleX applies styles with stylex.props(styles.root) which returns an object with className and style props.

  3. Creates global CSS overrides. Claude writes body { font-family: ... } in global CSS. StyleX encourages component-scoped styles — use stylex.defineVars for theme tokens instead of global CSS.

  4. Nests selectors arbitrarily. Claude writes nested CSS selectors like .container .title. StyleX limits selectors to pseudo-classes and media queries — no arbitrary nesting, which ensures predictable specificity.

The CLAUDE.md Configuration

# StyleX Project

## Styling
- Library: StyleX (Meta's compile-time CSS-in-JS)
- Build: compile-time atomic CSS generation
- Runtime: zero — all CSS generated at build time
- Type safety: full TypeScript support

## StyleX Rules
- Create: const styles = stylex.create({ name: { prop: value } })
- Apply: stylex.props(styles.name) on elements
- Variables: stylex.defineVars for theme tokens
- Conditional: stylex.props(condition && styles.active)
- Merge: stylex.props(styles.base, styles.variant)
- Media: '@media (max-width: 768px)': { ... } in create
- Pseudo: ':hover': { color: 'blue' } in create

## Conventions
- stylex.create per component file
- stylex.defineVars for design tokens (colors, spacing)
- Compose styles by passing multiple to stylex.props
- Use conditional application for state-based styles
- No dynamic values at runtime — all values known at build
- Babel/webpack plugin for compilation
- Import styles object, not class strings

Workflow Example

You want to create a themed button component with variants. Prompt Claude Code:

“Create a Button component styled with StyleX. Include size variants (small, medium, large), visual variants (primary, secondary, outline), hover and active states, and disabled styling. Use StyleX defineVars for theme colors.”

Claude Code should create theme variables with stylex.defineVars, create styles with stylex.create including base styles, size variants, visual variants, and pseudo-class states, apply them with stylex.props(styles.base, styles[size], styles[variant]), and handle disabled state conditionally.

Common Pitfalls

  1. Missing Babel plugin configuration. Claude writes StyleX code but styles do not apply. StyleX requires @stylexjs/babel-plugin in the Babel config for compilation — without it, stylex.create calls are not processed.

  2. Using dynamic values in stylex.create. Claude passes JavaScript variables into stylex.create({ root: { width: dynamicWidth } }). StyleX styles are compiled at build time — all values must be static. Use stylex.defineVars for dynamic theming or inline styles for truly dynamic values.

  3. Conflicting with other CSS solutions. Claude mixes StyleX with Tailwind or CSS modules in the same component. StyleX generates atomic classes that may conflict with other CSS approaches — use one styling solution consistently per component.