@stylexjs/unplugin 0.17.4 → 0.18.0

package/lib/es/unloader.mjs

@@ -0,0 +1,3 @@
+import { createUnloaderPlugin } from 'unplugin';
+import { unpluginFactory } from "./core.mjs";
+export default createUnloaderPlugin(unpluginFactory);

package/lib/es/vite.mjs

@@ -0,0 +1,174 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import { createVitePlugin } from 'unplugin';
+import { devInjectMiddleware } from "./dev-inject-middleware.mjs";
+import { DEV_CSS_PATH, VIRTUAL_STYLEX_RUNTIME_SCRIPT, VIRTUAL_STYLEX_CSS_ONLY_SCRIPT } from "./consts.mjs";
+import { pickCssAssetFromRollupBundle, replaceCssAssetWithHashedCopy, unpluginFactory } from "./core.mjs";
+function attachViteHooks(plugin) {
+  const cssInjectionTarget = plugin.__stylexCssInjectionTarget;
+  const devMode = plugin.__stylexDevMode;
+  const stylexPackages = plugin.__stylexPackages;
+  const shared = plugin.__stylexGetSharedStore?.();
+  let viteServer = null;
+  let viteOutDir = null;
+  return {
+    ...plugin,
+    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;
+      } catch {}
+    },
+    configureServer(server) {
+      viteServer = server;
+      if (devMode === 'full') {
+        server.middlewares.use(devInjectMiddleware);
+      }
+      server.middlewares.use((req, res, next) => {
+        if (!req.url) return next();
+        if (req.url.startsWith(DEV_CSS_PATH)) {
+          res.statusCode = 200;
+          res.setHeader('Content-Type', 'text/css');
+          res.setHeader('Cache-Control', 'no-store');
+          const css = plugin.__stylexCollectCss?.();
+          res.end(css || '');
+          return;
+        }
+        next();
+      });
+      if (shared) {
+        let lastVersion = shared.version;
+        const interval = setInterval(() => {
+          const curr = shared.version;
+          if (curr !== lastVersion) {
+            lastVersion = curr;
+            try {
+              server.ws.send({
+                type: 'custom',
+                event: 'stylex:css-update'
+              });
+            } catch {}
+          }
+        }, 150);
+        server.httpServer?.once('close', () => clearInterval(interval));
+      }
+    },
+    resolveId(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.includes('virtual:stylex:runtime')) {
+        return VIRTUAL_STYLEX_RUNTIME_SCRIPT;
+      }
+      if (devMode === 'css-only' && id.includes('virtual:stylex:css-only')) {
+        return VIRTUAL_STYLEX_CSS_ONLY_SCRIPT;
+      }
+      return null;
+    },
+    transformIndexHtml() {
+      if (devMode !== 'full') return null;
+      if (!viteServer) return null;
+      const base = viteServer.config.base ?? '';
+      return [{
+        tag: 'script',
+        attrs: {
+          type: 'module',
+          src: path.join(base, '/@id/virtual:stylex:runtime')
+        },
+        injectTo: 'head'
+      }, {
+        tag: 'link',
+        attrs: {
+          rel: 'stylesheet',
+          href: path.join(base, DEV_CSS_PATH)
+        },
+        injectTo: 'head'
+      }];
+    },
+    async handleHotUpdate(ctx) {
+      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);
+      }
+      try {
+        ctx.server.ws.send({
+          type: 'custom',
+          event: 'stylex:css-update'
+        });
+      } catch {}
+    },
+    generateBundle(_opts, bundle) {
+      const css = plugin.__stylexCollectCss?.();
+      if (!css) return;
+      const target = pickCssAssetFromRollupBundle(bundle, cssInjectionTarget);
+      if (target) {
+        const current = typeof target.source === 'string' ? target.source : target.source?.toString() || '';
+        const nextSource = current ? current + '\n' + css : css;
+        replaceCssAssetWithHashedCopy(this, bundle, target, nextSource);
+      }
+    },
+    async writeBundle(options, bundle) {
+      const css = plugin.__stylexCollectCss?.();
+      if (!css) return;
+      const target = pickCssAssetFromRollupBundle(bundle, cssInjectionTarget);
+      const outDir = options?.dir || (options?.file ? path.dirname(options.file) : viteOutDir);
+      if (!outDir) return;
+      try {
+        await fsp.mkdir(outDir, {
+          recursive: true
+        });
+      } catch {}
+      let outfile;
+      if (!target) {
+        try {
+          const assetsDir = path.join(outDir, 'assets');
+          if (fs.existsSync(assetsDir)) {
+            const files = fs.readdirSync(assetsDir).filter(f => f.endsWith('.css'));
+            const pick = files.find(f => /(^|\/)index\.css$/.test(f)) || files.find(f => /(^|\/)style\.css$/.test(f)) || files[0];
+            if (pick) outfile = path.join(assetsDir, pick);
+          }
+        } catch {}
+        if (!outfile) {
+          const assetsDir = path.join(outDir, 'assets');
+          try {
+            await fsp.mkdir(assetsDir, {
+              recursive: true
+            });
+          } catch {}
+          const fallback = path.join(assetsDir, 'stylex.css');
+          await fsp.writeFile(fallback, css, 'utf8');
+          return;
+        }
+      } else {
+        outfile = path.join(outDir, target.fileName);
+      }
+      try {
+        const current = fs.readFileSync(outfile, 'utf8');
+        if (!current.includes(css)) {
+          await fsp.writeFile(outfile, current ? current + '\n' + css : css, 'utf8');
+        }
+      } catch {}
+    }
+  };
+}
+export default createVitePlugin((options, metaOptions) => attachViteHooks(unpluginFactory(options, metaOptions)));

package/lib/es/webpack.mjs

@@ -0,0 +1,43 @@
+import { createWebpackPlugin } from 'unplugin';
+import { unpluginFactory } from "./core.mjs";
+export function attachWebpackHooks(plugin) {
+  const cssInjectionTarget = plugin.__stylexCssInjectionTarget;
+  return {
+    ...plugin,
+    webpack(compiler) {
+      const PLUGIN_NAME = '@stylexjs/unplugin';
+      compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
+        plugin.__stylexResetState?.();
+        const wp = compiler.webpack || compiler.rspack || undefined;
+        const stage = wp?.Compilation?.PROCESS_ASSETS_STAGE_SUMMARIZE;
+        const tapOptions = stage != null ? {
+          name: PLUGIN_NAME,
+          stage
+        } : PLUGIN_NAME;
+        const toRawSource = content => {
+          const RawSource = wp?.sources?.RawSource;
+          return RawSource ? new RawSource(content) : {
+            source: () => content,
+            size: () => Buffer.byteLength(content)
+          };
+        };
+        compilation.hooks.processAssets.tap(tapOptions, assets => {
+          const css = plugin.__stylexCollectCss?.();
+          if (!css) return;
+          const cssAssets = Object.keys(assets).filter(f => f.endsWith('.css'));
+          if (cssAssets.length === 0) {
+            compilation.warnings.push(new Error('[stylex] No CSS asset found to inject into. Skipping.'));
+            return;
+          }
+          const pickName = typeof cssInjectionTarget === 'function' && cssAssets.find(f => cssInjectionTarget(f)) || cssAssets.find(f => /(^|\/)index\.css$/.test(f)) || cssAssets.find(f => /(^|\/)style\.css$/.test(f)) || cssAssets[0];
+          const asset = compilation.getAsset(pickName);
+          if (!asset) return;
+          const existing = asset.source.source().toString();
+          const next = existing ? existing + '\n' + css : css;
+          compilation.updateAsset(pickName, toRawSource(next));
+        });
+      });
+    }
+  };
+}
+export default createWebpackPlugin((options, metaOptions) => attachWebpackHooks(unpluginFactory(options, metaOptions)));

package/lib/esbuild.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+declare const plugin: (options?: Partial<UserOptions>) => any;
+
+export default plugin;

package/lib/esbuild.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _nodePath = _interopRequireDefault(require("node:path"));
+var _nodeFs = _interopRequireDefault(require("node:fs"));
+var _promises = _interopRequireDefault(require("node:fs/promises"));
+var _unplugin = require("unplugin");
+var _core = require("./core");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function attachEsbuildHooks(plugin) {
+  return {
+    ...plugin,
+    esbuild: {
+      name: '@stylexjs/unplugin',
+      setup(build) {
+        build.onEnd(async result => {
+          try {
+            const css = plugin.__stylexCollectCss?.();
+            if (!css) return;
+            const initial = build.initialOptions;
+            const outDir = initial.outdir || (initial.outfile ? _nodePath.default.dirname(initial.outfile) : null);
+            if (!outDir) return;
+            let outfile = null;
+            const meta = result && result.metafile;
+            if (meta && meta.outputs) {
+              const outputs = Object.keys(meta.outputs);
+              const cssOutputs = outputs.filter(f => f.endsWith('.css'));
+              const pick = cssOutputs.find(f => /(^|\/)index\.css$/.test(f)) || cssOutputs.find(f => /(^|\/)style\.css$/.test(f)) || cssOutputs[0];
+              if (pick) outfile = _nodePath.default.isAbsolute(pick) ? pick : _nodePath.default.join(process.cwd(), pick);
+            } else {
+              try {
+                const files = _nodeFs.default.readdirSync(outDir).filter(f => f.endsWith('.css'));
+                const pick = files.find(f => /(^|\/)index\.css$/.test(f)) || files.find(f => /(^|\/)style\.css$/.test(f)) || files[0];
+                if (pick) outfile = _nodePath.default.join(outDir, pick);
+              } catch {}
+            }
+            if (!outfile) {
+              const fallback = _nodePath.default.join(outDir, 'stylex.css');
+              await _promises.default.mkdir(_nodePath.default.dirname(fallback), {
+                recursive: true
+              });
+              await _promises.default.writeFile(fallback, css, 'utf8');
+              return;
+            }
+            try {
+              const current = _nodeFs.default.readFileSync(outfile, 'utf8');
+              if (!current.includes(css)) {
+                await _promises.default.writeFile(outfile, current ? current + '\n' + css : css, 'utf8');
+              }
+            } catch {}
+          } catch {}
+        });
+      }
+    }
+  };
+}
+var _default = exports.default = (0, _unplugin.createEsbuildPlugin)((options, metaOptions) => attachEsbuildHooks((0, _core.unpluginFactory)(options, metaOptions)));

package/lib/farm.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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';
+
+declare const plugin: (options?: Partial<UserOptions>) => any;
+
+export default plugin;

package/lib/farm.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _unplugin = require("unplugin");
+var _core = require("./core");
+var _default = exports.default = (0, _unplugin.createFarmPlugin)(_core.unpluginFactory);

package/lib/index.d.ts

@@ -1,17 +1,29 @@
-import { type UnpluginInstance } from 'unplugin';
-import type { Options as StyleXOptions } from '@stylexjs/babel-plugin';
-import type { TransformOptions as LightningcssOptions } from 'lightningcss';
+/**
+ * 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.
+ */
 
-export default unplugin;
+import type { UserOptions } from './core';
 
-type UserOptions = StyleXOptions & {
-  useCSSLayers?: boolean;
-  enableLTRRTLComments?: boolean;
-  legacyDisableLayers?: boolean;
-  lightningcssOptions?: LightningcssOptions;
-  cssInjectionTarget?: (filepath: string) => boolean;
-  devPersistToDisk?: boolean;
-  devMode?: 'full' | 'css-only' | 'off';
+export { unpluginFactory } from './core';
+export type { UserOptions } from './core';
+export { createStylexBunPlugin } from './bun';
+
+declare const stylex: {
+  bun: (options?: Partial<UserOptions>) => any;
+  esbuild: (options?: Partial<UserOptions>) => any;
+  farm: (options?: Partial<UserOptions>) => any;
+  rolldown: (options?: Partial<UserOptions>) => any;
+  rollup: (options?: Partial<UserOptions>) => any;
+  rspack: (options?: Partial<UserOptions>) => any;
+  unloader: (options?: Partial<UserOptions>) => any;
+  vite: (options?: Partial<UserOptions>) => any;
+  webpack: (options?: Partial<UserOptions>) => any;
+  raw: typeof import('./core').unpluginFactory;
 };
 
-declare const unplugin: UnpluginInstance<Partial<UserOptions>, false>;
+export const unplugin: typeof stylex;
+
+export default stylex;