Universal bundler plugin for StyleX using unplugin
npm install @stylexjs/unpluginUniversal bundler plugin for StyleX built on top of unplugin. It compiles StyleX at build time, aggregates CSS from all transformed modules, and appends the result into an existing CSS asset produced by your bundler (or emits a stable fallback when none exists).
- Adapters for Vite/Rollup, Webpack/Rspack, and esbuild.
- Designed to keep StyleX output consolidated and deterministic.
- Dev helpers expose virtual modules for hot CSS reloads: virtual:stylex:runtime (JS) and /virtual:stylex.css (CSS) or virtual:stylex:css-only (JS shim).
```
npm i -D @stylexjs/unplugin
`ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import stylex from '@stylexjs/unplugin';
export default defineConfig({
plugins: [
// devMode: 'full' | 'css-only' | 'off'
// externalPackages: ['lib-using-stylex'] // optional manual include
stylex.vite(),
react(),
],
});
`
Notes:
- The plugin auto-discovers installed packages that depend on @stylexjs/stylex (or any configured importSources) and excludes them from optimizeDeps/ssr.optimizeDeps so their StyleX code is transformed. Use externalPackages to force-deopt additional deps.devMode: 'full'
- injects a lightweight runtime that refetches the dev CSS endpoint on HMR. css-only serves just the CSS endpoint. off disables dev middleware/virtual modules.
- In dev, inject the virtual CSS + runtime from your HTML shell. If a
`
If your environment can safely load the runtime via a virtual module ID, replace
the inline script with