https://github.com/facebook/stylex

StyleX is the styling system for ambitious user interfaces.
https://github.com/facebook/stylex

Last synced: 12 months ago
JSON representation

StyleX is the styling system for ambitious user interfaces.

• Host: GitHub
• URL: https://github.com/facebook/stylex
• Owner: facebook
• License: mit
• Created: 2022-12-08T06:38:09.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-05-10T06:45:06.000Z (12 months ago)
• Last Synced: 2025-05-12T00:54:26.782Z (12 months ago)
• Language: JavaScript
• Homepage: https://stylexjs.com
• Size: 10.7 MB
• Stars: 8,656
• Watchers: 51
• Forks: 325
• Open Issues: 61
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-github-projects - stylex - StyleX is the styling system for ambitious user interfaces. ⭐9,150 `JavaScript` 🔥 (📊 Data & Analytics)
• StarryDivineSky - facebook/stylex - in-JS 方案更高效的编译策略，同时保持与 CSS 语法的兼容性，使开发者能够灵活选择内联样式或外部 CSS 文件。该项目特别适合需要大规模样式管理、追求渲染性能或希望减少样式冲突的 React 项目，其核心价值在于通过工程化手段将样式管理转化为可预测、可优化的代码结构。 (前端开发框架及项目 / React工具库)
• awesome-ccamel - facebook/stylex - StyleX is the styling system for ambitious user interfaces. (JavaScript)

README

          
# StyleX · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/stylex/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@stylexjs/stylex.svg?style=flat)](https://www.npmjs.com/package/@stylexjs/stylex) [![tests](https://github.com/facebook/stylex/actions/workflows/tests.yml/badge.svg)](https://github.com/facebook/stylex/actions/workflows/tests.yml) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)

StyleX is a JavaScript library for defining styles for optimized user

interfaces.

## Documentation

[Documentation Website](https://stylexjs.com)

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:

```js

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

const styles = stylex.create({

  root: {

    padding: 10,

  },

  element: {

    backgroundColor: 'red',

  },

});

const styleProps = stylex.props(styles.root, styles.element);

```

## Development

This is the development monorepo for StyleX.

### Structure

- `.github`

  - Contains workflows used by GitHub Actions.

  - Contains issue templates and contribution guidelines.

- `examples`

  - Contains examples using StyleX and its integration with build tools.

- `packages`

  - Contains the public and private packages managed in the monorepo.

  - [babel-plugin](https://github.com/facebook/stylex/blob/main/packages/babel-plugin)

  - [benchmarks](https://github.com/facebook/stylex/blob/main/packages/benchmarks)

  - [cli](https://github.com/facebook/stylex/blob/main/packages/cli)

  - [docs](https://github.com/facebook/stylex/blob/main/packages/docs)

  - [eslint-plugin](https://github.com/facebook/stylex/blob/main/packages/eslint-plugin)

  - [postcss-plugin](https://github.com/facebook/stylex/blob/main/packages/postcss-plugin)

  - [rollup-plugin](https://github.com/facebook/stylex/blob/main/packages/rollup-plugin)

  - [scripts](https://github.com/facebook/stylex/blob/main/packages/scripts)

  - [shared](https://github.com/facebook/stylex/blob/main/packages/shared)

  - [style-value-parser](https://github.com/facebook/stylex/blob/main/packages/style-value-parser)

  - [stylex](https://github.com/facebook/stylex/blob/main/packages/stylex)

### 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](https://opensource.fb.com/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](https://github.com/facebook/stylex/blob/main/.github/CONTRIBUTING.md)

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](https://stylexjs.com/docs/learn/thinking-in-stylex/)

of the project.

### License

StyleX is [MIT licensed](./LICENSE).