Skip to main content

The styling system that powers
facebook.cominstagram.comwhatsapp.comthreads.net

Get StartedThinking in StyleX

Scalable

Scale new heights without bundle sizes weighing you down

  • Minimize CSS output with atomic CSS
  • The CSS size plateaus even as the number of components grows
  • Styles remain readable and maintainable within growing codebases

Predictable

You shouldn't need a crystal ball to know how an element is styled

  • All styles are applied as class names applied directly on elements
  • No specificity issues
  • “The last style applied always wins!”

Composable

Merging styles shouldn't feel like a puzzle

  • Apply styles conditionally
  • Merge and compose arbitrary styles across component and file boundaries
  • Use local constants and expressions to keep your styles DRY
    • Or repeat yourself without worrying about performance

Fast

Dynamic at the speed of static, because it is static

  • No runtime style injection
  • All styles are bundled in a static CSS file at compile-time
  • Optimized runtime for merging class names

Type-Safe

More safety than just your eyes

  • Type-safe APIs
  • Type-safe styles
  • Type-safe themes

Easy as 1, 2, 3

Step 1

Configure the compiler

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

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

export default config;

Step 2

Create your styles

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

const styles = stylex.create({
  hello: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '8rem',
  }
});

Step 3

Use your styles

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

const HelloWorld = ({style}) => (
  <div {...stylex.props(
    styles.hello,
    style
  )} >
    🎉
  </div>
)