@stylexjs/unplugin 0.17.4 → 0.18.0

package/README.md

@@ -1,10 +1,15 @@
 # @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 (or emits a stable fallback when none exists).
+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).
 
 - 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).
+- 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
 
@@ -14,6 +19,10 @@ npm i -D @stylexjs/unplugin
 
 ## Usage by bundler
 
+Bundler-specific entrypoints are available (for example,
+`@stylexjs/unplugin/vite`, `@stylexjs/unplugin/webpack`,
+`@stylexjs/unplugin/esbuild`, and `@stylexjs/unplugin/bun`).
+
 ### Vite
 
 ```ts
@@ -33,10 +42,20 @@ export default defineConfig({
 ```
 
 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.
+
+- 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):
 
@@ -49,7 +68,8 @@ Dev HTML injection (baseline):
 ```
 
 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">`.
+the inline script with
+`<script type="module" src="/@id/virtual:stylex:runtime">`.
 
 ### Rollup
 
@@ -116,19 +136,33 @@ esbuild.build({
 ## Options (shared)
 
 - `dev`: boolean, defaults based on `NODE_ENV`/`BABEL_ENV`.
-- `importSources`: array of import sources to scan, default `['stylex', '@stylexjs/stylex']`.
+- `importSources`: array of import sources to scan, default
+  `['stylex', '@stylexjs/stylex']`.
 - `useCSSLayers`: boolean, emit CSS layers.
 - `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.
+- `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.
+- `devPersistToDisk`: persist collected rules to
+  `node_modules/.stylex/rules.json` in dev so multiple Vite environments can
+  share CSS.
 
 ## Notes
 
-- 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.
+- 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/bun.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type { UserOptions } from './core';
+
+type BunOptions = UserOptions & {
+  bunDevCssOutput?: string;
+};
+
+declare const plugin: any;
+
+declare const createStylexBunPlugin: (options?: Partial<BunOptions>) => any;
+
+export { createStylexBunPlugin };
+
+export default plugin;

package/lib/bun.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.createStylexBunPlugin = void 0;
+var _nodePath = _interopRequireDefault(require("node:path"));
+var _promises = _interopRequireDefault(require("node:fs/promises"));
+var _core = require("./core");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const loaders = {
+  '.js': 'js',
+  '.jsx': 'jsx',
+  '.ts': 'ts',
+  '.tsx': 'tsx'
+};
+const createStylexBunPlugin = (userOptions = {}) => {
+  const options = {
+    ...userOptions
+  };
+  if (options.dev == null) options.dev = true;
+  if (options.runtimeInjection == null) options.runtimeInjection = false;
+  if (options.useCSSLayers == null) options.useCSSLayers = true;
+  const plugin = (0, _core.unpluginFactory)(options, {
+    framework: 'bun'
+  });
+  const cssOutput = options.bunDevCssOutput || _nodePath.default.resolve(process.cwd(), 'dist', 'stylex.dev.css');
+  let lastCss = null;
+  const writeCss = async () => {
+    const css = plugin.__stylexCollectCss?.() || '';
+    const next = css ? `:root { --stylex-injection: 0; }\n${css}` : ':root { --stylex-injection: 0; }';
+    if (next === lastCss) return;
+    lastCss = next;
+    try {
+      await _promises.default.mkdir(_nodePath.default.dirname(cssOutput), {
+        recursive: true
+      });
+      await _promises.default.writeFile(cssOutput, next, 'utf8');
+    } catch {}
+  };
+  return {
+    name: '@stylexjs/unplugin-bun',
+    async setup(build) {
+      if (plugin.buildStart) {
+        build.onStart(async () => {
+          await plugin.buildStart();
+          await writeCss();
+        });
+      } else {
+        build.onStart(async () => {
+          await writeCss();
+        });
+      }
+      if (plugin.buildEnd) {
+        build.onEnd(async () => {
+          await plugin.buildEnd();
+          await writeCss();
+        });
+      } else {
+        build.onEnd(async () => {
+          await writeCss();
+        });
+      }
+      build.onLoad({
+        filter: /\.[cm]?[jt]sx?$/
+      }, async args => {
+        const code = await Bun.file(args.path).text();
+        const result = plugin.transform ? await plugin.transform(code, args.path) : null;
+        const nextCode = result?.code ?? code;
+        await writeCss();
+        return {
+          contents: nextCode,
+          loader: loaders[_nodePath.default.extname(args.path)] || 'js'
+        };
+      });
+    }
+  };
+};
+exports.createStylexBunPlugin = createStylexBunPlugin;
+const defaultBunPlugin = createStylexBunPlugin({});
+var _default = exports.default = defaultBunPlugin;

package/lib/core.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type UnpluginFactory, type UnpluginInstance } from 'unplugin';
+import type { Options as StyleXOptions } from '@stylexjs/babel-plugin';
+import type { TransformOptions } from 'lightningcss';
+
+type LightningcssOptions = TransformOptions<any>;
+
+export type UserOptions = StyleXOptions & {
+  useCSSLayers?: boolean;
+  enableLTRRTLComments?: boolean;
+  legacyDisableLayers?: boolean;
+  lightningcssOptions?: LightningcssOptions;
+  cssInjectionTarget?: (filepath: string) => boolean;
+  devPersistToDisk?: boolean;
+  devMode?: 'full' | 'css-only' | 'off';
+};
+
+export const unpluginFactory: UnpluginFactory<Partial<UserOptions>, false>;
+
+declare const unplugin: UnpluginInstance<Partial<UserOptions>, false>;
+
+export default unplugin;

package/lib/core.js

@@ -0,0 +1,420 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.pickCssAssetFromRollupBundle = pickCssAssetFromRollupBundle;
+exports.replaceCssAssetWithHashedCopy = replaceCssAssetWithHashedCopy;
+exports.unpluginFactory = exports.unplugin = void 0;
+var _unplugin = require("unplugin");
+var _core = require("@babel/core");
+var _babelPlugin = _interopRequireDefault(require("@stylexjs/babel-plugin"));
+var _pluginSyntaxFlow = _interopRequireDefault(require("@babel/plugin-syntax-flow"));
+var _pluginSyntaxJsx = _interopRequireDefault(require("@babel/plugin-syntax-jsx"));
+var _pluginSyntaxTypescript = _interopRequireDefault(require("@babel/plugin-syntax-typescript"));
+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"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function pickCssAssetFromRollupBundle(bundle, choose) {
+  const assets = Object.values(bundle).filter(a => a && a.type === 'asset' && typeof a.fileName === 'string' && a.fileName.endsWith('.css'));
+  if (assets.length === 0) return null;
+  if (typeof choose === 'function') {
+    const chosen = assets.find(a => choose(a.fileName));
+    if (chosen) return chosen;
+  }
+  const best = assets.find(a => /(^|\/)index\.css$/.test(a.fileName)) || assets.find(a => /(^|\/)style\.css$/.test(a.fileName));
+  return best || assets[0];
+}
+function processCollectedRulesToCSS(rules, options) {
+  if (!rules || rules.length === 0) return '';
+  const collectedCSS = _babelPlugin.default.processStylexRules(rules, {
+    useLayers: !!options.useCSSLayers,
+    enableLTRRTLComments: options?.enableLTRRTLComments
+  });
+  const {
+    code
+  } = (0, _lightningcss.transform)({
+    targets: (0, _lightningcss.browserslistToTargets)((0, _browserslist.default)('>= 1%')),
+    ...options.lightningcssOptions,
+    filename: 'stylex.css',
+    code: Buffer.from(collectedCSS)
+  });
+  return code.toString();
+}
+function getAssetBaseName(asset) {
+  if (asset?.name && typeof asset.name === 'string') return asset.name;
+  const fallback = asset?.fileName ? _nodePath.default.basename(asset.fileName) : 'stylex.css';
+  const match = /^(.*?)(-[a-z0-9]{8,})?\.css$/i.exec(fallback);
+  if (match) return `${match[1]}.css`;
+  return fallback || 'stylex.css';
+}
+function replaceBundleReferences(bundle, oldFileName, newFileName) {
+  for (const item of Object.values(bundle)) {
+    if (!item) continue;
+    if (item.type === 'chunk') {
+      if (typeof item.code === 'string' && item.code.includes(oldFileName)) {
+        item.code = item.code.split(oldFileName).join(newFileName);
+      }
+      const importedCss = item.viteMetadata?.importedCss;
+      if (importedCss instanceof Set && importedCss.has(oldFileName)) {
+        importedCss.delete(oldFileName);
+        importedCss.add(newFileName);
+      } else if (Array.isArray(importedCss)) {
+        const next = importedCss.map(name => name === oldFileName ? newFileName : name);
+        item.viteMetadata.importedCss = next;
+      }
+    } else if (item.type === 'asset' && typeof item.source === 'string') {
+      if (item.source.includes(oldFileName)) {
+        item.source = item.source.split(oldFileName).join(newFileName);
+      }
+    }
+  }
+}
+function replaceCssAssetWithHashedCopy(ctx, bundle, asset, nextSource) {
+  const baseName = getAssetBaseName(asset);
+  const referenceId = ctx.emitFile({
+    type: 'asset',
+    name: baseName,
+    source: nextSource
+  });
+  const nextFileName = ctx.getFileName(referenceId);
+  const oldFileName = asset.fileName;
+  if (!nextFileName || !oldFileName || nextFileName === oldFileName) {
+    asset.source = nextSource;
+    return;
+  }
+  replaceBundleReferences(bundle, oldFileName, nextFileName);
+  const emitted = bundle[nextFileName];
+  if (emitted && emitted !== asset) {
+    delete bundle[nextFileName];
+  }
+  asset.fileName = nextFileName;
+  asset.source = nextSource;
+  if (bundle[oldFileName] === asset) {
+    delete bundle[oldFileName];
+  }
+  bundle[nextFileName] = asset;
+}
+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 unpluginFactory = (userOptions = {}, metaOptions) => {
+  const framework = metaOptions?.framework;
+  const {
+    dev = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development',
+    unstable_moduleResolution = {
+      type: 'commonJS',
+      rootDir: process.cwd()
+    },
+    babelConfig: {
+      plugins = [],
+      presets = []
+    } = {},
+    importSources = ['stylex', '@stylexjs/stylex'],
+    useCSSLayers = false,
+    lightningcssOptions,
+    cssInjectionTarget,
+    externalPackages = [],
+    devPersistToDisk = false,
+    devMode = 'full',
+    treeshakeCompensation = ['vite', 'rollup', 'rolldown'].includes(framework),
+    ...stylexOptions
+  } = userOptions;
+  const stylexRulesById = new Map();
+  function getSharedStore() {
+    try {
+      const g = globalThis;
+      if (!g.__stylex_unplugin_store) {
+        g.__stylex_unplugin_store = {
+          rulesById: new Map(),
+          version: 0
+        };
+      }
+      return g.__stylex_unplugin_store;
+    } catch {
+      return {
+        rulesById: stylexRulesById,
+        version: 0
+      };
+    }
+  }
+  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 (;;) {
+      const candidate = _nodePath.default.join(dir, 'node_modules');
+      if (_nodeFs.default.existsSync(candidate)) {
+        const stat = _nodeFs.default.statSync(candidate);
+        if (stat.isDirectory()) return candidate;
+      }
+      const parent = _nodePath.default.dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+    return null;
+  }
+  const NEAREST_NODE_MODULES = findNearestNodeModules(process.cwd());
+  const DISK_RULES_DIR = NEAREST_NODE_MODULES ? _nodePath.default.join(NEAREST_NODE_MODULES, '.stylex') : _nodePath.default.join(process.cwd(), 'node_modules', '.stylex');
+  const DISK_RULES_PATH = _nodePath.default.join(DISK_RULES_DIR, 'rules.json');
+  async function runBabelTransform(inputCode, filename, callerName) {
+    const result = await (0, _core.transformAsync)(inputCode, {
+      babelrc: false,
+      filename,
+      presets,
+      plugins: [...plugins, /\.jsx?/.test(_nodePath.default.extname(filename)) ? _pluginSyntaxFlow.default : [_pluginSyntaxTypescript.default, {
+        isTSX: true
+      }], _pluginSyntaxJsx.default, _babelPlugin.default.withOptions({
+        ...stylexOptions,
+        importSources,
+        treeshakeCompensation,
+        dev,
+        unstable_moduleResolution
+      })],
+      caller: {
+        name: callerName,
+        supportsStaticESM: true,
+        supportsDynamicImport: true,
+        supportsTopLevelAwait: !inputCode.includes('require('),
+        supportsExportNamespaceFrom: true
+      }
+    });
+    if (!result || result.code == null) {
+      return {
+        code: inputCode,
+        map: null,
+        metadata: {}
+      };
+    }
+    return result;
+  }
+  function escapeReg(src) {
+    return src.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+  function containsStylexImport(code, source) {
+    const s = escapeReg(typeof source === 'string' ? source : source.from);
+    const re = new RegExp(`(?:from\\s*['"]${s}['"]|import\\s*\\(\\s*['"]${s}['"]\\s*\\)|require\\s*\\(\\s*['"]${s}['"]\\s*\\)|^\\s*import\\s*['"]${s}['"])`, 'm');
+    return re.test(code);
+  }
+  function shouldHandle(code) {
+    if (!code) return false;
+    return importSources.some(src => containsStylexImport(code, src));
+  }
+  function resetState() {
+    stylexRulesById.clear();
+    if (devPersistToDisk) {
+      try {
+        _nodeFs.default.rmSync(DISK_RULES_PATH, {
+          force: true
+        });
+      } catch {}
+    }
+  }
+  function collectCss() {
+    const merged = new Map();
+    if (devPersistToDisk) {
+      try {
+        if (_nodeFs.default.existsSync(DISK_RULES_PATH)) {
+          const json = JSON.parse(_nodeFs.default.readFileSync(DISK_RULES_PATH, 'utf8'));
+          for (const [k, v] of Object.entries(json)) merged.set(k, v);
+        }
+      } catch {}
+    }
+    try {
+      const shared = getSharedStore().rulesById;
+      for (const [k, v] of shared.entries()) merged.set(k, v);
+    } catch {}
+    for (const [k, v] of stylexRulesById.entries()) merged.set(k, v);
+    const allRules = Array.from(merged.values()).flat();
+    return processCollectedRulesToCSS(allRules, {
+      useCSSLayers,
+      lightningcssOptions,
+      enableLTRRTLComments: stylexOptions?.enableLTRRTLComments
+    });
+  }
+  async function persistRulesToDisk(id, rules) {
+    if (!devPersistToDisk) return;
+    try {
+      let current = {};
+      try {
+        const txt = await _promises.default.readFile(DISK_RULES_PATH, 'utf8');
+        current = JSON.parse(txt);
+      } catch {}
+      if (rules && Array.isArray(rules) && rules.length > 0) {
+        current[id] = rules;
+      } else if (current[id]) {
+        delete current[id];
+      }
+      await _promises.default.writeFile(DISK_RULES_PATH, JSON.stringify(current), 'utf8');
+    } catch {}
+  }
+  const plugin = {
+    name: '@stylexjs/unplugin',
+    apply: (config, env) => {
+      try {
+        const command = env?.command || (typeof config === 'string' ? undefined : undefined);
+        if (devMode === 'off' && command === 'serve') return false;
+      } catch {}
+      return true;
+    },
+    enforce: 'pre',
+    buildStart() {
+      resetState();
+    },
+    buildEnd() {},
+    async transform(code, id) {
+      const JS_LIKE_RE = /\.[cm]?[jt]sx?(\?|$)/;
+      if (!JS_LIKE_RE.test(id)) return null;
+      if (!shouldHandle(code)) return null;
+      const dir = _nodePath.default.dirname(id);
+      const basename = _nodePath.default.basename(id);
+      const file = _nodePath.default.join(dir, basename.split('?')[0] || basename);
+      const result = await runBabelTransform(code, file, '@stylexjs/unplugin');
+      const {
+        metadata
+      } = result;
+      if (!stylexOptions.runtimeInjection) {
+        const hasRules = metadata && Array.isArray(metadata.stylex) && metadata.stylex.length > 0;
+        const shared = getSharedStore();
+        if (hasRules) {
+          stylexRulesById.set(id, metadata.stylex);
+          shared.rulesById.set(id, metadata.stylex);
+          shared.version++;
+          await persistRulesToDisk(id, metadata.stylex);
+        } else {
+          stylexRulesById.delete(id);
+          if (shared.rulesById.has(id)) {
+            shared.rulesById.delete(id);
+            shared.version++;
+          }
+          await persistRulesToDisk(id, []);
+        }
+      }
+      const ctx = this;
+      if (ctx && ctx.meta && ctx.meta.watchMode && typeof ctx.parse === 'function') {
+        try {
+          const ast = ctx.parse(result.code);
+          for (const stmt of ast.body) {
+            if (stmt.type === 'ImportDeclaration') {
+              const resolved = await ctx.resolve(stmt.source.value, id);
+              if (resolved && !resolved.external) {
+                const loaded = await ctx.load(resolved);
+                if (loaded && loaded.meta && 'stylex' in loaded.meta) {
+                  stylexRulesById.set(resolved.id, loaded.meta.stylex);
+                }
+              }
+            }
+          }
+        } catch {}
+      }
+      return {
+        code: result.code,
+        map: result.map
+      };
+    },
+    shouldTransformCachedModule({
+      id,
+      meta
+    }) {
+      if (meta && 'stylex' in meta) {
+        stylexRulesById.set(id, meta.stylex);
+      }
+      return false;
+    }
+  };
+  plugin.__stylexCollectCss = collectCss;
+  plugin.__stylexResetState = resetState;
+  plugin.__stylexGetSharedStore = getSharedStore;
+  plugin.__stylexDevMode = devMode;
+  plugin.__stylexCssInjectionTarget = cssInjectionTarget;
+  plugin.__stylexPackages = stylexPackages;
+  return plugin;
+};
+exports.unpluginFactory = unpluginFactory;
+const unpluginInstance = (0, _unplugin.createUnplugin)(unpluginFactory);
+var _default = exports.default = unpluginInstance;
+const unplugin = exports.unplugin = unpluginInstance;