@stylexjs/unplugin 0.17.0

package/lib/es/index.mjs

@@ -0,0 +1,484 @@
+import { createUnplugin } from 'unplugin';
+import { transformAsync } from '@babel/core';
+import stylexBabelPlugin from '@stylexjs/babel-plugin';
+import flowSyntaxPlugin from '@babel/plugin-syntax-flow';
+import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
+import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
+import path from 'node:path';
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import { transform as lightningTransform } from 'lightningcss';
+import browserslist from 'browserslist';
+import { browserslistToTargets } from 'lightningcss';
+import { devInjectMiddleware } from "./dev-inject-middleware.mjs";
+import { DEV_CSS_PATH, VIRTUAL_STYLEX_RUNTIME_SCRIPT, VIRTUAL_STYLEX_CSS_ONLY_SCRIPT } from "./consts.mjs";
+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 = stylexBabelPlugin.processStylexRules(rules, {
+    useLayers: !!options.useCSSLayers,
+    enableLTRRTLComments: options?.enableLTRRTLComments
+  });
+  const {
+    code
+  } = lightningTransform({
+    targets: browserslistToTargets(browserslist('>= 1%')),
+    ...options.lightningcssOptions,
+    filename: 'stylex.css',
+    code: Buffer.from(collectedCSS)
+  });
+  return code.toString();
+}
+const unpluginInstance = createUnplugin((userOptions = {}) => {
+  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,
+    devPersistToDisk = false,
+    devMode = 'full',
+    ...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
+      };
+    }
+  }
+  let viteServer = null;
+  let viteOutDir = null;
+  function findNearestNodeModules(startDir) {
+    let dir = startDir;
+    for (;;) {
+      const candidate = path.join(dir, 'node_modules');
+      if (fs.existsSync(candidate)) {
+        const stat = fs.statSync(candidate);
+        if (stat.isDirectory()) return candidate;
+      }
+      const parent = path.dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+    return null;
+  }
+  const NEAREST_NODE_MODULES = findNearestNodeModules(process.cwd());
+  const DISK_RULES_DIR = NEAREST_NODE_MODULES ? path.join(NEAREST_NODE_MODULES, '.stylex') : path.join(process.cwd(), 'node_modules', '.stylex');
+  const DISK_RULES_PATH = path.join(DISK_RULES_DIR, 'rules.json');
+  async function runBabelTransform(inputCode, id, callerName) {
+    const result = await transformAsync(inputCode, {
+      babelrc: false,
+      filename: id,
+      presets,
+      plugins: [...plugins, /\.jsx?/.test(path.extname(id)) ? flowSyntaxPlugin : [typescriptSyntaxPlugin, {
+        isTSX: true
+      }], jsxSyntaxPlugin, stylexBabelPlugin.withOptions({
+        ...stylexOptions,
+        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 {
+        fs.rmSync(DISK_RULES_PATH, {
+          force: true
+        });
+      } catch {}
+    }
+  }
+  function collectCss() {
+    const merged = new Map();
+    if (devPersistToDisk) {
+      try {
+        if (fs.existsSync(DISK_RULES_PATH)) {
+          const json = JSON.parse(fs.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 fsp.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 fsp.writeFile(DISK_RULES_PATH, JSON.stringify(current), 'utf8');
+    } catch {}
+  }
+  return {
+    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 result = await runBabelTransform(code, id, '@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, []);
+        }
+        if (viteServer) {
+          try {
+            viteServer.ws.send({
+              type: 'custom',
+              event: 'stylex:css-update'
+            });
+          } catch {}
+        }
+      }
+      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;
+    },
+    generateBundle(_opts, bundle) {
+      const css = collectCss();
+      if (!css) return;
+      const target = pickCssAssetFromRollupBundle(bundle, cssInjectionTarget);
+      if (target) {
+        const current = typeof target.source === 'string' ? target.source : target.source?.toString() || '';
+        target.source = current ? current + '\n' + css : css;
+      } else {}
+    },
+    vite: devMode === 'off' ? undefined : {
+      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 = collectCss();
+            res.end(css || '');
+            return;
+          }
+          next();
+        });
+        const shared = getSharedStore();
+        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 === 'virtual:stylex:runtime') return id;
+        if (devMode === 'css-only' && id === 'virtual:stylex:css-only') return id;
+        return null;
+      },
+      load(id) {
+        if (devMode === 'full' && id === 'virtual:stylex:runtime') {
+          return VIRTUAL_STYLEX_RUNTIME_SCRIPT;
+        }
+        if (devMode === 'css-only' && id === 'virtual:stylex:css-only') {
+          return VIRTUAL_STYLEX_CSS_ONLY_SCRIPT;
+        }
+        return null;
+      },
+      transformIndexHtml() {
+        if (devMode !== 'full') return null;
+        if (!viteServer) return null;
+        return [{
+          tag: 'script',
+          attrs: {
+            type: 'module',
+            src: '/@id/virtual:stylex:runtime'
+          },
+          injectTo: 'head'
+        }, {
+          tag: 'link',
+          attrs: {
+            rel: 'stylesheet',
+            href: DEV_CSS_PATH
+          },
+          injectTo: 'head'
+        }];
+      },
+      handleHotUpdate(ctx) {
+        const cssMod = ctx.server.moduleGraph.getModuleById('virtual:stylex:css-module');
+        if (cssMod) {
+          ctx.server.moduleGraph.invalidateModule(cssMod);
+        }
+        try {
+          ctx.server.ws.send({
+            type: 'custom',
+            event: 'stylex:css-update'
+          });
+        } catch {}
+      }
+    },
+    webpack(compiler) {
+      const PLUGIN_NAME = '@stylexjs/unplugin';
+      compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
+        resetState();
+        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 = collectCss();
+          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));
+        });
+      });
+    },
+    rspack(compiler) {
+      this.webpack?.(compiler);
+    },
+    esbuild: {
+      name: '@stylexjs/unplugin',
+      setup(build) {
+        build.onEnd(async result => {
+          try {
+            const css = collectCss();
+            if (!css) return;
+            const initial = build.initialOptions;
+            const outDir = initial.outdir || (initial.outfile ? path.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 = path.isAbsolute(pick) ? pick : path.join(process.cwd(), pick);
+            } else {
+              try {
+                const files = fs.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 = path.join(outDir, pick);
+              } catch {}
+            }
+            if (!outfile) {
+              const fallback = path.join(outDir, 'stylex.css');
+              await fsp.mkdir(path.dirname(fallback), {
+                recursive: true
+              });
+              await fsp.writeFile(fallback, css, 'utf8');
+              return;
+            }
+            try {
+              const current = fs.readFileSync(outfile, 'utf8');
+              if (!current.includes(css)) {
+                await fsp.writeFile(outfile, current ? current + '\n' + css : css, 'utf8');
+              }
+            } catch {}
+          } catch {}
+        });
+      }
+    },
+    async writeBundle(options, bundle) {
+      try {
+        const css = collectCss();
+        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 {}
+      } catch {}
+    }
+  };
+});
+export default unpluginInstance;
+export const unplugin = unpluginInstance;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import { type UnpluginInstance } from 'unplugin';
+
+export default unplugin;
+declare const unplugin: UnpluginInstance<any, boolean>;