unplugin-stylex 0.0.2 → 0.1.0

package/dist/chunk-7MXMBS5H.js

@@ -0,0 +1,190 @@
+import {
+  PLUGIN_NAME,
+  isDevelopment
+} from "./chunk-36ARBXVP.js";
+
+// src/index.ts
+import * as path from "node:path";
+import { createUnplugin } from "unplugin";
+
+// src/core/build.ts
+import stylex from "@stylexjs/babel-plugin";
+function buildStylexRules(stylexRules, useCSSLayers) {
+  const rules = Object.values(stylexRules).flat();
+  if (rules.length === 0)
+    return "";
+  return stylex.processStylexRules(rules, useCSSLayers);
+}
+
+// src/core/options.ts
+function getOptions(options) {
+  const stylex2 = options.stylex || {};
+  const isDev = options.dev || isDevelopment;
+  return {
+    ...options,
+    dev: options.dev || isDev,
+    stylex: {
+      filename: stylex2.filename || "stylex.css",
+      stylexImports: stylex2.stylexImports || ["@stylexjs/stylex"],
+      runtimeInjection: stylex2.runtimeInjection ?? isDev,
+      aliases: stylex2.aliases,
+      useCSSLayers: stylex2.useCSSLayers || false,
+      unstable_moduleResolution: stylex2.unstable_moduleResolution || { type: "commonJS", rootDir: process.cwd() },
+      babelConfig: {
+        babelrc: (stylex2.babelConfig || {}).babelrc || false,
+        plugins: (stylex2.babelConfig || {}).plugins || [],
+        presets: (stylex2.babelConfig || {}).presets || []
+      },
+      ...stylex2
+    }
+  };
+}
+
+// src/core/transformer.ts
+import { extname as pathExtname } from "node:path";
+import { transformAsync } from "@babel/core";
+import jsxSyntaxPlugin from "@babel/plugin-syntax-jsx";
+import stylexBabelPlugin from "@stylexjs/babel-plugin";
+
+// src/core/plugins.ts
+import typescriptSyntaxPlugin from "@babel/plugin-syntax-typescript";
+import flowSyntaxPlugin from "@babel/plugin-syntax-flow";
+function getSyntaxPlugins(extname) {
+  const TSPlugin = extname === ".tsx" ? [[typescriptSyntaxPlugin, { isTSX: true }]] : [typescriptSyntaxPlugin];
+  return [".js", ".jsx"].includes(extname) ? [flowSyntaxPlugin] : TSPlugin;
+}
+
+// src/core/transformer.ts
+async function transformer(context) {
+  var _a, _b, _c, _d;
+  const { id, inputCode, options } = context;
+  const stylex2 = options.stylex;
+  const extname = pathExtname(id);
+  const stylexRules = {};
+  const stylexBabelPluginOptions = {
+    dev: options.dev,
+    importSources: stylex2.stylexImports,
+    ...stylex2
+  };
+  const plugins = [
+    ...((_a = stylex2.babelConfig) == null ? void 0 : _a.plugins) || [],
+    ...getSyntaxPlugins(extname),
+    jsxSyntaxPlugin,
+    stylexBabelPlugin.withOptions(stylexBabelPluginOptions)
+  ];
+  const { code, map, metadata } = await transformAsync(
+    inputCode,
+    {
+      babelrc: (_b = stylex2.babelConfig) == null ? void 0 : _b.babelrc,
+      filename: id,
+      presets: (_c = stylex2.babelConfig) == null ? void 0 : _c.presets,
+      plugins
+    }
+  );
+  if (metadata.stylex && metadata.stylex.length > 0) {
+    stylexRules[id] = metadata.stylex;
+  }
+  if (!((_d = stylex2.babelConfig) == null ? void 0 : _d.babelrc)) {
+    return { code, map, stylexRules };
+  }
+  return { code, stylexRules };
+}
+
+// src/index.ts
+var unpluginFactory = (rawOptions = {}) => {
+  const options = getOptions(rawOptions);
+  const stylexRules = {};
+  let viteConfig = null;
+  return {
+    name: PLUGIN_NAME,
+    async transform(code, id) {
+      const dir = path.dirname(id);
+      const basename2 = path.basename(id);
+      const file = path.join(dir, basename2.includes("?") ? basename2.split("?")[0] : basename2);
+      if (!options.stylex.stylexImports.some((importName) => code.includes(importName))) {
+        return;
+      }
+      const context = {
+        id: file,
+        inputCode: code,
+        pluginContext: this,
+        options
+      };
+      try {
+        const result = await transformer(context);
+        if (result.stylexRules && result.stylexRules[id]) {
+          stylexRules[id] = result.stylexRules[id];
+        }
+        return result;
+      } catch (error) {
+        console.error("transform::error::", error);
+        this.error(error);
+      }
+    },
+    buildEnd() {
+      const fileName = options.stylex.filename;
+      const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers);
+      if (!collectedCSS)
+        return;
+      this.emitFile({
+        fileName,
+        source: collectedCSS,
+        type: "asset"
+      });
+    },
+    vite: {
+      config(config) {
+        viteConfig = {
+          build: config.build,
+          base: config.base
+        };
+      },
+      configResolved(config) {
+        config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
+        config.optimizeDeps.exclude.push("@stylexjs/open-props");
+      },
+      buildEnd() {
+        var _a;
+        const fileName = `${((_a = viteConfig.build) == null ? void 0 : _a.assetsDir) ?? "assets"}/${options.stylex.filename}`;
+        const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers);
+        if (!collectedCSS)
+          return;
+        this.emitFile({
+          fileName,
+          source: collectedCSS,
+          type: "asset"
+        });
+      },
+      transformIndexHtml(html, ctx) {
+        var _a, _b;
+        const fileName = `${((_a = viteConfig.build) == null ? void 0 : _a.assetsDir) ?? "assets"}/${options.stylex.filename}`;
+        const css = (_b = ctx.bundle) == null ? void 0 : _b[fileName];
+        if (!css) {
+          return html;
+        }
+        const publicPath = path.posix.join(
+          viteConfig.base ?? "/",
+          fileName.replace(/\\/g, "/")
+        );
+        return [
+          {
+            tag: "link",
+            attrs: {
+              rel: "stylesheet",
+              href: publicPath
+            },
+            injectTo: "head"
+          }
+        ];
+      }
+    }
+  };
+};
+var unplugin = createUnplugin(unpluginFactory);
+var src_default = unplugin;
+
+export {
+  unpluginFactory,
+  unplugin,
+  src_default
+};

package/dist/chunk-NVMQARFA.cjs

@@ -0,0 +1,190 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+var _chunkN4Z3Z2PUcjs = require('./chunk-N4Z3Z2PU.cjs');
+
+// src/index.ts
+var _path = require('path'); var path = _interopRequireWildcard(_path);
+var _unplugin = require('unplugin');
+
+// src/core/build.ts
+var _babelplugin = require('@stylexjs/babel-plugin'); var _babelplugin2 = _interopRequireDefault(_babelplugin);
+function buildStylexRules(stylexRules, useCSSLayers) {
+  const rules = Object.values(stylexRules).flat();
+  if (rules.length === 0)
+    return "";
+  return _babelplugin2.default.processStylexRules(rules, useCSSLayers);
+}
+
+// src/core/options.ts
+function getOptions(options) {
+  const stylex2 = options.stylex || {};
+  const isDev = options.dev || _chunkN4Z3Z2PUcjs.isDevelopment;
+  return {
+    ...options,
+    dev: options.dev || isDev,
+    stylex: {
+      filename: stylex2.filename || "stylex.css",
+      stylexImports: stylex2.stylexImports || ["@stylexjs/stylex"],
+      runtimeInjection: _nullishCoalesce(stylex2.runtimeInjection, () => ( isDev)),
+      aliases: stylex2.aliases,
+      useCSSLayers: stylex2.useCSSLayers || false,
+      unstable_moduleResolution: stylex2.unstable_moduleResolution || { type: "commonJS", rootDir: process.cwd() },
+      babelConfig: {
+        babelrc: (stylex2.babelConfig || {}).babelrc || false,
+        plugins: (stylex2.babelConfig || {}).plugins || [],
+        presets: (stylex2.babelConfig || {}).presets || []
+      },
+      ...stylex2
+    }
+  };
+}
+
+// src/core/transformer.ts
+
+var _core = require('@babel/core');
+var _pluginsyntaxjsx = require('@babel/plugin-syntax-jsx'); var _pluginsyntaxjsx2 = _interopRequireDefault(_pluginsyntaxjsx);
+
+
+// src/core/plugins.ts
+var _pluginsyntaxtypescript = require('@babel/plugin-syntax-typescript'); var _pluginsyntaxtypescript2 = _interopRequireDefault(_pluginsyntaxtypescript);
+var _pluginsyntaxflow = require('@babel/plugin-syntax-flow'); var _pluginsyntaxflow2 = _interopRequireDefault(_pluginsyntaxflow);
+function getSyntaxPlugins(extname) {
+  const TSPlugin = extname === ".tsx" ? [[_pluginsyntaxtypescript2.default, { isTSX: true }]] : [_pluginsyntaxtypescript2.default];
+  return [".js", ".jsx"].includes(extname) ? [_pluginsyntaxflow2.default] : TSPlugin;
+}
+
+// src/core/transformer.ts
+async function transformer(context) {
+  var _a, _b, _c, _d;
+  const { id, inputCode, options } = context;
+  const stylex2 = options.stylex;
+  const extname = _path.extname.call(void 0, id);
+  const stylexRules = {};
+  const stylexBabelPluginOptions = {
+    dev: options.dev,
+    importSources: stylex2.stylexImports,
+    ...stylex2
+  };
+  const plugins = [
+    ...((_a = stylex2.babelConfig) == null ? void 0 : _a.plugins) || [],
+    ...getSyntaxPlugins(extname),
+    _pluginsyntaxjsx2.default,
+    _babelplugin2.default.withOptions(stylexBabelPluginOptions)
+  ];
+  const { code, map, metadata } = await _core.transformAsync.call(void 0, 
+    inputCode,
+    {
+      babelrc: (_b = stylex2.babelConfig) == null ? void 0 : _b.babelrc,
+      filename: id,
+      presets: (_c = stylex2.babelConfig) == null ? void 0 : _c.presets,
+      plugins
+    }
+  );
+  if (metadata.stylex && metadata.stylex.length > 0) {
+    stylexRules[id] = metadata.stylex;
+  }
+  if (!((_d = stylex2.babelConfig) == null ? void 0 : _d.babelrc)) {
+    return { code, map, stylexRules };
+  }
+  return { code, stylexRules };
+}
+
+// src/index.ts
+var unpluginFactory = (rawOptions = {}) => {
+  const options = getOptions(rawOptions);
+  const stylexRules = {};
+  let viteConfig = null;
+  return {
+    name: _chunkN4Z3Z2PUcjs.PLUGIN_NAME,
+    async transform(code, id) {
+      const dir = path.dirname(id);
+      const basename2 = path.basename(id);
+      const file = path.join(dir, basename2.includes("?") ? basename2.split("?")[0] : basename2);
+      if (!options.stylex.stylexImports.some((importName) => code.includes(importName))) {
+        return;
+      }
+      const context = {
+        id: file,
+        inputCode: code,
+        pluginContext: this,
+        options
+      };
+      try {
+        const result = await transformer(context);
+        if (result.stylexRules && result.stylexRules[id]) {
+          stylexRules[id] = result.stylexRules[id];
+        }
+        return result;
+      } catch (error) {
+        console.error("transform::error::", error);
+        this.error(error);
+      }
+    },
+    buildEnd() {
+      const fileName = options.stylex.filename;
+      const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers);
+      if (!collectedCSS)
+        return;
+      this.emitFile({
+        fileName,
+        source: collectedCSS,
+        type: "asset"
+      });
+    },
+    vite: {
+      config(config) {
+        viteConfig = {
+          build: config.build,
+          base: config.base
+        };
+      },
+      configResolved(config) {
+        config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
+        config.optimizeDeps.exclude.push("@stylexjs/open-props");
+      },
+      buildEnd() {
+        var _a;
+        const fileName = `${_nullishCoalesce(((_a = viteConfig.build) == null ? void 0 : _a.assetsDir), () => ( "assets"))}/${options.stylex.filename}`;
+        const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers);
+        if (!collectedCSS)
+          return;
+        this.emitFile({
+          fileName,
+          source: collectedCSS,
+          type: "asset"
+        });
+      },
+      transformIndexHtml(html, ctx) {
+        var _a, _b;
+        const fileName = `${_nullishCoalesce(((_a = viteConfig.build) == null ? void 0 : _a.assetsDir), () => ( "assets"))}/${options.stylex.filename}`;
+        const css = (_b = ctx.bundle) == null ? void 0 : _b[fileName];
+        if (!css) {
+          return html;
+        }
+        const publicPath = path.posix.join(
+          _nullishCoalesce(viteConfig.base, () => ( "/")),
+          fileName.replace(/\\/g, "/")
+        );
+        return [
+          {
+            tag: "link",
+            attrs: {
+              rel: "stylesheet",
+              href: publicPath
+            },
+            injectTo: "head"
+          }
+        ];
+      }
+    }
+  };
+};
+var unplugin = _unplugin.createUnplugin.call(void 0, unpluginFactory);
+var src_default = unplugin;
+
+
+
+
+
+exports.unpluginFactory = unpluginFactory; exports.unplugin = unplugin; exports.src_default = src_default;

package/dist/chunk-ZBPRDZS4.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/esbuild.cjs

@@ -1,11 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
+var _chunkNVMQARFAcjs = require('./chunk-NVMQARFA.cjs');
+require('./chunk-ZBPRDZS4.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 // src/esbuild.ts
 var _unplugin = require('unplugin');
-var esbuild_default = _unplugin.createEsbuildPlugin.call(void 0, _chunkD3OQCQYPcjs.unpluginFactory);
+var esbuild_default = _unplugin.createEsbuildPlugin.call(void 0, _chunkNVMQARFAcjs.unpluginFactory);
 
 
 exports.default = esbuild_default;

package/dist/esbuild.d.cts

@@ -1,6 +1,5 @@
 import * as unplugin from 'unplugin';
 import { UnpluginStylexOptions } from './types.cjs';
-import '@rollup/pluginutils';
 
 declare const _default: (options?: UnpluginStylexOptions) => unplugin.EsbuildPlugin;
 

package/dist/esbuild.d.ts

@@ -1,6 +1,5 @@
 import * as unplugin from 'unplugin';
 import { UnpluginStylexOptions } from './types.js';
-import '@rollup/pluginutils';
 
 declare const _default: (options?: UnpluginStylexOptions) => unplugin.EsbuildPlugin;
 

package/dist/esbuild.js

@@ -1,6 +1,7 @@
 import {
   unpluginFactory
-} from "./chunk-XQ5JPTTJ.js";
+} from "./chunk-7MXMBS5H.js";
+import "./chunk-6F4PWJZI.js";
 import "./chunk-36ARBXVP.js";
 
 // src/esbuild.ts

package/dist/index.cjs

@@ -2,10 +2,11 @@
 
 
 
-var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
+var _chunkNVMQARFAcjs = require('./chunk-NVMQARFA.cjs');
+require('./chunk-ZBPRDZS4.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 
 
 
-exports.default = _chunkD3OQCQYPcjs.src_default; exports.unplugin = _chunkD3OQCQYPcjs.unplugin; exports.unpluginFactory = _chunkD3OQCQYPcjs.unpluginFactory;
+exports.default = _chunkNVMQARFAcjs.src_default; exports.unplugin = _chunkNVMQARFAcjs.unplugin; exports.unpluginFactory = _chunkNVMQARFAcjs.unpluginFactory;

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as unplugin$1 from 'unplugin';
 import { UnpluginFactory } from 'unplugin';
 import { UnpluginStylexOptions } from './types.cjs';
-import '@rollup/pluginutils';
+export { BabelConfig, StylexOptions } from './types.cjs';
 
 declare const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>;
 declare const unplugin: unplugin$1.UnpluginInstance<UnpluginStylexOptions, boolean>;
 
-export { unplugin as default, unplugin, unpluginFactory };
+export { UnpluginStylexOptions, unplugin as default, unplugin, unpluginFactory };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as unplugin$1 from 'unplugin';
 import { UnpluginFactory } from 'unplugin';
 import { UnpluginStylexOptions } from './types.js';
-import '@rollup/pluginutils';
+export { BabelConfig, StylexOptions } from './types.js';
 
 declare const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>;
 declare const unplugin: unplugin$1.UnpluginInstance<UnpluginStylexOptions, boolean>;
 
-export { unplugin as default, unplugin, unpluginFactory };
+export { UnpluginStylexOptions, unplugin as default, unplugin, unpluginFactory };

package/dist/index.js

@@ -2,7 +2,8 @@ import {
   src_default,
   unplugin,
   unpluginFactory
-} from "./chunk-XQ5JPTTJ.js";
+} from "./chunk-7MXMBS5H.js";
+import "./chunk-6F4PWJZI.js";
 import "./chunk-36ARBXVP.js";
 export {
   src_default as default,

package/dist/rspack.cjs

@@ -1,11 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
+var _chunkNVMQARFAcjs = require('./chunk-NVMQARFA.cjs');
+require('./chunk-ZBPRDZS4.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 // src/rspack.ts
 var _unplugin = require('unplugin');
-var rspack_default = _unplugin.createRspackPlugin.call(void 0, _chunkD3OQCQYPcjs.unpluginFactory);
+var rspack_default = _unplugin.createRspackPlugin.call(void 0, _chunkNVMQARFAcjs.unpluginFactory);
 
 
 exports.default = rspack_default;

package/dist/rspack.d.cts

@@ -1,6 +1,5 @@
 import * as unplugin from 'unplugin';
 import { UnpluginStylexOptions } from './types.cjs';
-import '@rollup/pluginutils';
 
 declare const _default: (options?: UnpluginStylexOptions) => unplugin.RspackPluginInstance;
 

package/dist/rspack.d.ts

@@ -1,6 +1,5 @@
 import * as unplugin from 'unplugin';
 import { UnpluginStylexOptions } from './types.js';
-import '@rollup/pluginutils';
 
 declare const _default: (options?: UnpluginStylexOptions) => unplugin.RspackPluginInstance;
 

package/dist/rspack.js

@@ -1,6 +1,7 @@
 import {
   unpluginFactory
-} from "./chunk-XQ5JPTTJ.js";
+} from "./chunk-7MXMBS5H.js";
+import "./chunk-6F4PWJZI.js";
 import "./chunk-36ARBXVP.js";
 
 // src/rspack.ts

package/dist/types.cjs

@@ -1 +1 @@
-"use strict";
+"use strict";require('./chunk-ZBPRDZS4.cjs');

package/dist/types.d.cts

@@ -1,5 +1,3 @@
-import { FilterPattern } from '@rollup/pluginutils';
-
 type BabelConfig = {
     plugins: unknown[];
     presets: unknown[];
@@ -15,13 +13,14 @@ type StylexOptions = {
         rootDir: string;
     };
     babelConfig?: BabelConfig;
+    runtimeInjection: boolean;
+    aliases?: string[];
 };
 type UnpluginStylexOptions = {
+    compiler?: string;
     dev?: boolean;
-    include?: FilterPattern;
-    exclude?: FilterPattern;
     enforce?: "post" | "pre";
     stylex?: StylexOptions;
 };
 
-export type { BabelConfig, UnpluginStylexOptions };
+export type { BabelConfig, StylexOptions, UnpluginStylexOptions };

package/dist/types.d.ts

@@ -1,5 +1,3 @@
-import { FilterPattern } from '@rollup/pluginutils';
-
 type BabelConfig = {
     plugins: unknown[];
     presets: unknown[];
@@ -15,13 +13,14 @@ type StylexOptions = {
         rootDir: string;
     };
     babelConfig?: BabelConfig;
+    runtimeInjection: boolean;
+    aliases?: string[];
 };
 type UnpluginStylexOptions = {
+    compiler?: string;
     dev?: boolean;
-    include?: FilterPattern;
-    exclude?: FilterPattern;
     enforce?: "post" | "pre";
     stylex?: StylexOptions;
 };
 
-export type { BabelConfig, UnpluginStylexOptions };
+export type { BabelConfig, StylexOptions, UnpluginStylexOptions };

package/dist/types.js

@@ -0,0 +1 @@
+import "./chunk-6F4PWJZI.js";

package/dist/vite.cjs

@@ -1,11 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
+var _chunkNVMQARFAcjs = require('./chunk-NVMQARFA.cjs');
+require('./chunk-ZBPRDZS4.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 // src/vite.ts
 var _unplugin = require('unplugin');
-var vite_default = _unplugin.createVitePlugin.call(void 0, _chunkD3OQCQYPcjs.unpluginFactory);
+var vite_default = _unplugin.createVitePlugin.call(void 0, _chunkNVMQARFAcjs.unpluginFactory);
 
 
 exports.default = vite_default;

package/dist/vite.d.cts

@@ -1,6 +1,5 @@
 import * as vite from 'vite';
 import { UnpluginStylexOptions } from './types.cjs';
-import '@rollup/pluginutils';
 
 declare const _default: (options?: UnpluginStylexOptions) => vite.Plugin<any> | vite.Plugin<any>[];
 

package/dist/vite.d.ts

@@ -1,6 +1,5 @@
 import * as vite from 'vite';
 import { UnpluginStylexOptions } from './types.js';
-import '@rollup/pluginutils';
 
 declare const _default: (options?: UnpluginStylexOptions) => vite.Plugin<any> | vite.Plugin<any>[];
 

package/dist/vite.js

@@ -1,6 +1,7 @@
 import {
   unpluginFactory
-} from "./chunk-XQ5JPTTJ.js";
+} from "./chunk-7MXMBS5H.js";
+import "./chunk-6F4PWJZI.js";
 import "./chunk-36ARBXVP.js";
 
 // src/vite.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-stylex",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "packageManager": "pnpm@8.11.0",
   "description": "Unplugin for stylex",
   "repository": "https://github.com/eryue0220/unplugin-stylex",
@@ -46,16 +46,6 @@
     },
     "./*": "./*"
   },
-  "scripts": {
-    "dev": "tsup src/*ts --watch src",
-    "build": "tsup src/*.ts --format cjs,esm --dts --splitting --clean",
-    "test": "vitest",
-    "test:update": "vitest -u",
-    "test:cov": "vitest --coverage",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
-    "check": "pnpm run lint && pnpm run typecheck",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
-  },
   "engines": {
     "node": ">=16.14.0"
   },
@@ -65,18 +55,29 @@
     "@babel/plugin-syntax-jsx": "^7.23.3",
     "@babel/plugin-syntax-typescript": "^7.23.3",
     "@rollup/pluginutils": "^5.1.0",
-    "@stylexjs/babel-plugin": "^0.3.0",
-    "unplugin": "^1.5.1"
+    "@stylexjs/babel-plugin": "^0.5.1",
+    "unplugin": "^1.7.1"
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
     "@vitest/coverage-v8": "^1.1.1",
+    "babel-plugin-syntax-hermes-parser": "^0.19.1",
     "eslint": "^8.56.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
     "vitest": "^1.1.0"
+  },
+  "scripts": {
+    "dev": "tsup src/*ts --watch src",
+    "build": "tsup src/*.ts --format cjs,esm --dts --splitting --clean",
+    "test": "vitest",
+    "test:update": "vitest -u",
+    "test:cov": "vitest --coverage",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "check": "pnpm run lint && pnpm run typecheck",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   }
-}
+}

package/src/core/build.ts

@@ -0,0 +1,9 @@
+import stylex from '@stylexjs/babel-plugin'
+import type { Rule } from '@stylexjs/babel-plugin'
+
+export function buildStylexRules(stylexRules: { [key: string]: Rule[] }, useCSSLayers: boolean): string {
+  const rules = Object.values(stylexRules).flat()
+  if (rules.length === 0) return ''
+
+  return stylex.processStylexRules(rules, useCSSLayers)
+}

package/src/core/{utils.ts → options.ts}

@@ -1,19 +1,18 @@
-import type { UnpluginStylexOptions } from '@/types'
+import type { StylexOptions, UnpluginStylexOptions } from '@/types'
 import { isDevelopment } from './constants'
 
-export function getOptions(options: UnpluginStylexOptions = ({} as UnpluginStylexOptions)) {
-  const stylex = options.stylex || {}
+export function getOptions(options: UnpluginStylexOptions) {
+  const stylex = options.stylex || ({} as StylexOptions)
+  const isDev = options.dev || isDevelopment
 
   return {
     ...options,
-    dev: options.dev || isDevelopment,
-    include: options.include || [/\.[jt]sx?$/],
-    exclude: options.exclude || [/node_modules/, /\.git/],
-    enforce: options.enforce || 'pre',
+    dev: options.dev || isDev,
     stylex: {
-      ...stylex,
       filename: stylex.filename || 'stylex.css',
-      stylexImports: stylex.stylexImports || ['stylex', '@stylexjs/stylex'],
+      stylexImports: stylex.stylexImports || ['@stylexjs/stylex'],
+      runtimeInjection: stylex.runtimeInjection ?? isDev,
+      aliases: stylex.aliases,
       useCSSLayers: stylex.useCSSLayers || false,
       unstable_moduleResolution: stylex.unstable_moduleResolution || { type: 'commonJS', rootDir: process.cwd() },
       babelConfig: {
@@ -21,6 +20,7 @@ export function getOptions(options: UnpluginStylexOptions = ({} as UnpluginStyle
         plugins: (stylex.babelConfig || {}).plugins || [],
         presets: (stylex.babelConfig || {}).presets || [],
       },
+      ...stylex,
     },
   }
 }

package/src/core/plugins.ts

@@ -0,0 +1,12 @@
+import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript'
+import flowSyntaxPlugin from '@babel/plugin-syntax-flow'
+
+export function getSyntaxPlugins(extname: string) {
+  const TSPlugin = extname === '.tsx'
+    ? [[typescriptSyntaxPlugin, { isTSX: true }]]
+    : [typescriptSyntaxPlugin]
+
+  return ['.js', '.jsx'].includes(extname)
+    ? [flowSyntaxPlugin]
+    : TSPlugin
+}

package/src/core/transformer.ts

@@ -1,61 +1,44 @@
-import * as fs from 'fs/promises'
-import * as path from 'path'
-
+import { extname as pathExtname } from 'node:path'
 import { transformAsync } from '@babel/core'
-import flowSyntaxPlugin from '@babel/plugin-syntax-flow'
 import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx'
-import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript'
 import stylexBabelPlugin from '@stylexjs/babel-plugin'
 
+import { getSyntaxPlugins } from './plugins'
+
 export async function transformer(context) {
-  const { id, source, options } = context
+  const { id, inputCode, options } = context
   const stylex = options.stylex
-  const extname = path.extname(id)
+  const extname = pathExtname(id)
   const stylexRules = {}
-
-  if (stylex.stylexImports?.some?.((importName) => source.includes(importName))) {
-    const originSource = stylex.babelConfig.babelrc
-      ? await fs.readFile(id, 'utf-8')
-      : source
-
-    const { code, map, metadata } = await transformAsync(
-      originSource,
-      {
-        babelrc: stylex.babelConfig.babelrc,
-        filename: id,
-        plugins: [
-          ...(stylex.babelConfig.plugins || []),
-          extname === '.ts'
-            ? typescriptSyntaxPlugin
-            : extname === '.tsx'
-              ? [typescriptSyntaxPlugin, { isTSX: true }]
-              : flowSyntaxPlugin,
-
-          jsxSyntaxPlugin,
-          [
-            stylexBabelPlugin,
-            {
-              dev: options.dev,
-              unstable_moduleResolution: stylex.unstable_moduleResolution,
-              importSources: stylex.stylexImports,
-              ...stylex,
-            }
-          ],
-        ],
-        presets: stylex.babelConfig.presets,
-      }
-    )
-
-    if (metadata.stylex && metadata.stylex.length > 0) {
-      stylexRules[id] = metadata.stylex
+  const stylexBabelPluginOptions = {
+    dev: options.dev,
+    importSources: stylex.stylexImports,
+    ...stylex,
+  }
+  const plugins = [
+    ...(stylex.babelConfig?.plugins || []),
+    ...getSyntaxPlugins(extname),
+    jsxSyntaxPlugin,
+    stylexBabelPlugin.withOptions(stylexBabelPluginOptions),
+  ]
+
+  const { code, map, metadata } = await transformAsync(
+    inputCode,
+    {
+      babelrc: stylex.babelConfig?.babelrc,
+      filename: id,
+      presets: stylex.babelConfig?.presets,
+      plugins,
     }
+  )
 
-    if (!stylex.babelConfig.babelrc) {
-      return { code, map, stylexRules }
-    }
+  if (metadata.stylex && metadata.stylex.length > 0) {
+    stylexRules[id] = metadata.stylex
+  }
 
-    return { code, stylexRules }
+  if (!stylex.babelConfig?.babelrc) {
+    return { code, map, stylexRules }
   }
 
-  return { code: source }
+  return { code, stylexRules }
 }

package/src/index.ts

@@ -1,33 +1,36 @@
-import { createFilter } from '@rollup/pluginutils'
-import stylexBabelPlugin from '@stylexjs/babel-plugin'
+import * as path from 'node:path'
+
 import { createUnplugin } from 'unplugin'
 import type { UnpluginFactory } from 'unplugin'
 
+import { buildStylexRules } from './core/build'
 import { PLUGIN_NAME } from './core/constants'
-import { getOptions } from './core/utils'
+import { getOptions } from './core/options'
 import { transformer } from './core/transformer'
 import type { UnpluginStylexOptions } from './types'
 
 export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined> = (rawOptions = {}) => {
   const options = getOptions(rawOptions)
-  const filter = createFilter(options.include, options.exclude)
   const stylexRules = {}
-  let viteBuildConfig = null
+  let viteConfig = null
 
   return {
     name: PLUGIN_NAME,
-    enforce: options.enforce,
 
-    transformInclude(id) {
-      return filter(id)
-    },
+    async transform(code, id) {
+      const dir = path.dirname(id)
+      const basename = path.basename(id)
+      const file = path.join(dir, basename.includes('?') ? basename.split('?')[0] : basename)
+
+      if (!options.stylex.stylexImports.some((importName) => code.includes(importName))) {
+        return
+      }
 
-    async transform(source, id) {
       const context = {
+        id: file,
+        inputCode: code,
         pluginContext: this,
         options,
-        source,
-        id,
       }
 
       try {
@@ -39,16 +42,16 @@ export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>
 
         return result
       } catch (error) {
+        console.error('transform::error::', error)
         this.error(error)
       }
     },
 
     buildEnd() {
-      const rules = Object.values(stylexRules).flat()
-      if (rules.length === 0) return
-
-      const collectedCSS = (stylexBabelPlugin as any).processStylexRules(rules, options.stylex.useCSSLayers)
       const fileName = options.stylex.filename
+      const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers)
+
+      if (!collectedCSS) return
 
       this.emitFile({
         fileName,
@@ -56,27 +59,63 @@ export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>
         type: 'asset',
       })
     },
+
     vite: {
       config(config) {
-        viteBuildConfig = config.build;
+        viteConfig = {
+          build: config.build,
+          base: config.base,
+        }
+      },
+
+      configResolved(config) {
+        config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
+        config.optimizeDeps.exclude.push('@stylexjs/open-props')
       },
+
       buildEnd() {
-        const rules = Object.values(stylexRules).flat()
-        if (!viteBuildConfig || rules.length === 0) return
+        const fileName = `${viteConfig.build?.assetsDir ?? 'assets'}/${options.stylex.filename}`
+        const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers)
 
-        const collectedCSS = (stylexBabelPlugin as any).processStylexRules(rules, options.stylex.useCSSLayers)
-        const fileName = `${viteBuildConfig.build?.assetsDir ?? 'assets'}/${options.stylex.filename}`
+        if (!collectedCSS) return
 
         this.emitFile({
           fileName,
           source: collectedCSS,
           type: 'asset',
         })
-      }
+      },
+
+      transformIndexHtml(html, ctx) {
+        const fileName = `${viteConfig.build?.assetsDir ?? 'assets'}/${options.stylex.filename}`
+        const css = ctx.bundle?.[fileName]
+
+        if (!css) {
+          return html
+        }
+
+        const publicPath = path.posix.join(
+          viteConfig.base ?? '/',
+          fileName.replace(/\\/g, '/')
+        )
+
+        return [
+          {
+            tag: 'link',
+            attrs: {
+              rel: 'stylesheet',
+              href: publicPath,
+            },
+            injectTo: 'head',
+          },
+        ]
+      },
     },
   }
 }
 
 export const unplugin = createUnplugin(unpluginFactory)
 
+export * from './types'
+
 export default unplugin

package/src/types.ts

@@ -1,12 +1,10 @@
-import type { FilterPattern } from '@rollup/pluginutils'
-
 export type BabelConfig = {
   plugins: unknown[]
   presets: unknown[]
   babelrc: boolean
 }
 
-type StylexOptions = {
+export type StylexOptions = {
   filename?: string
   stylexImports?: string[]
   classNamePrefix?: string
@@ -16,12 +14,13 @@ type StylexOptions = {
     rootDir: string
   }
   babelConfig?: BabelConfig
+  runtimeInjection: boolean
+  aliases?: string[]
 }
 
 export type UnpluginStylexOptions = {
+  compiler?: string
   dev?: boolean
-  include?: FilterPattern
-  exclude?: FilterPattern
   enforce?: "post" | "pre"
   stylex?: StylexOptions
 }

package/dist/chunk-D3OQCQYP.cjs

@@ -1,152 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
-
-
-var _chunkN4Z3Z2PUcjs = require('./chunk-N4Z3Z2PU.cjs');
-
-// src/index.ts
-var _pluginutils = require('@rollup/pluginutils');
-var _babelplugin = require('@stylexjs/babel-plugin'); var _babelplugin2 = _interopRequireDefault(_babelplugin);
-var _unplugin = require('unplugin');
-
-// src/core/utils.ts
-function getOptions(options = {}) {
-  const stylex = options.stylex || {};
-  return {
-    ...options,
-    dev: options.dev || _chunkN4Z3Z2PUcjs.isDevelopment,
-    include: options.include || [/\.[jt]sx?$/],
-    exclude: options.exclude || [/node_modules/, /\.git/],
-    enforce: options.enforce || "pre",
-    stylex: {
-      ...stylex,
-      filename: stylex.filename || "stylex.css",
-      stylexImports: stylex.stylexImports || ["stylex", "@stylexjs/stylex"],
-      useCSSLayers: stylex.useCSSLayers || false,
-      unstable_moduleResolution: stylex.unstable_moduleResolution || { type: "commonJS", rootDir: process.cwd() },
-      babelConfig: {
-        babelrc: (stylex.babelConfig || {}).babelrc || false,
-        plugins: (stylex.babelConfig || {}).plugins || [],
-        presets: (stylex.babelConfig || {}).presets || []
-      }
-    }
-  };
-}
-
-// src/core/transformer.ts
-var _promises = require('fs/promises'); var fs = _interopRequireWildcard(_promises);
-var _path = require('path'); var path = _interopRequireWildcard(_path);
-var _core = require('@babel/core');
-var _pluginsyntaxflow = require('@babel/plugin-syntax-flow'); var _pluginsyntaxflow2 = _interopRequireDefault(_pluginsyntaxflow);
-var _pluginsyntaxjsx = require('@babel/plugin-syntax-jsx'); var _pluginsyntaxjsx2 = _interopRequireDefault(_pluginsyntaxjsx);
-var _pluginsyntaxtypescript = require('@babel/plugin-syntax-typescript'); var _pluginsyntaxtypescript2 = _interopRequireDefault(_pluginsyntaxtypescript);
-
-async function transformer(context) {
-  var _a, _b;
-  const { id, source, options } = context;
-  const stylex = options.stylex;
-  const extname2 = path.extname(id);
-  const stylexRules = {};
-  if ((_b = (_a = stylex.stylexImports) == null ? void 0 : _a.some) == null ? void 0 : _b.call(_a, (importName) => source.includes(importName))) {
-    const originSource = stylex.babelConfig.babelrc ? await fs.readFile(id, "utf-8") : source;
-    const { code, map, metadata } = await _core.transformAsync.call(void 0, 
-      originSource,
-      {
-        babelrc: stylex.babelConfig.babelrc,
-        filename: id,
-        plugins: [
-          ...stylex.babelConfig.plugins || [],
-          extname2 === ".ts" ? _pluginsyntaxtypescript2.default : extname2 === ".tsx" ? [_pluginsyntaxtypescript2.default, { isTSX: true }] : _pluginsyntaxflow2.default,
-          _pluginsyntaxjsx2.default,
-          [
-            _babelplugin2.default,
-            {
-              dev: options.dev,
-              unstable_moduleResolution: stylex.unstable_moduleResolution,
-              importSources: stylex.stylexImports,
-              ...stylex
-            }
-          ]
-        ],
-        presets: stylex.babelConfig.presets
-      }
-    );
-    if (metadata.stylex && metadata.stylex.length > 0) {
-      stylexRules[id] = metadata.stylex;
-    }
-    if (!stylex.babelConfig.babelrc) {
-      return { code, map, stylexRules };
-    }
-    return { code, stylexRules };
-  }
-  return { code: source };
-}
-
-// src/index.ts
-var unpluginFactory = (rawOptions = {}) => {
-  const options = getOptions(rawOptions);
-  const filter = _pluginutils.createFilter.call(void 0, options.include, options.exclude);
-  const stylexRules = {};
-  let viteBuildConfig = null;
-  return {
-    name: _chunkN4Z3Z2PUcjs.PLUGIN_NAME,
-    enforce: options.enforce,
-    transformInclude(id) {
-      return filter(id);
-    },
-    async transform(source, id) {
-      const context = {
-        pluginContext: this,
-        options,
-        source,
-        id
-      };
-      try {
-        const result = await transformer(context);
-        if (result.stylexRules && result.stylexRules[id]) {
-          stylexRules[id] = result.stylexRules[id];
-        }
-        return result;
-      } catch (error) {
-        this.error(error);
-      }
-    },
-    buildEnd() {
-      const rules = Object.values(stylexRules).flat();
-      if (rules.length === 0)
-        return;
-      const collectedCSS = _babelplugin2.default.processStylexRules(rules, options.stylex.useCSSLayers);
-      const fileName = options.stylex.filename;
-      this.emitFile({
-        fileName,
-        source: collectedCSS,
-        type: "asset"
-      });
-    },
-    vite: {
-      config(config) {
-        viteBuildConfig = config.build;
-      },
-      buildEnd() {
-        var _a;
-        const rules = Object.values(stylexRules).flat();
-        if (!viteBuildConfig || rules.length === 0)
-          return;
-        const collectedCSS = _babelplugin2.default.processStylexRules(rules, options.stylex.useCSSLayers);
-        const fileName = `${_nullishCoalesce(((_a = viteBuildConfig.build) == null ? void 0 : _a.assetsDir), () => ( "assets"))}/${options.stylex.filename}`;
-        this.emitFile({
-          fileName,
-          source: collectedCSS,
-          type: "asset"
-        });
-      }
-    }
-  };
-};
-var unplugin = _unplugin.createUnplugin.call(void 0, unpluginFactory);
-var src_default = unplugin;
-
-
-
-
-
-exports.unpluginFactory = unpluginFactory; exports.unplugin = unplugin; exports.src_default = src_default;

package/dist/chunk-XQ5JPTTJ.js

@@ -1,152 +0,0 @@
-import {
-  PLUGIN_NAME,
-  isDevelopment
-} from "./chunk-36ARBXVP.js";
-
-// src/index.ts
-import { createFilter } from "@rollup/pluginutils";
-import stylexBabelPlugin2 from "@stylexjs/babel-plugin";
-import { createUnplugin } from "unplugin";
-
-// src/core/utils.ts
-function getOptions(options = {}) {
-  const stylex = options.stylex || {};
-  return {
-    ...options,
-    dev: options.dev || isDevelopment,
-    include: options.include || [/\.[jt]sx?$/],
-    exclude: options.exclude || [/node_modules/, /\.git/],
-    enforce: options.enforce || "pre",
-    stylex: {
-      ...stylex,
-      filename: stylex.filename || "stylex.css",
-      stylexImports: stylex.stylexImports || ["stylex", "@stylexjs/stylex"],
-      useCSSLayers: stylex.useCSSLayers || false,
-      unstable_moduleResolution: stylex.unstable_moduleResolution || { type: "commonJS", rootDir: process.cwd() },
-      babelConfig: {
-        babelrc: (stylex.babelConfig || {}).babelrc || false,
-        plugins: (stylex.babelConfig || {}).plugins || [],
-        presets: (stylex.babelConfig || {}).presets || []
-      }
-    }
-  };
-}
-
-// src/core/transformer.ts
-import * as fs from "fs/promises";
-import * as path from "path";
-import { transformAsync } from "@babel/core";
-import flowSyntaxPlugin from "@babel/plugin-syntax-flow";
-import jsxSyntaxPlugin from "@babel/plugin-syntax-jsx";
-import typescriptSyntaxPlugin from "@babel/plugin-syntax-typescript";
-import stylexBabelPlugin from "@stylexjs/babel-plugin";
-async function transformer(context) {
-  var _a, _b;
-  const { id, source, options } = context;
-  const stylex = options.stylex;
-  const extname2 = path.extname(id);
-  const stylexRules = {};
-  if ((_b = (_a = stylex.stylexImports) == null ? void 0 : _a.some) == null ? void 0 : _b.call(_a, (importName) => source.includes(importName))) {
-    const originSource = stylex.babelConfig.babelrc ? await fs.readFile(id, "utf-8") : source;
-    const { code, map, metadata } = await transformAsync(
-      originSource,
-      {
-        babelrc: stylex.babelConfig.babelrc,
-        filename: id,
-        plugins: [
-          ...stylex.babelConfig.plugins || [],
-          extname2 === ".ts" ? typescriptSyntaxPlugin : extname2 === ".tsx" ? [typescriptSyntaxPlugin, { isTSX: true }] : flowSyntaxPlugin,
-          jsxSyntaxPlugin,
-          [
-            stylexBabelPlugin,
-            {
-              dev: options.dev,
-              unstable_moduleResolution: stylex.unstable_moduleResolution,
-              importSources: stylex.stylexImports,
-              ...stylex
-            }
-          ]
-        ],
-        presets: stylex.babelConfig.presets
-      }
-    );
-    if (metadata.stylex && metadata.stylex.length > 0) {
-      stylexRules[id] = metadata.stylex;
-    }
-    if (!stylex.babelConfig.babelrc) {
-      return { code, map, stylexRules };
-    }
-    return { code, stylexRules };
-  }
-  return { code: source };
-}
-
-// src/index.ts
-var unpluginFactory = (rawOptions = {}) => {
-  const options = getOptions(rawOptions);
-  const filter = createFilter(options.include, options.exclude);
-  const stylexRules = {};
-  let viteBuildConfig = null;
-  return {
-    name: PLUGIN_NAME,
-    enforce: options.enforce,
-    transformInclude(id) {
-      return filter(id);
-    },
-    async transform(source, id) {
-      const context = {
-        pluginContext: this,
-        options,
-        source,
-        id
-      };
-      try {
-        const result = await transformer(context);
-        if (result.stylexRules && result.stylexRules[id]) {
-          stylexRules[id] = result.stylexRules[id];
-        }
-        return result;
-      } catch (error) {
-        this.error(error);
-      }
-    },
-    buildEnd() {
-      const rules = Object.values(stylexRules).flat();
-      if (rules.length === 0)
-        return;
-      const collectedCSS = stylexBabelPlugin2.processStylexRules(rules, options.stylex.useCSSLayers);
-      const fileName = options.stylex.filename;
-      this.emitFile({
-        fileName,
-        source: collectedCSS,
-        type: "asset"
-      });
-    },
-    vite: {
-      config(config) {
-        viteBuildConfig = config.build;
-      },
-      buildEnd() {
-        var _a;
-        const rules = Object.values(stylexRules).flat();
-        if (!viteBuildConfig || rules.length === 0)
-          return;
-        const collectedCSS = stylexBabelPlugin2.processStylexRules(rules, options.stylex.useCSSLayers);
-        const fileName = `${((_a = viteBuildConfig.build) == null ? void 0 : _a.assetsDir) ?? "assets"}/${options.stylex.filename}`;
-        this.emitFile({
-          fileName,
-          source: collectedCSS,
-          type: "asset"
-        });
-      }
-    }
-  };
-};
-var unplugin = createUnplugin(unpluginFactory);
-var src_default = unplugin;
-
-export {
-  unpluginFactory,
-  unplugin,
-  src_default
-};