Repolode
Submit
facebook

facebook/stylex

A JavaScript styling library from Facebook for defining optimized, atomic CSS styles in user interfaces.

View on GitHubWebsite
Stars
10,424
Forks
502
Open issues
239
Last commit
4 hours ago

What is it?

StyleX is a JavaScript library for defining styles in user interfaces. Developers declare styles with stylex.create and apply them with stylex.props, which returns the class names to attach to elements.

The project is a development monorepo that includes the core stylex package along with a Babel plugin, a CLI, PostCSS, Rollup and ESLint plugins, a style value parser, and a documentation site at stylexjs.com. Examples show integration with build tools.

Styles are written as JavaScript objects, and the tooling compiles them during the build step.

Key features

  • 01Defines styles as JavaScript objects with stylex.create.
  • 02Applies styles to elements through stylex.props.
  • 03Ships a Babel plugin and integrations for PostCSS, Rollup and ESLint.
  • 04Includes a CLI for the build workflow.
  • 05Provides an official documentation website.

Use cases

  • Styling a React or other JavaScript UI with co-located, scoped style definitions.
  • Adding a build-time styling pipeline to an existing frontend project using Rollup or PostCSS.
  • Enforcing style conventions in a codebase with the StyleX ESLint plugin.

Quick start

  1. 1

    Install the StyleX package from npm

    npm install @stylexjs/stylex
  2. 2

    Define styles with stylex.create and apply them with stylex.props

  3. 3

    Read the documentation website for build tool setup

Things to know

  • The README gives no setup for compiling styles; build tool integration must be configured separately.
  • This is a monorepo for development, so contributing requires installing the full yarn workspace.

Topics

#css#styling#javascript#babel#ui#build-tools

FAQ

What is stylex?
A JavaScript styling library from Facebook for defining optimized, atomic CSS styles in user interfaces. StyleX is a JavaScript library for defining styles in user interfaces. Developers declare styles with stylex.create and apply them with stylex.props, which returns the class names to attach to elements.
Is stylex free to use? What license does it have?
stylex is open source under the MIT license. Check the license terms before using it in commercial products.
Is stylex still maintained?
Actively maintained. The last commit to stylex was on Oct 21, 2026.
What can I use stylex for?
Styling a React or other JavaScript UI with co-located, scoped style definitions. Adding a build-time styling pipeline to an existing frontend project using Rollup or PostCSS. Enforcing style conventions in a codebase with the StyleX ESLint plugin.
How do I install stylex?
Install the StyleX package from npm: npm install @stylexjs/stylex Define styles with stylex.create and apply them with stylex.props Read the documentation website for build tool setup
Where can I get stylex?
The source code and installation instructions are on GitHub: https://github.com/facebook/stylex

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects