stylex README

The project's README from github.com/facebook/stylex. As one markdown file: README.md.

StyleX · GitHub license npm version tests PRs Welcome

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.

Example

Here is a simple example of StyleX use:

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

Tasks

First, yarn install the yarn workspace.

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.

stylex (facebook/stylex)

eslint
Searching Database…

10.4K ·GitHub
Stylex
What is this?StyleX is a styling system from Meta — a JavaScript library for defining styles for optimized user interfaces.
So do I write my styles in JavaScript instead of CSS files?Yes — styles are defined in JavaScript code rather than in standalone CSS files; that write-in-JS model is the core of StyleX.
How do I add it to a project?Install the @stylexjs/stylex package from npm — the README names it as the place to start — and follow the documentation website from there.
Does it work with a plain script tag, or does it need a build step?It needs a build step: your styles are compiled by the StyleX Babel plugin as part of the build pipeline.
Will I have to figure out the build integration on my own?No — the repo ships an examples folder with StyleX integrated into various build tools, so you can start from a working configuration.
Does it work for native mobile apps too, or is it web-only?It is aimed at web user interfaces: StyleX is a CSS-based styling system wired into the standard web build chain.
What's inside the repository besides the core library?It's a yarn-workspace monorepo: alongside the stylex package you get PostCSS and Rollup plugins, an ESLint plugin, a CLI, a style value parser, docs, and benchmarks.
What are similar projects?emotion, styled-components, postcss, linaria, daisyui, vanilla-extract, formatjs, chakra-ui
Which topics is it in?postcss, css-in-js, babel, eslint, design-system, monorepo, css, benchmark, ui, web-development, npm, frontend
Creator
facebook
Size
20.3 MB
Stars
10.4K
Updated
CommitOct 17Release0.19.1Sep 15
Age
3y
Commits · 90 Days