Vite + React

Both examples/example-vite (JavaScript) and examples/example-vite-react (TypeScript) demonstrate wiring StyleX into a Vite + React app via @stylexjs/unplugin. StyleX styles are compiled at build time and appended to the CSS emitted by Vite.

Vite configuration

// vite.config.ts or vite.config.mjs
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import stylex from '@stylexjs/unplugin';

export default defineConfig({
  plugins: [
    stylex.vite({
      useCSSLayers: true,
      // ... other StyleX configuration options
    }),
    react()
  ],
});

Keep the StyleX plugin before @vitejs/plugin-react to preserve Fast Refresh.

CSS entrypoint

Import a CSS file from the app root (for example src/index.css) so Vite emits an asset. During vite build the StyleX plugin appends its aggregated output to that CSS file, avoiding extra requests in production.

ESLint in the TypeScript example already includes the StyleX lint rules and tsconfigRootDir configuration.