{"id":22857,"library":"vite-plugin-stylex-dev","title":"vite-plugin-stylex-dev","description":"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.","status":"active","version":"0.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/nonzzz/vite-plugin-stylex","tags":["javascript","stylex","experimental","css-in-js","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-stylex-dev","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-stylex-dev","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-stylex-dev","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for runtime style generation","package":"@stylexjs/stylex","optional":false}],"imports":[{"note":"Named export, not default. The plugin is ESM-only, no CommonJS require() available.","wrong":"import stylex from 'vite-plugin-stylex-dev'","symbol":"stylex","correct":"import { stylex } from 'vite-plugin-stylex-dev'"},{"note":"TypeScript type, import using 'import type' to avoid runtime inclusion.","wrong":"import { StylexConfig } from 'vite-plugin-stylex-dev'","symbol":"StylexConfig","correct":"import type { StylexConfig } from 'vite-plugin-stylex-dev'"},{"note":"Virtual module, no explicit export. Import as side effect when not using manuallyControlCssOrder.","wrong":null,"symbol":"virtual:stylex.css","correct":"import 'virtual:stylex.css'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { stylex } from 'vite-plugin-stylex-dev';\n\nexport default defineConfig({\n  plugins: [stylex()]\n});\n\n// In your entry file\nimport 'virtual:stylex.css';","lang":"typescript","description":"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."},"warnings":[{"fix":"Pin exact version and read migration notes in the repo.","message":"This is an unofficial plugin not affiliated with Meta. Breaking changes may occur without notice.","severity":"breaking","affected_versions":">=0.0"},{"fix":"Monitor the Stylex documentation for official module resolution support.","message":"The 'unstable_moduleResolution' option is experimental and may be removed or changed in future versions.","severity":"deprecated","affected_versions":">=0.0"},{"fix":"Use ESM import syntax: import { stylex } from 'vite-plugin-stylex-dev'.","message":"Cannot use CommonJS require() for this plugin. It is ESM-only and will throw an error if required.","severity":"gotcha","affected_versions":">=0.0"},{"fix":"Add import 'virtual:stylex.css' in your entry file or set manuallyControlCssOrder: true.","message":"If 'manuallyControlCssOrder' is false (default), you must import 'virtual:stylex.css' in your entry point, or CSS will not be injected.","severity":"gotcha","affected_versions":">=0.0"},{"fix":"Disable competing CSS modules or PostCSS config if conflicts arise.","message":"The plugin does not work with Vite's 'css.modules' or other CSS preprocessing; it relies on its Babel transform.","severity":"gotcha","affected_versions":">=0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"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.","cause":"TypeScript not recognizing the plugin's types, usually due to missing @types or incorrect module resolution.","error":"Cannot find module 'vite-plugin-stylex-dev' or its corresponding type declarations."},{"fix":"Use import { stylex } from 'vite-plugin-stylex-dev' (curly braces).","cause":"Using default import instead of named import.","error":"SyntaxError: The requested module 'vite-plugin-stylex-dev' does not provide an export named 'default'"},{"fix":"Set 'type': 'module' in package.json or use .mjs extension for Vite config.","cause":"Using the plugin with a CJS environment (e.g., Node.js with type: 'commonjs').","error":"ReferenceError: __import_star is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}