unplugin-stylex 0.5.3 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # unplugin-stylex
 
+## 0.5.5
+
+### Patch Changes
+
+- [#119](https://github.com/eryue0220/unplugin-stylex/pull/119) [`9bb6f3c`](https://github.com/eryue0220/unplugin-stylex/commit/9bb6f3c5936fb50e950bb84e7d614f5e9665f817) Thanks [@sfc-gh-alisowski](https://github.com/sfc-gh-alisowski)! - Upgrade stylex
+
+## 0.5.4
+
+### Patch Changes
+
+- [#116](https://github.com/eryue0220/unplugin-stylex/pull/116) [`5986904`](https://github.com/eryue0220/unplugin-stylex/commit/5986904215a04fa5774167a5031c7ddc5de000f8) Thanks [@eryue0220](https://github.com/eryue0220)! - upgrade deps and add alias feature
+
 ## 0.5.3
 
 ### Patch Changes

package/dist/chunk-NQYXBBLC.cjs

@@ -0,0 +1,434 @@
+"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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/index.ts
+var _path = require('path'); var path2 = _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/utils/constants.ts
+var PLUGIN_NAME = "unplugin-stylex";
+var isDevelopment = process.env.NODE_ENV !== "production" || process.env.BABEL_ENV !== "production";
+var EXTENSIONS = [".js", ".mjs", ".cjs", ".ts", ".mts", ".cts"];
+
+// src/utils/get-aliases.ts
+var _fs = require('fs'); var _fs2 = _interopRequireDefault(_fs);
+
+function makePathAbsolute(value) {
+  return path2.default.isAbsolute(value) ? value : path2.default.resolve(process.cwd(), value);
+}
+function isTSProject() {
+  const tsConfigPath = path2.default.resolve(process.cwd(), "tsconfig.json");
+  return _fs2.default.existsSync(tsConfigPath);
+}
+function getAliasesFromTSConfig() {
+  var _a;
+  if (!isTSProject()) {
+    return void 0;
+  }
+  try {
+    const tsConfigPath = path2.default.resolve(process.cwd(), "tsconfig.json");
+    const tsConfigContent = _fs2.default.readFileSync(tsConfigPath, "utf8");
+    const tsConfig = JSON.parse(tsConfigContent);
+    const paths = ((_a = tsConfig == null ? void 0 : tsConfig.compilerOptions) == null ? void 0 : _a.paths) || {};
+    const aliases = Object.entries(paths).reduce(
+      (acc, [key, value]) => {
+        acc[key] = Array.isArray(value) ? value.map(makePathAbsolute) : makePathAbsolute(value);
+        return acc;
+      },
+      {}
+    );
+    return Object.keys(aliases).length > 0 ? aliases : void 0;
+  } catch (error) {
+    return void 0;
+  }
+}
+function getAliasesFromViteConfig() {
+  var _a;
+  const configFiles = EXTENSIONS.map((ext) => `vite.config${ext}`);
+  const configPath = configFiles.find((file) => _fs2.default.existsSync(path2.default.resolve(process.cwd(), file)));
+  if (!configPath) {
+    return {};
+  }
+  try {
+    const configModule = __require(path2.default.resolve(process.cwd(), configPath));
+    const config = typeof configModule === "function" ? configModule() : configModule.default || configModule;
+    const aliases = ((_a = config == null ? void 0 : config.resolve) == null ? void 0 : _a.alias) || {};
+    return Object.entries(aliases).reduce(
+      (acc, [key, value]) => {
+        acc[key] = makePathAbsolute(value);
+        return acc;
+      },
+      {}
+    );
+  } catch (error) {
+    return {};
+  }
+}
+function getAliasesFromWebpackConfig() {
+  var _a;
+  const configFiles = EXTENSIONS.map((ext) => `webpack.config${ext}`);
+  const configPath = configFiles.find((file) => _fs2.default.existsSync(path2.default.resolve(process.cwd(), file)));
+  if (!configPath) {
+    return {};
+  }
+  try {
+    const configContent = _fs2.default.readFileSync(path2.default.resolve(process.cwd(), configPath), "utf8");
+    const config = JSON.parse(configContent);
+    const aliases = ((_a = config == null ? void 0 : config.resolve) == null ? void 0 : _a.alias) || {};
+    return Object.entries(aliases).reduce(
+      (acc, [key, value]) => {
+        acc[key] = makePathAbsolute(value);
+        return acc;
+      },
+      {}
+    );
+  } catch (error) {
+    return {};
+  }
+}
+function getAliasesFromRollupConfig() {
+  var _a, _b;
+  const configFiles = EXTENSIONS.map((ext) => `rollup.config${ext}`);
+  const configPath = configFiles.find((file) => _fs2.default.existsSync(path2.default.resolve(process.cwd(), file)));
+  if (!configPath) {
+    return {};
+  }
+  try {
+    const configModule = __require(path2.default.resolve(process.cwd(), configPath));
+    const config = typeof configModule === "function" ? configModule() : configModule.default || configModule;
+    const aliasPlugin = (_a = config == null ? void 0 : config.plugins) == null ? void 0 : _a.find((plugin) => {
+      if (typeof plugin === "object" && plugin !== null) {
+        return plugin.name === "@rollup/plugin-alias";
+      }
+      return false;
+    });
+    if (!aliasPlugin) {
+      return {};
+    }
+    const aliases = ((_b = aliasPlugin == null ? void 0 : aliasPlugin.options) == null ? void 0 : _b.entries) || {};
+    return Object.entries(aliases).reduce(
+      (acc, [key, value]) => {
+        acc[key] = makePathAbsolute(value);
+        return acc;
+      },
+      {}
+    );
+  } catch (error) {
+    return {};
+  }
+}
+function getAliasesFromRolldownConfig() {
+  var _a;
+  const configFiles = EXTENSIONS.map((ext) => `vite.config${ext}`);
+  const configPath = configFiles.find((file) => _fs2.default.existsSync(path2.default.resolve(process.cwd(), file)));
+  if (!configPath) {
+    return {};
+  }
+  try {
+    const configModule = __require(path2.default.resolve(process.cwd(), configPath));
+    const config = typeof configModule === "function" ? configModule() : configModule.default || configModule;
+    const aliases = ((_a = config == null ? void 0 : config.resolve) == null ? void 0 : _a.alias) || {};
+    return Object.entries(aliases).reduce(
+      (acc, [key, value]) => {
+        acc[key] = makePathAbsolute(value);
+        return acc;
+      },
+      {}
+    );
+  } catch (error) {
+    return {};
+  }
+}
+function getAliasesFromEsbuildConfig() {
+  return {};
+}
+function getAliasesFromRspackConfig() {
+  var _a;
+  const configFiles = EXTENSIONS.map((ext) => `rspack.config${ext}`);
+  const configPath = configFiles.find((file) => _fs2.default.existsSync(path2.default.resolve(process.cwd(), file)));
+  if (!configPath) {
+    return {};
+  }
+  try {
+    const configContent = _fs2.default.readFileSync(path2.default.resolve(process.cwd(), configPath), "utf8");
+    const config = JSON.parse(configContent);
+    const aliases = ((_a = config == null ? void 0 : config.resolve) == null ? void 0 : _a.alias) || {};
+    return Object.entries(aliases).reduce(
+      (acc, [key, value]) => {
+        acc[key] = makePathAbsolute(value);
+        return acc;
+      },
+      {}
+    );
+  } catch (error) {
+    return {};
+  }
+}
+function getAliasesFromFarmConfig() {
+  var _a;
+  const configFiles = EXTENSIONS.map((ext) => `farm.config${ext}`);
+  const configPath = configFiles.find((file) => _fs2.default.existsSync(path2.default.resolve(process.cwd(), file)));
+  if (!configPath) {
+    return {};
+  }
+  try {
+    const configModule = __require(path2.default.resolve(process.cwd(), configPath));
+    const config = typeof configModule === "function" ? configModule() : configModule.default || configModule;
+    const aliases = ((_a = config == null ? void 0 : config.resolve) == null ? void 0 : _a.alias) || {};
+    return Object.entries(aliases).reduce(
+      (acc, [key, value]) => {
+        acc[key] = makePathAbsolute(value);
+        return acc;
+      },
+      {}
+    );
+  } catch (error) {
+    return {};
+  }
+}
+function getAliases(framework) {
+  const tsAliases = getAliasesFromTSConfig();
+  if (framework === "vite") {
+    const viteAliases = getAliasesFromViteConfig();
+    return {
+      ...tsAliases,
+      ...viteAliases
+    };
+  }
+  if (framework === "webpack") {
+    const webpackAliases = getAliasesFromWebpackConfig();
+    return {
+      ...tsAliases,
+      ...webpackAliases
+    };
+  }
+  if (framework === "rollup") {
+    const rollupAliases = getAliasesFromRollupConfig();
+    return {
+      ...tsAliases,
+      ...rollupAliases
+    };
+  }
+  if (framework === "rolldown") {
+    const rolldownAliases = getAliasesFromRolldownConfig();
+    return {
+      ...tsAliases,
+      ...rolldownAliases
+    };
+  }
+  if (framework === "esbuild") {
+    const esbuildAliases = getAliasesFromEsbuildConfig();
+    return {
+      ...tsAliases,
+      ...esbuildAliases
+    };
+  }
+  if (framework === "rspack") {
+    const rspackAliases = getAliasesFromRspackConfig();
+    return {
+      ...tsAliases,
+      ...rspackAliases
+    };
+  }
+  if (framework === "farm") {
+    const farmAliases = getAliasesFromFarmConfig();
+    return {
+      ...tsAliases,
+      ...farmAliases
+    };
+  }
+}
+
+// src/core/options.ts
+function getOptions(options) {
+  var _a, _b, _c;
+  const projectAliases = getAliases(options.framework);
+  const stylex2 = options.stylex || {};
+  const isDev = options.dev || isDevelopment;
+  return {
+    ...options,
+    dev: isDev,
+    // .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts
+    validExts: _nullishCoalesce(options.validExts, () => ( /\.[mc]?[jt]sx?$/)),
+    stylex: {
+      filename: stylex2.filename || "stylex.css",
+      stylexImports: stylex2.stylexImports || ["@stylexjs/stylex"],
+      runtimeInjection: _nullishCoalesce(stylex2.runtimeInjection, () => ( isDev)),
+      aliases: _nullishCoalesce(_nullishCoalesce(stylex2.aliases, () => ( projectAliases)), () => ( {})),
+      useCSSLayers: stylex2.useCSSLayers || false,
+      unstable_moduleResolution: stylex2.unstable_moduleResolution || { type: "commonJS", rootDir: process.cwd() },
+      babelConfig: {
+        babelrc: _nullishCoalesce(((_a = stylex2.babelConfig) == null ? void 0 : _a.babelrc), () => ( false)),
+        plugins: _nullishCoalesce(((_b = stylex2.babelConfig) == null ? void 0 : _b.plugins), () => ( [])),
+        presets: _nullishCoalesce(((_c = stylex2.babelConfig) == null ? void 0 : _c.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 _pluginsyntaxflow = require('@babel/plugin-syntax-flow'); var _pluginsyntaxflow2 = _interopRequireDefault(_pluginsyntaxflow);
+var _pluginsyntaxtypescript = require('@babel/plugin-syntax-typescript'); var _pluginsyntaxtypescript2 = _interopRequireDefault(_pluginsyntaxtypescript);
+function getSyntaxPlugins(extname2) {
+  const TSPlugin = extname2 === ".tsx" ? [[_pluginsyntaxtypescript2.default, { isTSX: true }]] : [_pluginsyntaxtypescript2.default];
+  return [".js", ".jsx"].includes(extname2) ? [_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 extname2 = _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(extname2),
+    _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,
+      // compatible for farm, null will occur an error
+      map: map || void 0,
+      stylexRules
+    };
+  }
+  return { code, stylexRules };
+}
+
+// src/index.ts
+var unpluginFactory = (rawOptions, meta) => {
+  const options = getOptions({ ...rawOptions || {}, framework: meta.framework });
+  const stylexRules = {};
+  let viteConfig = null;
+  return {
+    name: PLUGIN_NAME,
+    transformInclude(id) {
+      const validExts = options.validExts;
+      const extname2 = path2.extname(id);
+      const questionMarkIndex = extname2.indexOf("?");
+      const validExtName = questionMarkIndex > -1 ? extname2.slice(0, questionMarkIndex) : extname2;
+      return validExts instanceof RegExp ? validExts.test(validExtName) : validExts.includes(validExtName);
+    },
+    async transform(code, id) {
+      var _a;
+      const dir = path2.dirname(id);
+      const basename2 = path2.basename(id);
+      const file = path2.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 ((_a = result.stylexRules) == null ? void 0 : _a[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 == null ? void 0 : 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 == null ? void 0 : 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 = path2.posix.join(_nullishCoalesce((viteConfig == null ? void 0 : viteConfig.base), () => ( "/")), fileName.replace(/\\/g, "/"));
+        return [
+          {
+            tag: "link",
+            attrs: {
+              rel: "stylesheet",
+              href: publicPath
+            },
+            injectTo: "head"
+          }
+        ];
+      }
+    }
+  };
+};
+var unplugin = _unplugin.createUnplugin.call(void 0, unpluginFactory);
+var index_default = unplugin;
+
+
+
+
+
+exports.unpluginFactory = unpluginFactory; exports.unplugin = unplugin; exports.index_default = index_default;