# facebook/stylex

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/facebook-stylex).**

9,126 stars · 391 forks · JavaScript · mit

## Links

- GitHub: https://github.com/facebook/stylex
- Homepage: https://stylexjs.com
- awesome-repositories: https://awesome-repositories.com/repository/facebook-stylex.md

## Description

StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into optimized static CSS and type-safe class names. It functions as a multi-framework styling tool, generating standard CSS assets compatible with various JavaScript UI frameworks and server components.

The system includes a CSS design token system and theme engine for managing shared constants and composing visual schemes. It allows for the creation of light, dark, and custom themes through variable overrides and token inheritance.

The project covers component styling through object-based definitions and style composition, alongside comprehensive design token management and theme orchestration. It enforces style constraints and type-safety during development to prevent runtime CSS errors.

Integrations are available for various build tools and environments, including Vite, Next.js, Bun, Rspack, and PostCSS.

## Tags

### User Interface & Experience

- [CSS-in-JS Compilers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations/css-in-js-compilers.md) — Compiles JavaScript style definitions into static atomic CSS files to eliminate runtime overhead.
- [Atomic CSS Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/atomic-css-generators.md) — Transforms JavaScript style definitions into optimized atomic CSS and type-safe class names at build time. ([source](https://stylexjs.com/docs/learn/installation/postcss))
- [Adaptive Color Schemes](https://awesome-repositories.com/f/user-interface-experience/adaptive-color-schemes.md) — Defines distinct visual schemes for light and dark modes using native CSS variables. ([source](https://stylexjs.com/docs/learn/recipes/light-dark-themes))
- [Cross-Framework Styling](https://awesome-repositories.com/f/user-interface-experience/cross-framework-styling.md) — Generates standard CSS assets that ensure consistent visual styles across different JavaScript frameworks and server components.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements theming by mapping design tokens to native CSS variables for efficient runtime switching.
- [Design Token Management](https://awesome-repositories.com/f/user-interface-experience/design-token-management.md) — Provides a central system for organizing and managing shared constants and variables to maintain a uniform visual identity.
- [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens.md) — Maintains shared constants in a centralized configuration to ensure visual consistency across the codebase. ([source](https://stylexjs.com/docs/learn/recipes/shareable-tokens))
- [CSS Variable Token Mappings](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens/css-variable-token-mappings.md) — Maps design tokens to unique CSS variables during compilation to prevent naming collisions.
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Provides a framework for defining and managing shared constants and variables through hierarchical design tokens.
- [Multi-Framework Styling Tools](https://awesome-repositories.com/f/user-interface-experience/multi-framework-styling-tools.md) — Generates standard CSS and class names that are compatible across various JavaScript UI frameworks and server components.
- [Style Composition Engines](https://awesome-repositories.com/f/user-interface-experience/style-composition-engines.md) — Implements a deterministic system for merging multiple style definitions and resolving property precedence. ([source](https://cdn.jsdelivr.net/gh/facebook/stylex@main/README.md))
- [Styling Frameworks](https://awesome-repositories.com/f/user-interface-experience/styling-frameworks.md) — Generates standard class names and inline styles that work across different JavaScript UI frameworks. ([source](https://stylexjs.com/docs/learn/thinking-in-stylex))
- [Type-Safe Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations/type-safe-implementations.md) — Provides a styling system that uses static types to ensure CSS properties are valid and consistent across components.
- [Declarative Style Objects](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/declarative-style-objects.md) — Provides an object-based syntax for defining visual properties that are compiled into atomic CSS. ([source](https://stylexjs.com/docs/learn))
- [Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/theme-definitions.md) — Allows the creation of structured visual themes using sets of variable overrides applied across components. ([source](https://stylexjs.com/docs/learn/theming/creating-themes))
- [Theme Inheritance Systems](https://awesome-repositories.com/f/user-interface-experience/theme-inheritance-systems.md) — Provides a system where specialized themes inherit base token configurations and apply selective overrides. ([source](https://stylexjs.com/docs/learn/recipes/shareable-tokens))
- [Type-Safe Style Schemas](https://awesome-repositories.com/f/user-interface-experience/type-safe-style-schemas.md) — Enforces CSS property and value constraints using static type definitions during development.
- [UI Theming](https://awesome-repositories.com/f/user-interface-experience/ui-theming.md) — Implements scalable light and dark modes or custom visual themes using variable overrides and hierarchical tokens.
- [Color Scheme Managers](https://awesome-repositories.com/f/user-interface-experience/color-scheme-managers.md) — Implements automated theme switching based on system or browser settings using native CSS functions. ([source](https://stylexjs.com/docs/learn/recipes/light-dark-themes))
- [Derived Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/theme-token-definitions/derived-tokens.md) — Calculates new style variables from existing tokens at compile time to maintain a hierarchical theme. ([source](https://stylexjs.com/docs/learn/theming/defining-variables))
- [Style Linting](https://awesome-repositories.com/f/user-interface-experience/style-configurations/style-linting.md) — Flags invalid styles and provides automated fixes for common errors during development to prevent runtime mistakes. ([source](https://stylexjs.com/docs/learn/installation))
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Applies styles at runtime using logic expressions to ensure only active visual states are rendered. ([source](https://stylexjs.com/docs/learn/styling-ui/using-styles))
- [Cross-Component Style Sharing](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/cross-component-style-sharing.md) — Passes style definitions as props between different files to maintain consistent styling across boundaries. ([source](https://stylexjs.com/docs/learn/styling-ui/using-styles))
- [Dynamic Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/dynamic-styling-systems.md) — Changes the visual appearance of components based on state, props, or shared context values. ([source](https://stylexjs.com/docs/learn))
- [Styling Variants](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants.md) — Maps component properties to specific style objects to switch visual states based on props. ([source](https://stylexjs.com/docs/learn/styling-ui/using-styles))
- [State-Based Style Application](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/state-based-style-application.md) — Sets different style values based on pseudo-classes or media queries to respond to element states and environment changes. ([source](https://stylexjs.com/docs/learn/recipes/variants))
- [Dynamic Style Restrictions](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/build-time-style-processing/static-style-extraction/dynamic-style-restrictions.md) — Prevents the use of dynamic style definitions in specific props to ensure styles remain predictable and optimizable. ([source](https://stylexjs.com/docs/learn/static-types))
- [Property Allowlists](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/property-allowlists.md) — Validates that style properties adhere to specific allowlists or blocklists to restrict which CSS rules are applied. ([source](https://stylexjs.com/docs/learn/static-types))
- [CSS Variable Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems.md) — Utilizes CSS variables to propagate styling values down the DOM tree from parent to children. ([source](https://stylexjs.com/docs/learn/recipes/descendant-styles))
- [Typed Style Variables](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems/typed-style-variables.md) — Assigns specific CSS types to variables to ensure type-safety and enable behaviors like angle animations. ([source](https://stylexjs.com/docs/learn/theming/variable-types))
- [Theme Management](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/theme-management.md) — Merges multiple object constants into a single theme to reuse shared values and reduce redundancy. ([source](https://stylexjs.com/docs/learn/recipes/merge-themes))
- [Theme Composition](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/theme-management/theme-composition.md) — Merges base token sets with specific overrides using shared functions to create related themes. ([source](https://stylexjs.com/docs/learn/recipes/shareable-tokens))
- [Theme Overriding Systems](https://awesome-repositories.com/f/user-interface-experience/theme-overriding-systems.md) — Allows assigning themes to specific elements to override style variables for that element and its descendants. ([source](https://stylexjs.com/docs/learn/theming/creating-themes))

### Software Engineering & Architecture

- [Styling Constants](https://awesome-repositories.com/f/software-engineering-architecture/type-safe-constants/styling-constants.md) — Uses typed JavaScript constants instead of raw strings for classes and variables to ensure type-safety. ([source](https://stylexjs.com/docs/learn/thinking-in-stylex))
- [Server-Side Rendering Style Registries](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/server-side-rendering-style-registries.md) — Generates shared CSS across client and server bundles to maintain consistency in server-side architectures. ([source](https://stylexjs.com/docs/learn/installation/vite/react-router))

### Web Development

- [Token Assignment](https://awesome-repositories.com/f/web-development/cross-platform-styling/universal-style-compilers/token-assignment.md) — Assigns unique CSS names to reusable style variables at compile time to maintain consistency. ([source](https://stylexjs.com/docs/learn/theming/defining-variables))
- [CSS Build Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools.md) — Transforms style definitions into optimized CSS during the build process for final output integration. ([source](https://stylexjs.com/docs/learn/installation/vite/vite-react))

### Part of an Awesome List

- [CSS Optimization](https://awesome-repositories.com/f/awesome-lists/devtools/css-optimization.md) — Optimizes style definitions into minified and efficient CSS to improve loading speeds. ([source](https://stylexjs.com/docs/learn/installation))

### Development Tools & Productivity

- [Cross-Environment Style Aggregation](https://awesome-repositories.com/f/development-tools-productivity/multi-environment-build-management/cross-environment-style-aggregation.md) — Aggregates style definitions from both server and client environments into a single optimized CSS asset. ([source](https://stylexjs.com/docs/learn/installation/vite/vite-rsc))
- [Build Tool Integrations](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/build-task-automation/build-tool-integrations.md) — Integrates with build tools to extract and aggregate styles into final CSS assets. ([source](https://stylexjs.com/docs/learn/installation/esbuild))

### Programming Languages & Runtimes

- [Style Optimizers](https://awesome-repositories.com/f/programming-languages-runtimes/compiler-interpreter-internals/compiler-toolchains/optimization-frameworks/static-analysis-optimizers/style-optimizers.md) — Analyzes style objects at build time to resolve constants and remove unused declarations.
- [Hot Module Reloaders](https://awesome-repositories.com/f/programming-languages-runtimes/language-ecosystems-tooling/module-management/module-loaders/hot-module-reloaders.md) — Injects temporary style assets via a development server to apply visual changes without browser refreshes.