### Installation

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex/README.md

Instructions for installing StyleX and its Babel plugin.

```APIDOC
## Installation

To start playing with StyleX without having to set up any build settings you can
install just two packages:

```sh
npm install --save @stylexjs/stylex
```

### Compiler

StyleX is designed to extract styles to a static CSS style sheet during an app's
build process. StyleX provides a Babel plugin along with plugin integrations for
Webpack, Rollup and NextJS.

```sh
npm install --save-dev @stylexjs/babel-plugin
```

For more information on working with the compiler, please see the documentation
for
[`@stylexjs/babel-plugin`](https://www.npmjs.com/package/@stylexjs/babel-plugin).
```

--------------------------------

### Install Dependencies

Source: https://github.com/facebook/stylex/blob/main/examples/example-vite/README.md

Run this command to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Run Development Server

Source: https://github.com/facebook/stylex/blob/main/packages/docs/README.md

Use these commands to start the development server for the Waku application. Ensure you have npm, pnpm, or yarn installed.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

--------------------------------

### Start Development Server

Source: https://github.com/facebook/stylex/blob/main/examples/example-react-router/README.md

Start the Vite development server with React Server Components and StyleX enabled.

```bash
npm run example:dev
```

--------------------------------

### Install StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex/README.md

Install the core StyleX package using npm.

```sh
npm install --save @stylexjs/stylex
```

--------------------------------

### Run Development Server

Source: https://github.com/facebook/stylex/blob/main/examples/example-nextjs/README.md

Commands to start the Next.js development server with StyleX integration.

```bash
npm run example:dev
# or
yarn example:dev
# or
pnpm example:dev
# or
bun example:dev
```

--------------------------------

### RedwoodSDK Example Commands

Source: https://github.com/facebook/stylex/blob/main/examples/example-redwoodsdk/README.md

Execute these commands within the `examples/example-redwoodsdk` directory to manage the Redwood development server, build, and preview.

```bash
# Run the Redwood dev server (client + worker) with live StyleX transforms
npm run example:dev

# Production build (client bundle + worker assets)
npm run example:build

# Preview the production build locally
npm run example:serve

# Additional Redwood helpers
npm run dev:init
npm run worker:run
npm run release   # builds via npm run example:build before deploying
```

--------------------------------

### Install StyleX Core and Unplugin

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-installation.md

Install the core StyleX runtime and the unplugin for Vite, Rollup, Webpack, esbuild, or Rspack. Always needed.

```bash
npm install @stylexjs/stylex

# For Vite, Rollup, Webpack, esbuild, or Rspack
npm install --save-dev @stylexjs/unplugin
```

--------------------------------

### Start Production Server

Source: https://github.com/facebook/stylex/blob/main/examples/example-react-router/README.md

Run the Express server using the production build output.

```bash
npm run example:start
```

--------------------------------

### Install @stylexjs/unplugin

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/unplugin/README.md

Install the unplugin as a development dependency.

```bash
npm i -D @stylexjs/unplugin
```

--------------------------------

### Install @stylexjs/cli

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/cli/README.md

Install the CLI as a development dependency using npm.

```sh
npm install --save-dev @stylexjs/cli
```

--------------------------------

### Start Svelte development server

Source: https://github.com/facebook/stylex/blob/main/examples/example-sveltekit/README.md

Run `npm run dev` to start the development server. Use the `-- --open` flag to automatically open the application in a new browser tab.

```sh
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Install StyleX CLI

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/cli.mdx

Install the StyleX CLI using npm or yarn. This is the first step to using the CLI for pre-transforming StyleX files.

```bash
npm install --save-dev @stylexjs/cli
yarn add --dev @stylexjs/cli
```

--------------------------------

### Install StyleX and Unplugin Dependencies

Source: https://github.com/facebook/stylex/blob/main/examples/example-webpack/README.md

Install the runtime StyleX package and development dependencies for the unplugin and ESLint plugin.

```bash
# Install runtime StyleX package
npm install @stylexjs/stylex

# Install dev dependencies
npm install -D @stylexjs/unplugin @stylexjs/eslint-plugin
```

--------------------------------

### Install @stylexjs/eslint-plugin

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/eslint-plugin/README.md

Install the ESLint plugin for StyleX as a development dependency.

```sh
npm install --save-dev @stylexjs/eslint-plugin
```

--------------------------------

### Install StyleX Babel Plugin

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex/README.md

Install the StyleX Babel plugin as a development dependency for the build process.

```sh
npm install --save-dev @stylexjs/babel-plugin
```

--------------------------------

### Install Babel and PostCSS Plugins

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/index.mdx

Install the necessary StyleX plugins for Babel and PostCSS, along with the PostCSS package itself. These are used for transforming StyleX styles during the build process.

```bash
npm install --save-dev @stylexjs/babel-plugin @stylexjs/postcss-plugin postcss
```

--------------------------------

### Install StyleX for Next.js

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-installation.md

Install the necessary StyleX plugins for Next.js projects. This includes the Babel plugin and PostCSS plugin.

```bash
npm install --save-dev @stylexjs/babel-plugin @stylexjs/postcss-plugin
```

--------------------------------

### Aliases Configuration Example

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/configuration/babel-plugin.mdx

The `aliases` option allows you to alias project directories to absolute paths, making it easier to import modules. This example shows how to alias a directory.

```javascript
aliases: {[key: string]: string | Array<string>} // Default: undefined

Example: `'@/components/*': [path.join(__dirname, './src/components/*')]`
```

--------------------------------

### Create a New StyleX App

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/create.mdx

Use this command to scaffold a new StyleX project with default settings. It installs dependencies and sets up the StyleX compiler.

```bash
npm create @stylexjs my-app
```

--------------------------------

### Create StyleX App Without Installing Dependencies

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/create.mdx

Scaffold a new StyleX project without automatically installing dependencies. This is useful if you prefer to manage installations manually or in a CI environment.

```bash
npm create @stylexjs my-app -- --no-install
```

--------------------------------

### Waku Development Commands

Source: https://github.com/facebook/stylex/blob/main/examples/example-waku/README.md

Commands to start the Waku development server with live StyleX transformations, build for production, and preview the production build.

```bash
# Start the Waku dev server with live StyleX transforms
npm run example:dev

# Production build (all Waku environments + aggregated StyleX CSS)
npm run example:build

# Preview the production build
npm run example:serve
```

--------------------------------

### Install @stylexjs/rollup-plugin with npm

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/rollup-plugin/README.md

Install the package as a development dependency using npm.

```bash
npm install --save-dev @stylexjs/rollup-plugin
```

--------------------------------

### Install PostCSS Plugin with npm

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/postcss-plugin/README.md

Install the @stylexjs/postcss-plugin and autoprefixer using npm. This is a development dependency.

```bash
npm install --save-dev @stylexjs/postcss-plugin autoprefixer
```

--------------------------------

### Install @stylexjs/rollup-plugin with yarn

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/rollup-plugin/README.md

Install the package as a development dependency using yarn.

```bash
yarn add --dev @stylexjs/rollup-plugin
```

--------------------------------

### Install PostCSS Plugin with Yarn

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/postcss-plugin/README.md

Install the @stylexjs/postcss-plugin and autoprefixer using Yarn. This is a development dependency.

```bash
yarn add --dev @stylexjs/postcss-plugin autoprefixer
```

--------------------------------

### StyleX Layer Ordering Example

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/configuration/babel-plugin.mdx

Demonstrates how StyleX layers are ordered with custom `before`, `after`, and `prefix` configurations. Generated CSS includes a layer-ordering header and wrapped rules.

```css
@layer reset, base, stylex.priority1, stylex.priority2, utilities;

@layer stylex.priority1 {
  /* low-priority rules */
}
@layer stylex.priority2 {
  /* higher-priority rules */
}
```

--------------------------------

### Example Usage of createTheme

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/javascript/createTheme.mdx

Demonstrates how to import necessary modules, define a theme using `createTheme` with custom overrides, and apply it to a React component's root element using `stylex.props()`.

```typescript
import * as stylex from '@stylexjs/stylex';
import { colors } from './vars.stylex.js';

const theme = stylex.createTheme(colors, {
  accentColor: 'red',
  backgroundColor: 'gray',
  lineColor: 'purple',
  textPrimaryColor: 'black',
  textSecondaryColor: 'brown',
});

function App() {
  return (
    <div {...stylex.props(theme /* , ... */)}>
      <ContentToBeThemed />
    </div>
  );
}
```

--------------------------------

### Configure esbuild with StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-installation.md

Configure esbuild to use the StyleX unplugin. This example shows a basic esbuild build script with StyleX integration.

```javascript
const esbuild = require('esbuild');
const stylex = require('@stylexjs/unplugin');

esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    stylex.esbuild({
      useCSSLayers: true,
    }),
  ],
});
```

--------------------------------

### StyleX CLI Configuration File

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/cli/README.md

Example of a JSON configuration file for the StyleX CLI, specifying input, output, bundle name, and watch mode.

```json
{
  "input": "./source",
  "output": "./src",
  "modules_EXPERIMENTAL": ["@stylexjs/open-props"],
  "styleXBundleName": "stylex_bundle.css",
  "watch": true
}
```

--------------------------------

### SX Prop Transformation Example

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/configuration/babel-plugin.mdx

This example demonstrates how the `sx` prop is transformed by the Babel plugin into `stylex.props()`. It shows the original JSX and the transformed output.

```tsx
<div sx={styles.root} />
```

```tsx
<div {...stylex.props(styles.root)} />
```

--------------------------------

### Rspack Commands

Source: https://github.com/facebook/stylex/blob/main/examples/example-rspack/README.md

Execute these commands to start a development server or build the project for production. The production build will include aggregated StyleX CSS.

```bash
# Start the Rspack dev server with StyleX transforms
npm run example:dev
```

```bash
# Production build with aggregated StyleX CSS in dist/index.css
npm run example:build
```

--------------------------------

### Import Sources Configuration Example

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/configuration/babel-plugin.mdx

The `importSources` option allows overriding the package name from which stylex can be imported, useful for custom module aliases. This example shows overriding with multiple sources.

```javascript
importSources: Array<string | { from: string; as: string }>; // Default: ['@stylexjs/stylex']

Example: `importSources: ['stylex', { from: '@acme/ui', as: 'css' }]`
```

--------------------------------

### Basic Usage of @stylexjs/atoms

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/atoms/README.md

Demonstrates how to import and use atomic styles from @stylexjs/atoms within a React component. Ensure both '@stylexjs/stylex' and '@stylexjs/atoms' are installed.

```javascript
import * as stylex from '@stylexjs/stylex';
import x from '@stylexjs/atoms';

function Example({ color }) {
  return (
    <div
      {...stylex.props(
        x.display.flex,
        x.flexDirection.column,
        x.padding._16px,
        x.width['calc(100% - 20cqi)'],
        x.color(color),
      )}
    />
  );
}

```

--------------------------------

### Run Storybook Development Server

Source: https://github.com/facebook/stylex/blob/main/examples/example-storybook/README.md

Execute this command to start the Storybook development server. Open http://localhost:6006 in your browser to view the Storybook interface. Edits to files in the 'stories/' directory will trigger automatic reloads.

```bash
npm run storybook
```

--------------------------------

### Define Basic Styles with StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/index.mdx

Use the `stylex.create()` API to define a set of styles for a component. This example shows basic width, max-width, and min-height properties.

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

const styles = stylex.create({
  root: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
});
```

--------------------------------

### Example use of positionTry

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/javascript/positionTry.mdx

Demonstrates how to use stylex.positionTry to create a fallback rule and apply it to an element's styles using positionTryFallbacks.

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

const fallback = stylex.positionTry({
  positionAnchor: '--anchor',
  top: '0',
  left: '0',
  width: '100px',
  height: '100px',
});

const styles = stylex.create({
  anchor: {
    positionTryFallbacks: fallback,
  },
});
```

--------------------------------

### Configure CSS Layers in PostCSS

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/configuration/postcss-plugin.mdx

Example of configuring the useCSSLayers option with before, after, and prefix settings in postcss.config.js. This allows for custom layer ordering and namespacing.

```javascript
// postcss.config.js
module.exports = {
  plugins: {
    '@stylexjs/postcss-plugin': {
      useCSSLayers: {
        before: ['reset', 'base'],
        after: ['utilities'],
        prefix: 'stylex',
      },
      // ...other options
    },
  },
};
```

--------------------------------

### Basic CSS Reset with StyleX

Source: https://github.com/facebook/stylex/blob/main/examples/example-esbuild/public/index.html

A fundamental CSS reset applied using StyleX. This example demonstrates basic styling for the body element, setting box-sizing, padding, and margin.

```css
@layer reset { body { box-sizing: border-box; padding: 0; margin: 0; } }
```

--------------------------------

### StyleX CLI Configuration

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/cli.mdx

Configure the StyleX CLI using a JSON or JSON5 file. This example shows common options like input/output directories, CSS bundle name, Babel presets, and StyleX aliases.

```json
{
  input: ['./source'],           // Where your StyleX source lives
  output: ['./src'],             // Where compiled files + CSS bundle are written
  cssBundleName: 'stylex_bundle.css',
  babelPresets: [
    ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
  ],
  styleXConfig: {
    aliases: {
      '@/*': ['./source/*'],
    },
  },
  // watch: true, // enable for incremental rebuilds
}
```

--------------------------------

### Media Query Ordering Example

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/blog/2025-07-31-Release-v0.15.0.mdx

Demonstrates how StyleX automatically transforms media queries for correct precedence. This feature is enabled by the `enableMediaQueryOrder` config option.

```tsx
const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (max-width: 1440px)': '1 / 4',
      '@media (max-width: 1024px)': '1 / 3',
      '@media (max-width: 768px)': '1 / -1',
    },
  },
});
```

```tsx
const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (max-width: 1440px) and (min-width: 1024.01px)': '1 / 4',
      '@media (min-width: 768.01px) and (max-width: 1024px)': '1 / 3',
      '@media (max-width: 768px)': '1 / -1',
    },
  },
});
```

--------------------------------

### Using stylex.attrs for Non-React Frameworks

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/javascript/props.mdx

Provides an example of using stylex.attrs to obtain 'class' and a string 'style' value directly, suitable for frameworks like Solid, Svelte, Qwik, and Vue.

```js
<div {...stylex.attrs(styles.root, condition && styles.active)} />
```

--------------------------------

### Project Commands

Source: https://github.com/facebook/stylex/blob/main/examples/example-vite-rsc/README.md

Scripts to run the development server, build all environments with aggregated StyleX CSS, and preview the production output. These commands are executed from the `examples/example-vite-rsc` directory.

```bash
# RSC-aware dev server with StyleX transforms
npm run example:dev

# Build all environments with aggregated StyleX CSS
npm run example:build

# Preview the production output
npm run example:serve
```

--------------------------------

### Example ESLint Configuration for @stylexjs/valid-styles

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/configuration/eslint-plugin.mdx

This JSON snippet shows how to configure the `@stylexjs/valid-styles` rule in an ESLint configuration file. It demonstrates setting custom limits for property values like `mask` and `fontSize`, and an array of allowed values for `padding`.

```json
{
  "rules": {
    "@stylexjs/valid-styles": [
      "error",
      {
        "propLimits": {
          "mask+([a-zA-Z])": {
            "limit": null,
            "reason": "Use the `mask` shorthand property instead."
          },
          "fontSize": {
            "limit": "number",
            "reason": "Only numeric font values are allowed"
          },
          "padding": {
            "limit": [0, 4, 8, 16, 32, 64],
            "reason": "Use a padding that conforms to the design system"
          }
        }
      }
    ]
  }
}
```

--------------------------------

### Run Production Build

Source: https://github.com/facebook/stylex/blob/main/examples/example-esbuild/README.md

Execute this command for a production bundle that includes StyleX-enriched CSS extraction.

```bash
# Production bundle + CSS extraction
npm run example:build
```

--------------------------------

### Create a Basic Theme with StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/types/Theme.mdx

Use `createTheme` to define a theme for a given `VarGroup`. This is the most common way to create themes for your application.

```tsx
import type { VarGroup } from '@stylexjs/stylex';
import * as stylex from '@stylexjs/stylex';

import { vars } from './vars.stylex';

export const theme: Theme<typeof vars> = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});
```

--------------------------------

### Create StyleX App with Specific Framework

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/create.mdx

Scaffold a new StyleX project and immediately select a framework like Next.js. This command bypasses the interactive prompt for framework selection.

```bash
npm create @stylexjs my-app -- --framework nextjs
```

--------------------------------

### Clean and Build for Production

Source: https://github.com/facebook/stylex/blob/main/examples/example-react-router/README.md

Optional: Clean the distribution directory and perform a production build.

```bash
rm -rf dist && npm run example:build
```

--------------------------------

### Create CSS Entrypoint for StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-installation.md

Create a CSS entrypoint file and import it into your app. The StyleX plugin will append its aggregated output to this file during the build.

```css
/* src/index.css */
@stylex;
```

--------------------------------

### Development and Production Commands

Source: https://github.com/facebook/stylex/blob/main/examples/example-webpack/README.md

Commands to run the development server, build for production, and serve the built files.

```bash
# Development server
npm run example:dev

# Production build
npm run example:build

# Serve built files
npm run example:serve
```

--------------------------------

### Configure Vite for StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/vite/sveltekit.mdx

Integrates StyleX into Vite configuration for SvelteKit projects. Ensure `@stylexjs/unplugin` is installed.

```typescript
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import stylex from '@stylexjs/unplugin';

export default defineConfig({
  plugins: [
    sveltekit(),
    {
      ...stylex.vite({
        useCSSLayers: true,
      }),
      enforce: undefined,
    },
  ],
});
```

--------------------------------

### StyleX Invalid Props Example

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/eslint-plugin/README.md

Demonstrates invalid usage of className or style props when spreading stylex.props() to avoid conflicts.

```jsx
<div {...stylex.props(styles.foo)} className="extra" />
```

```jsx
<div {...stylex.props(styles.foo)} style={{ color: 'red' }} />
```

--------------------------------

### Project Commands

Source: https://github.com/facebook/stylex/blob/main/examples/example-bun/README.md

Execute these commands for production bundling, development server with HMR, or serving the generated bundle.

```bash
# Production bundle + StyleX CSS extraction
npm run example:build
```

```bash
# Bun dev server with HMR at http://localhost:3000
npm run example:dev
```

```bash
# Serve the generated bundle (run example:build first)
npm run example:start
```

--------------------------------

### Configure Rollup with StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-installation.md

Configure Rollup to use the StyleX unplugin. This setup integrates StyleX processing into your Rollup build.

```javascript
import stylex from '@stylexjs/unplugin';

export default {
  plugins: [
    stylex.rollup({
      useCSSLayers: true,
    }),
  ],
};
```

--------------------------------

### StaticStyles<> Type

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex/README.md

Constrain styles to specific properties and values using StaticStyles<>. For example, limiting 'marginTop' to specific pixel values.

```tsx
type Props = {
  ...
  style?: StaticStyles<{
    marginTop?: 0 | 4 | 8;
  }>,
};
```

--------------------------------

### Component with Internal and Exported Styles

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex/README.md

Example demonstrating how to use internal styles within a component and export styles for external use.

```tsx
const styles = stylex.create({
  internalRoot: {
    padding: 10,
  },
  exportedRoot: {
    position: 'relative',
  },
});

function InternalComponent(props) {
  return (
    <div {...props} {...stylex.props(styles.internalRoot, props.style)} />
  );
}

export function ExportedComponent(props) {
  return <InternalComponent style={[styles.exportedRoot, props.style]} />; 
}
```

--------------------------------

### Create StyleX App with Custom Template

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/create.mdx

Scaffold a new StyleX project using a custom template from a GitHub repository. Specify the user, repository, and template path.

```bash
npm create @stylexjs my-app -- --template github:user/repo/template
```

--------------------------------

### Atomic Styles with Numeric Values

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/atoms/README.md

Shows how to use values that start with numbers for CSS properties. Prefix such values with an underscore, which is ignored by the compiler.

```javascript
x.padding._16px;
x.fontSize._1rem;

```

--------------------------------

### Create a new Svelte project

Source: https://github.com/facebook/stylex/blob/main/examples/example-sveltekit/README.md

Use `npx sv create` to initialize a new Svelte project. Specify a directory name to create the project in a subdirectory.

```sh
npx sv create

# create a new project in my-app
npx sv create my-app
```

--------------------------------

### Create StyleX App with npx

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/installation/create.mdx

Run the StyleX create package directly using npx, specifying a framework like Vite + React. This is an alternative to using npm create.

```bash
npx @stylexjs/create my-app --framework vite-react
```

--------------------------------

### Defining Variables in .stylex.js

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/javascript/defineVars.mdx

Example of how to define CSS variables using `defineVars` in a `.stylex.js` or `.stylex.ts` file, including custom named variables.

```APIDOC
## Defining Variables in .stylex.js

### Description
Demonstrates how to define global CSS variables, including custom named ones, by exporting them from a StyleX file.

### Method
N/A

### Endpoint
N/A

### Parameters
None

### Request Example
```tsx title="vars.stylex.js"
import * as stylex from '@stylexjs/stylex';

export const colors = stylex.defineVars({
  accent: 'blue',
  line: 'gray',
  '--background': 'black',
});
```

### Response
N/A
```

--------------------------------

### Bun Build Script with StyleX Plugin

Source: https://github.com/facebook/stylex/blob/main/examples/example-bun/README.md

Configure the production build script to integrate the StyleX esbuild plugin into Bun.build. Ensure `metafile: true` is set to allow the plugin to locate CSS assets.

```javascript
import stylex from '@stylexjs/unplugin';

await Bun.build({
  entrypoints: ['src/main.jsx'],
  outdir: 'dist',
  metafile: true,
  plugins: [
    stylex.esbuild({
      useCSSLayers: true,
      importSources: ['@stylexjs/stylex'],
    }),
  ],
});
```

--------------------------------

### Basic StyleX CLI Usage

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/cli/README.md

Use the stylex command with input and output directories specified.

```sh
stylex -i [input_directory] -o [output_directory]
```

--------------------------------

### Build Static Storybook

Source: https://github.com/facebook/stylex/blob/main/examples/example-storybook/README.md

Use this command to create a static build of the Storybook for deployment. This is useful for hosting the documentation on a web server.

```bash
npm run build-storybook
```

--------------------------------

### Accept any StyleX styles

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-authoring.md

Use StyleXStyles to accept any valid StyleX styles for a prop. No specific setup is required beyond importing the type.

```tsx
import type { StyleXStyles } from '@stylexjs/stylex';

type Props = {
  style?: StyleXStyles;
};
```

--------------------------------

### Generated CSS with CSS Layers

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/configuration/postcss-plugin.mdx

Example of the CSS output when useCSSLayers is enabled with custom configuration. It shows the @layer ordering header and layered rules.

```css
@layer reset, base, stylex.priority1, stylex.priority2, utilities;

@layer stylex.priority1 {
  /* low-priority rules */
}
@layer stylex.priority2 {
  /* higher-priority rules */
}
```

--------------------------------

### Create and Apply Local Styles

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/learn/thinking-in-stylex.mdx

Use `stylex.create` to define styles locally and `stylex.props` to apply them. This pattern compiles away to zero runtime cost.

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

const styles = stylex.create({
  red: { color: 'red' },
});
let a = stylex.props(styles.red);
```

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

let a = { className: 'x1e2nbdu' };
```

--------------------------------

### Define Basic Styles with stylex.create()

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/stylex/README.md

Define CSS rules using stylex.create. The names 'root' and 'highlighted' are arbitrary identifiers for the rules.

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

const styles = stylex.create({
  root: {
    width: '100%',
    color: 'rgb(60,60,60)',
  },
  highlighted: {
    color: 'yellow',
  },
});
```

--------------------------------

### TypeScript Setup for StyleX

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-installation.md

Import StyleX types for strict typing of style props. Ensure the imported type matches your style object structure.

```typescript
import type { StyleXStyles } from '@stylexjs/stylex';

type Props = {
  style?: StyleXStyles<{
    color?: string;
    backgroundColor?: string;
  }>;
};
```

--------------------------------

### Configure ESLint with StyleX Rules

Source: https://github.com/facebook/stylex/blob/main/packages/docs/static/llm/stylex-installation.md

Configure ESLint to use the StyleX plugin and enable specific validation rules. This example uses a Node.js module configuration.

```javascript
// .eslintrc.js
module.exports = {
  plugins: ['@stylexjs'],
  rules: {
    '@stylexjs/valid-styles': 'error',
    '@stylexjs/no-unused': 'error',
    '@stylexjs/valid-shorthands': 'warn',
    '@stylexjs/sort-keys': 'warn',
  },
};
```

--------------------------------

### Create Theme with Constrained Variables

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/types/VarGroup.mdx

Example of creating a theme using variables defined with constrained types. Values must match the specified union types.

```typescript
import * as stylex from '@stylexjs/stylex';
import { vars } from './vars.stylex';

export const theme1 = stylex.createTheme(vars, {
  color: 'red', // OK
  backgroundColor: 'blue', // OK
});

export const theme2 = stylex.createTheme(vars, {
  // Error: 'orange' is not assignable to 'red' | 'blue' | 'green' | 'yellow'
  color: 'orange',
});
```

--------------------------------

### Define CSS variables without types

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/javascript/types.mdx

Example of defining CSS variables using `defineVars` without specifying types. This is useful for basic variable definitions.

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

export const colors = stylex.defineVars({
  accent: {
    default: 'blue',
    '@media (prefers-color-scheme: dark)': 'lightblue',
  },
  sm: '4px',
});
```

--------------------------------

### Development and Build Commands

Source: https://github.com/facebook/stylex/blob/main/examples/example-vite-react/README.md

Commands for running the development server with HMR, performing a type-checked build with StyleX CSS aggregation, and serving the production build.

```bash
# HMR-ready dev server with StyleX transforms
npm run example:dev

# Type-check + Vite build + StyleX CSS aggregation
npm run example:build

# Preview the production build
npm run example:serve
```

--------------------------------

### Scaffold a New StyleX App

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/blog/2026-04-19-Release-v0.18.x.mdx

Use npx to create a new StyleX project from an official template. Supports various setups like Next.js, Vite, and more.

```bash
npx create-stylex-app my-app
```

--------------------------------

### Define CSS Custom Properties with stylex.defineVars

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/javascript/defineVars.mdx

Use `defineVars` to declare global CSS variables. Variables with names starting with `--` will use the provided name directly.

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

export const colors = stylex.defineVars({
  accent: 'blue',
  line: 'gray',
  '--background': 'black',
});
```

--------------------------------

### Define CSS variables with types

Source: https://github.com/facebook/stylex/blob/main/packages/docs/content/docs/api/javascript/types.mdx

Example of defining CSS variables using `defineVars` with `stylex.types` helpers for `color` and `length`. This ensures correct CSS syntax for the variables.

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

export const colors = stylex.defineVars({
  accent: stylex.types.color({
    default: 'blue',
    '@media (prefers-color-scheme: dark)': 'lightblue',
  }),
  sm: stylex.types.length('4px'),
});
```

--------------------------------

### Plugin Option: fileName

Source: https://github.com/facebook/stylex/blob/main/packages/@stylexjs/rollup-plugin/README.md

Specify the name of the output CSS file. Defaults to 'stylex.css'.

```javascript
fileName: string // Default: 'stylex.css'
```