vite-plugin-stylex-dev

0.8.0 verified Mon Apr 27 auth: no javascript

An unofficial Vite plugin for integrating Stylex, a CSS-in-JS library from Meta. Version 0.8.0 is the current stable release, updated regularly on GitHub. This plugin provides HMR support, CSS automatic injection (via virtual module), and customization through babelConfig and CSS order control. It differs from other Stylex integrations by being Vite-specific and offering manual CSS ordering, making it suitable for SSR frameworks. It requires Stylex as a peer dependency and is ESM-only, targeting modern development workflows.

Common errors

error Cannot find module 'vite-plugin-stylex-dev' or its corresponding type declarations. ↓

cause TypeScript not recognizing the plugin's types, usually due to missing @types or incorrect module resolution.

fix

Ensure the package is installed: npm install -D vite-plugin-stylex-dev. Add 'vite-plugin-stylex-dev' to 'types' in tsconfig.json if needed.

error SyntaxError: The requested module 'vite-plugin-stylex-dev' does not provide an export named 'default' ↓

cause Using default import instead of named import.

fix

Use import { stylex } from 'vite-plugin-stylex-dev' (curly braces).

error ReferenceError: __import_star is not defined ↓

cause Using the plugin with a CJS environment (e.g., Node.js with type: 'commonjs').

fix

Set 'type': 'module' in package.json or use .mjs extension for Vite config.

Warnings

breaking This is an unofficial plugin not affiliated with Meta. Breaking changes may occur without notice. ↓

fix Pin exact version and read migration notes in the repo.

deprecated The 'unstable_moduleResolution' option is experimental and may be removed or changed in future versions. ↓

fix Monitor the Stylex documentation for official module resolution support.

gotcha Cannot use CommonJS require() for this plugin. It is ESM-only and will throw an error if required. ↓

fix Use ESM import syntax: import { stylex } from 'vite-plugin-stylex-dev'.

gotcha If 'manuallyControlCssOrder' is false (default), you must import 'virtual:stylex.css' in your entry point, or CSS will not be injected. ↓

fix Add import 'virtual:stylex.css' in your entry file or set manuallyControlCssOrder: true.

gotcha The plugin does not work with Vite's 'css.modules' or other CSS preprocessing; it relies on its Babel transform. ↓

fix Disable competing CSS modules or PostCSS config if conflicts arise.

Install

npm install vite-plugin-stylex-dev

yarn add vite-plugin-stylex-dev

pnpm add vite-plugin-stylex-dev

Imports

stylex
wrong
```
import stylex from 'vite-plugin-stylex-dev'
```
correct
```
import { stylex } from 'vite-plugin-stylex-dev'
```
Named export, not default. The plugin is ESM-only, no CommonJS require() available.

StylexConfig

wrong

import { StylexConfig } from 'vite-plugin-stylex-dev'

correct

import type { StylexConfig } from 'vite-plugin-stylex-dev'

TypeScript type, import using 'import type' to avoid runtime inclusion.

virtual:stylex.css
```
import 'virtual:stylex.css'
```
Virtual module, no explicit export. Import as side effect when not using manuallyControlCssOrder.

Quickstart

Sets up the vite-plugin-stylex-dev plugin in Vite config and imports the virtual CSS module in the entry file for automatic style injection.

// vite.config.ts
import { defineConfig } from 'vite';
import { stylex } from 'vite-plugin-stylex-dev';

export default defineConfig({
  plugins: [stylex()]
});

// In your entry file
import 'virtual:stylex.css';