Stylex

StyleX is the styling system for ambitious user interfaces.

CSS in JSReact Server Components
facebook/stylexstylexjs.com@stylexjs/stylex

README

stylex


StyleX is a JavaScript library for defining styles for optimized user
interfaces.

Documentation


Documentation Website

Documentation for individual packages can be found in their respective README
files. Start with
[@stylexjs/stylex](https://github.com/facebook/stylex/blob/main/packages/stylex).

Example


Here is a simple example of stylex use:

  1. ```js
  2. import stylex from '@stylexjs/stylex';

  4. const styles = stylex.create({
  5.   root: {
  6.     padding: 10,
  7.   },
  8.   element: {
  9.     backgroundColor: 'red',
  10.   },
  11. });

  13. const styleProps = stylex.apply(styles.root, styles.element);
  14. ```

Development


This is the development monorepo for stylex.

Structure


- .github
  - Contains workflows used by GitHub Actions.
  - Contains issue templates and contribution guidelines.
- apps
  - Contains example apps using stylex and integration with build tools.
- packages
  - Contains the individual packages managed in the monorepo.
  - babel-plugin
  - dev-runtime
  - eslint-plugin
  - nextjs-plugin
  - open-props
  - rollup-plugin
  - shared
  - stylex
  - webpack-plugin

Tasks


First, npm install the npm workspace.

- build
  - Use npm run build to run the build script in every package.
- Use `npm run build -w ` to run the build script for a specific
    package.
- test
  - Use npm run test to run tests for every package.
- Use `npm run test -w ` to run the test script for a specific
    package. More details can be found in the contributing guide below.

Contributing


Development happens in the open on GitHub and we are grateful for contributions
including bug fixes, improvements, and ideas.

Code of Conduct


This project expects all participants to adhere to Meta's OSS
Code of Conduct. Please read
the full text so that you can understand what actions will and will not be
tolerated.

Contributing Guide


Read the
contributing guide
to learn about our development process, how to propose bug fixes and
improvements, and how to build and test your changes.

Architectural Principles


Before proposing a change or addition to the StyleX API, you should familiarize
yourself with the
goals and architectural principles
of the project.

License


StyleX is MIT licensed.