vite-plugin-stylex

0.13.0 verified Mon Apr 27 auth: no javascript

Integrates StyleX CSS-in-JS library with Vite build tool. Current version 0.13.0 supports StyleX 0.9.3, Vite ^5.2.7. Active development with monthly releases. Differentiates by leveraging Vite's CSS pipeline for minification and post-processing, supporting LightningCSS, CSS layers, and automatic style generation. Requires manual Vite configuration unlike some auto-setup CSS-in-JS solutions.

Common errors

error Error: Cannot find module '@stylexjs/stylex' ↓

cause Missing peer dependency @stylexjs/stylex

fix

npm install @stylexjs/stylex

error TypeError: vitePluginStylex is not a function ↓

cause Importing as named export instead of default

fix

Use import vitePluginStylex from 'vite-plugin-stylex' (no braces)

error [plugin:vite-plugin-stylex] Stylex plugin is not a function ↓

cause Plugin used outside Vite's plugin array or misconfigured

fix

Ensure plugin is included in the plugins array: plugins: [vitePluginStylex()]

error Error: Vite 5.2.7 or higher is required ↓

cause Using an older version of Vite

fix

Upgrade to Vite ^5.2.7

Warnings

breaking BREAKING CHANGE: Plugin now requires Vite 5.2.7 or higher ↓

fix Upgrade to Vite ^5.2.7 and plugin >=0.9.0.

breaking BREAKING CHANGE: Plugin now delegates CSS processing to Vite, requiring Vite's CSS pipeline ↓

fix Ensure Vite's CSS handling is not disabled; CSS minification and post-processing are now Vite-controlled.

gotcha Alias path on Windows uses forward slashes ↓

fix Use @/_ or @src/_ instead of @\_ or @src\_ in path aliases.

gotcha Plugin uses Vite's waitForRequestsIdle experimental API for development ↓

fix May cause delay in style generation; update Vite if API changes.

deprecated Options like 'stylexImports' and 'unstable_moduleResolution' may change in future versions ↓

fix Monitor release notes for stable API replacements.

Install

npm install vite-plugin-stylex

yarn add vite-plugin-stylex

pnpm add vite-plugin-stylex

Imports

vitePluginStylex

wrong

import { vitePluginStylex } from 'vite-plugin-stylex'

correct

import vitePluginStylex from 'vite-plugin-stylex'

Default export; named import will cause undefined.

UserConfig export
```
import type { UserConfig } from 'vite'
```
TypeScript users should import Vite's UserConfig separately; this plugin does not re-export it.

CommonJS require

wrong

const vitePluginStylex = require('vite-plugin-stylex')

correct

const vitePluginStylex = require('vite-plugin-stylex').default

ESM-only package; require() returns module with default export, so .default is needed.

Quickstart

Minimal Vite config with vite-plugin-stylex showing common options: CSS layers, StyleX imports, and module resolution for CommonJS compatibility.

import { defineConfig } from 'vite';
import vitePluginStylex from 'vite-plugin-stylex';

export default defineConfig({
  plugins: [
    vitePluginStylex({
      useCSSLayers: true,
      stylexImports: ['@stylexjs/stylex'],
      unstable_moduleResolution: {
        type: 'commonJS',
        rootDir: import.meta.url,
      },
    }),
  ],
});