@stylexjs/unplugin 0.17.0 → 0.17.2

package/README.md

@@ -1,9 +1,10 @@
 # @stylexjs/unplugin
 
-Universal 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.
+Universal 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).
 
-- Works with Vite/Rollup and Webpack/Rspack via unplugin.
-- Ensures a single CSS output for StyleX by injecting into one existing CSS file.
+- 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).
 
 ## Install
 
@@ -11,56 +12,123 @@ Universal bundler plugin for StyleX built on top of unplugin. It compiles StyleX
 npm i -D @stylexjs/unplugin
 ```
 
-## Usage
+## Usage by bundler
 
-Vite:
+### Vite
 
-```js
+```ts
 // vite.config.ts
-import { defineConfig } from 'vite'
-import stylex from '@stylexjs/unplugin'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import stylex from '@stylexjs/unplugin';
 
 export default defineConfig({
-  plugins: [stylex()]
-})
+  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 `<script src="/@id/virtual:stylex:runtime">` tag is blocked by CORS (some frameworks proxy assets differently), call `import('virtual:stylex:runtime')` or `import('virtual:stylex:css-only')` from a tiny client shim instead.
+- Ensure your app produces a CSS asset (default Vite behavior). If none exists, the plugin writes `stylex.css` in the output.
+
+Dev HTML injection (baseline):
+
+```html
+<!-- Add in your HTML shell when import.meta.env.DEV -->
+<link rel="stylesheet" href="/virtual:stylex.css" />
+<script type="module">
+  import('virtual:stylex:runtime'); // or 'virtual:stylex:css-only' if you only need CSS
+</script>
 ```
 
-Rollup:
+If your environment can safely load the runtime via a virtual module ID, replace
+the inline script with `<script type="module" src="/@id/virtual:stylex:runtime">`.
+
+### Rollup
 
 ```js
 // rollup.config.mjs
-import stylex from '@stylexjs/unplugin'
+import stylex from '@stylexjs/unplugin';
 
 export default {
-  // ...
-  plugins: [stylex()],
-}
+  plugins: [stylex.rollup()],
+};
 ```
 
-Webpack:
+### Webpack
 
 ```js
 // webpack.config.js
-const stylex = require('@stylexjs/unplugin').default
+const stylex = require('@stylexjs/unplugin').default;
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-  // ...
-  plugins: [stylex()],
-}
+  module: {
+    rules: [
+      // your JS/TS loader here
+      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
+    ],
+  },
+  plugins: [stylex.webpack({ useCSSLayers: true }), new MiniCssExtractPlugin()],
+};
 ```
 
-## Options
+### Rspack
+
+```js
+const rspack = require('@rspack/core');
+const stylex = require('@stylexjs/unplugin').default;
 
-- `dev`: boolean, defaults based on `NODE_ENV`.
+module.exports = {
+  plugins: [
+    stylex.rspack(),
+    new rspack.CssExtractRspackPlugin({ filename: 'index.css' }),
+  ],
+};
+```
+
+### esbuild
+
+```js
+import esbuild from 'esbuild';
+import stylex from '@stylexjs/unplugin';
+
+esbuild.build({
+  entryPoints: ['src/App.jsx'],
+  bundle: true,
+  metafile: true, // lets the plugin locate CSS outputs if any
+  plugins: [
+    stylex.esbuild({
+      importSources: ['@stylexjs/stylex'],
+      useCSSLayers: true,
+    }),
+  ],
+});
+```
+
+## Options (shared)
+
+- `dev`: boolean, defaults based on `NODE_ENV`/`BABEL_ENV`.
 - `importSources`: array of import sources to scan, default `['stylex', '@stylexjs/stylex']`.
 - `useCSSLayers`: boolean, emit CSS layers.
-- `babelConfig`: `{ plugins, presets }` to merge.
-- `unstable_moduleResolution`: forward to StyleX Babel plugin.
-- `lightningcssOptions`: pass-through options for lightningcss.
-- `cssInjectionTarget`: optional `(fileName: string) => boolean` to pick a CSS asset to append to. If not provided, the plugin picks `index.css`, `style.css`, or the first `.css` asset.
+- `babelConfig`: `{ plugins, presets }` to merge into the internal Babel call.
+- `unstable_moduleResolution`: forwarded to the StyleX Babel plugin.
+- `lightningcssOptions`: pass-through options for `lightningcss`.
+- `cssInjectionTarget`: `(fileName: string) => boolean` to pick a CSS asset to append to. Defaults to `index.css`, `style.css`, or the first `.css` asset.
+- `externalPackages`: package names inside `node_modules` that should be treated like app code (useful if they ship StyleX). They are excluded from Vite dependency optimization.
+- `devMode`: `'full' | 'css-only' | 'off'` (Vite only).
+- `devPersistToDisk`: persist collected rules to `node_modules/.stylex/rules.json` in dev so multiple Vite environments can share CSS.
 
 ## Notes
 
-- The plugin always aggregates all StyleX CSS across modules in a compilation and injects it into one CSS asset. With multiple outputs (e.g. client/SSR), each output will get its own aggregated CSS.
-- If the bundler does not produce any CSS assets, the plugin logs a warning and skips injection.
-
+- With multiple outputs (e.g. client/SSR), each output gets its own aggregated StyleX CSS.
+- If the bundler produces no CSS assets, the plugin emits a fallback `stylex.css` (often in `assets/` for Rollup/Vite or alongside esbuild outputs).
+- When using extraction plugins (Webpack/Rspack), ensure they run so there is a CSS asset to append to; otherwise the fallback file is created.
+- Dev HMR CSS hookup: add `<link rel="stylesheet" href="/virtual:stylex.css" />` to your shell in dev. For the JS runtime, prefer `import('virtual:stylex:runtime')` (or `virtual:stylex:css-only` if you only need CSS) from a local client shim when direct `<script src="/@id/virtual:stylex:runtime">` fails due to CORS/proxying.

package/lib/es/index.mjs

@@ -7,6 +7,7 @@ import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
 import path from 'node:path';
 import fs from 'node:fs';
 import fsp from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import { transform as lightningTransform } from 'lightningcss';
 import browserslist from 'browserslist';
 import { browserslistToTargets } from 'lightningcss';
@@ -38,7 +39,84 @@ function processCollectedRulesToCSS(rules, options) {
   });
   return code.toString();
 }
-const unpluginInstance = createUnplugin((userOptions = {}) => {
+function readJSON(file) {
+  try {
+    const content = fs.readFileSync(file, 'utf8');
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+function findNearestPackageJson(startDir) {
+  let dir = startDir;
+  for (;;) {
+    const candidate = path.join(dir, 'package.json');
+    if (fs.existsSync(candidate)) return candidate;
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+function toPackageName(importSource) {
+  const source = typeof importSource === 'string' ? importSource : importSource?.from;
+  if (!source || source.startsWith('.') || source.startsWith('/')) return null;
+  if (source.startsWith('@')) {
+    const [scope, name] = source.split('/');
+    if (scope && name) return `${scope}/${name}`;
+  }
+  const [pkg] = source.split('/');
+  return pkg || null;
+}
+function hasStylexDependency(manifest, targetPackages) {
+  if (!manifest || typeof manifest !== 'object') return false;
+  const depFields = ['dependencies', 'peerDependencies', 'optionalDependencies'];
+  for (const field of depFields) {
+    const deps = manifest[field];
+    if (!deps || typeof deps !== 'object') continue;
+    for (const name of Object.keys(deps)) {
+      if (targetPackages.has(name)) return true;
+    }
+  }
+  return false;
+}
+function discoverStylexPackages({
+  importSources,
+  explicitPackages,
+  rootDir,
+  resolver
+}) {
+  const targetPackages = new Set(importSources.map(toPackageName).filter(Boolean).concat(['@stylexjs/stylex']));
+  const found = new Set(explicitPackages || []);
+  const pkgJsonPath = findNearestPackageJson(rootDir);
+  if (!pkgJsonPath) return Array.from(found);
+  const pkgDir = path.dirname(pkgJsonPath);
+  const pkgJson = readJSON(pkgJsonPath);
+  if (!pkgJson) return Array.from(found);
+  const depFields = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'];
+  const deps = new Set();
+  for (const field of depFields) {
+    const entries = pkgJson[field];
+    if (!entries || typeof entries !== 'object') continue;
+    for (const name of Object.keys(entries)) deps.add(name);
+  }
+  for (const dep of deps) {
+    let manifestPath = null;
+    try {
+      manifestPath = resolver.resolve(`${dep}/package.json`, {
+        paths: [pkgDir]
+      });
+    } catch {}
+    if (!manifestPath) continue;
+    const manifest = readJSON(manifestPath);
+    if (hasStylexDependency(manifest, targetPackages)) {
+      found.add(dep);
+    }
+  }
+  return Array.from(found);
+}
+const unpluginInstance = createUnplugin((userOptions = {}, metaOptions) => {
+  const framework = metaOptions?.framework;
   const {
     dev = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development',
     unstable_moduleResolution = {
@@ -53,8 +131,10 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
     useCSSLayers = false,
     lightningcssOptions,
     cssInjectionTarget,
+    externalPackages = [],
     devPersistToDisk = false,
     devMode = 'full',
+    treeshakeCompensation = ['vite', 'rollup', 'rolldown'].includes(framework),
     ...stylexOptions
   } = userOptions;
   const stylexRulesById = new Map();
@@ -77,6 +157,14 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
   }
   let viteServer = null;
   let viteOutDir = null;
+  const nearestPkgJson = findNearestPackageJson(process.cwd());
+  const requireFromCwd = nearestPkgJson ? createRequire(nearestPkgJson) : createRequire(path.join(process.cwd(), 'package.json'));
+  const stylexPackages = discoverStylexPackages({
+    importSources,
+    explicitPackages: externalPackages,
+    rootDir: nearestPkgJson ? path.dirname(nearestPkgJson) : process.cwd(),
+    resolver: requireFromCwd
+  });
   function findNearestNodeModules(startDir) {
     let dir = startDir;
     for (;;) {
@@ -103,6 +191,8 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
         isTSX: true
       }], jsxSyntaxPlugin, stylexBabelPlugin.withOptions({
         ...stylexOptions,
+        importSources,
+        treeshakeCompensation,
         dev,
         unstable_moduleResolution
       })],
@@ -271,6 +361,23 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
       } else {}
     },
     vite: devMode === 'off' ? undefined : {
+      config(config) {
+        if (!stylexPackages || stylexPackages.length === 0) return;
+        const addExcludes = (existing = []) => Array.from(new Set([...existing, ...stylexPackages]));
+        return {
+          optimizeDeps: {
+            ...(config?.optimizeDeps || {}),
+            exclude: addExcludes(config?.optimizeDeps?.exclude || [])
+          },
+          ssr: {
+            ...(config?.ssr || {}),
+            optimizeDeps: {
+              ...(config?.ssr?.optimizeDeps || {}),
+              exclude: addExcludes(config?.ssr?.optimizeDeps?.exclude || [])
+            }
+          }
+        };
+      },
       configResolved(config) {
         try {
           viteOutDir = config.build?.outDir || viteOutDir;
@@ -310,15 +417,15 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
         server.httpServer?.once('close', () => clearInterval(interval));
       },
       resolveId(id) {
-        if (devMode === 'full' && id === 'virtual:stylex:runtime') return id;
-        if (devMode === 'css-only' && id === 'virtual:stylex:css-only') return id;
+        if (devMode === 'full' && id.includes('virtual:stylex:runtime')) return id;
+        if (devMode === 'css-only' && id.includes('virtual:stylex:css-only')) return id;
         return null;
       },
       load(id) {
-        if (devMode === 'full' && id === 'virtual:stylex:runtime') {
+        if (devMode === 'full' && id.includes('virtual:stylex:runtime')) {
           return VIRTUAL_STYLEX_RUNTIME_SCRIPT;
         }
-        if (devMode === 'css-only' && id === 'virtual:stylex:css-only') {
+        if (devMode === 'css-only' && id.includes('virtual:stylex:css-only')) {
           return VIRTUAL_STYLEX_CSS_ONLY_SCRIPT;
         }
         return null;
@@ -326,24 +433,26 @@ const unpluginInstance = createUnplugin((userOptions = {}) => {
       transformIndexHtml() {
         if (devMode !== 'full') return null;
         if (!viteServer) return null;
+        const base = viteServer.config.base ?? '';
         return [{
           tag: 'script',
           attrs: {
             type: 'module',
-            src: '/@id/virtual:stylex:runtime'
+            src: path.join(base, '/@id/virtual:stylex:runtime')
           },
           injectTo: 'head'
         }, {
           tag: 'link',
           attrs: {
             rel: 'stylesheet',
-            href: DEV_CSS_PATH
+            href: path.join(base, DEV_CSS_PATH)
           },
           injectTo: 'head'
         }];
       },
       handleHotUpdate(ctx) {
-        const cssMod = ctx.server.moduleGraph.getModuleById('virtual:stylex:css-module');
+        const base = ctx.server.config.base ?? '';
+        const cssMod = ctx.server.moduleGraph.getModuleById(path.join(base, 'virtual:stylex:css-module'));
         if (cssMod) {
           ctx.server.moduleGraph.invalidateModule(cssMod);
         }

package/lib/index.d.ts

@@ -1,4 +1,17 @@
 import { type UnpluginInstance } from 'unplugin';
+import type { Options as StyleXOptions } from '@stylexjs/babel-plugin';
+import type { TransformOptions as LightningcssOptions } from 'lightningcss';
 
 export default unplugin;
-declare const unplugin: UnpluginInstance<any, boolean>;
+
+type UserOptions = StyleXOptions & {
+  useCSSLayers?: boolean;
+  enableLTRRTLComments?: boolean;
+  legacyDisableLayers?: boolean;
+  lightningcssOptions?: LightningcssOptions;
+  cssInjectionTarget?: (filepath: string) => boolean;
+  devPersistToDisk?: boolean;
+  devMode?: 'full' | 'css-only' | 'off';
+};
+
+declare const unplugin: UnpluginInstance<Partial<UserOptions>, false>;

package/lib/index.js

@@ -13,6 +13,7 @@ var _pluginSyntaxTypescript = _interopRequireDefault(require("@babel/plugin-synt
 var _nodePath = _interopRequireDefault(require("node:path"));
 var _nodeFs = _interopRequireDefault(require("node:fs"));
 var _promises = _interopRequireDefault(require("node:fs/promises"));
+var _nodeModule = require("node:module");
 var _lightningcss = require("lightningcss");
 var _browserslist = _interopRequireDefault(require("browserslist"));
 var _devInjectMiddleware = require("./dev-inject-middleware");
@@ -44,7 +45,84 @@ function processCollectedRulesToCSS(rules, options) {
   });
   return code.toString();
 }
-const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}) => {
+function readJSON(file) {
+  try {
+    const content = _nodeFs.default.readFileSync(file, 'utf8');
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+function findNearestPackageJson(startDir) {
+  let dir = startDir;
+  for (;;) {
+    const candidate = _nodePath.default.join(dir, 'package.json');
+    if (_nodeFs.default.existsSync(candidate)) return candidate;
+    const parent = _nodePath.default.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+function toPackageName(importSource) {
+  const source = typeof importSource === 'string' ? importSource : importSource?.from;
+  if (!source || source.startsWith('.') || source.startsWith('/')) return null;
+  if (source.startsWith('@')) {
+    const [scope, name] = source.split('/');
+    if (scope && name) return `${scope}/${name}`;
+  }
+  const [pkg] = source.split('/');
+  return pkg || null;
+}
+function hasStylexDependency(manifest, targetPackages) {
+  if (!manifest || typeof manifest !== 'object') return false;
+  const depFields = ['dependencies', 'peerDependencies', 'optionalDependencies'];
+  for (const field of depFields) {
+    const deps = manifest[field];
+    if (!deps || typeof deps !== 'object') continue;
+    for (const name of Object.keys(deps)) {
+      if (targetPackages.has(name)) return true;
+    }
+  }
+  return false;
+}
+function discoverStylexPackages({
+  importSources,
+  explicitPackages,
+  rootDir,
+  resolver
+}) {
+  const targetPackages = new Set(importSources.map(toPackageName).filter(Boolean).concat(['@stylexjs/stylex']));
+  const found = new Set(explicitPackages || []);
+  const pkgJsonPath = findNearestPackageJson(rootDir);
+  if (!pkgJsonPath) return Array.from(found);
+  const pkgDir = _nodePath.default.dirname(pkgJsonPath);
+  const pkgJson = readJSON(pkgJsonPath);
+  if (!pkgJson) return Array.from(found);
+  const depFields = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'];
+  const deps = new Set();
+  for (const field of depFields) {
+    const entries = pkgJson[field];
+    if (!entries || typeof entries !== 'object') continue;
+    for (const name of Object.keys(entries)) deps.add(name);
+  }
+  for (const dep of deps) {
+    let manifestPath = null;
+    try {
+      manifestPath = resolver.resolve(`${dep}/package.json`, {
+        paths: [pkgDir]
+      });
+    } catch {}
+    if (!manifestPath) continue;
+    const manifest = readJSON(manifestPath);
+    if (hasStylexDependency(manifest, targetPackages)) {
+      found.add(dep);
+    }
+  }
+  return Array.from(found);
+}
+const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}, metaOptions) => {
+  const framework = metaOptions?.framework;
   const {
     dev = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development',
     unstable_moduleResolution = {
@@ -59,8 +137,10 @@ const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}) => {
     useCSSLayers = false,
     lightningcssOptions,
     cssInjectionTarget,
+    externalPackages = [],
     devPersistToDisk = false,
     devMode = 'full',
+    treeshakeCompensation = ['vite', 'rollup', 'rolldown'].includes(framework),
     ...stylexOptions
   } = userOptions;
   const stylexRulesById = new Map();
@@ -83,6 +163,14 @@ const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}) => {
   }
   let viteServer = null;
   let viteOutDir = null;
+  const nearestPkgJson = findNearestPackageJson(process.cwd());
+  const requireFromCwd = nearestPkgJson ? (0, _nodeModule.createRequire)(nearestPkgJson) : (0, _nodeModule.createRequire)(_nodePath.default.join(process.cwd(), 'package.json'));
+  const stylexPackages = discoverStylexPackages({
+    importSources,
+    explicitPackages: externalPackages,
+    rootDir: nearestPkgJson ? _nodePath.default.dirname(nearestPkgJson) : process.cwd(),
+    resolver: requireFromCwd
+  });
   function findNearestNodeModules(startDir) {
     let dir = startDir;
     for (;;) {
@@ -109,6 +197,8 @@ const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}) => {
         isTSX: true
       }], _pluginSyntaxJsx.default, _babelPlugin.default.withOptions({
         ...stylexOptions,
+        importSources,
+        treeshakeCompensation,
         dev,
         unstable_moduleResolution
       })],
@@ -277,6 +367,23 @@ const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}) => {
       } else {}
     },
     vite: devMode === 'off' ? undefined : {
+      config(config) {
+        if (!stylexPackages || stylexPackages.length === 0) return;
+        const addExcludes = (existing = []) => Array.from(new Set([...existing, ...stylexPackages]));
+        return {
+          optimizeDeps: {
+            ...(config?.optimizeDeps || {}),
+            exclude: addExcludes(config?.optimizeDeps?.exclude || [])
+          },
+          ssr: {
+            ...(config?.ssr || {}),
+            optimizeDeps: {
+              ...(config?.ssr?.optimizeDeps || {}),
+              exclude: addExcludes(config?.ssr?.optimizeDeps?.exclude || [])
+            }
+          }
+        };
+      },
       configResolved(config) {
         try {
           viteOutDir = config.build?.outDir || viteOutDir;
@@ -316,15 +423,15 @@ const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}) => {
         server.httpServer?.once('close', () => clearInterval(interval));
       },
       resolveId(id) {
-        if (devMode === 'full' && id === 'virtual:stylex:runtime') return id;
-        if (devMode === 'css-only' && id === 'virtual:stylex:css-only') return id;
+        if (devMode === 'full' && id.includes('virtual:stylex:runtime')) return id;
+        if (devMode === 'css-only' && id.includes('virtual:stylex:css-only')) return id;
         return null;
       },
       load(id) {
-        if (devMode === 'full' && id === 'virtual:stylex:runtime') {
+        if (devMode === 'full' && id.includes('virtual:stylex:runtime')) {
           return _consts.VIRTUAL_STYLEX_RUNTIME_SCRIPT;
         }
-        if (devMode === 'css-only' && id === 'virtual:stylex:css-only') {
+        if (devMode === 'css-only' && id.includes('virtual:stylex:css-only')) {
           return _consts.VIRTUAL_STYLEX_CSS_ONLY_SCRIPT;
         }
         return null;
@@ -332,24 +439,26 @@ const unpluginInstance = (0, _unplugin.createUnplugin)((userOptions = {}) => {
       transformIndexHtml() {
         if (devMode !== 'full') return null;
         if (!viteServer) return null;
+        const base = viteServer.config.base ?? '';
         return [{
           tag: 'script',
           attrs: {
             type: 'module',
-            src: '/@id/virtual:stylex:runtime'
+            src: _nodePath.default.join(base, '/@id/virtual:stylex:runtime')
           },
           injectTo: 'head'
         }, {
           tag: 'link',
           attrs: {
             rel: 'stylesheet',
-            href: _consts.DEV_CSS_PATH
+            href: _nodePath.default.join(base, _consts.DEV_CSS_PATH)
           },
           injectTo: 'head'
         }];
       },
       handleHotUpdate(ctx) {
-        const cssMod = ctx.server.moduleGraph.getModuleById('virtual:stylex:css-module');
+        const base = ctx.server.config.base ?? '';
+        const cssMod = ctx.server.moduleGraph.getModuleById(_nodePath.default.join(base, 'virtual:stylex:css-module'));
         if (cssMod) {
           ctx.server.moduleGraph.invalidateModule(cssMod);
         }

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@stylexjs/unplugin",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
   "description": "Universal bundler plugin for StyleX using unplugin",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -31,14 +28,14 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "unplugin": "^1.7.1"
+    "unplugin": "^2.3.11"
   },
   "dependencies": {
     "@babel/core": "^7.26.8",
     "@babel/plugin-syntax-flow": "^7.26.0",
     "@babel/plugin-syntax-jsx": "^7.25.9",
     "@babel/plugin-syntax-typescript": "^7.25.9",
-    "@stylexjs/babel-plugin": "0.17.0",
+    "@stylexjs/babel-plugin": "0.17.2",
     "browserslist": "^4.24.0",
     "lightningcss": "^1.29.1"
   },