unplugin-stylex 0.5.4 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # unplugin-stylex
 
+## 0.6.0
+
+### Minor Changes
+
+- [#164](https://github.com/eryue0220/unplugin-stylex/pull/164) [`7d76bb1`](https://github.com/eryue0220/unplugin-stylex/commit/7d76bb1699af43a47a151e4ec80a633983544ac0) Thanks [@eryue0220](https://github.com/eryue0220)! - Fixed bug and support more frameworks
+
+## 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

package/README.md

@@ -1,8 +1,5 @@
 # unplugin-stylex · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/eryue0220/unplugin-stylex/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/unplugin-stylex.svg?style=flat)](https://www.npmjs.com/package/unplugin-stylex)
 
-> [!WARNING]  
-> This plugin is in early development and may not work as expected. Please report any issues you find.
-
 ## Installation
 
 Install the package from the following command
@@ -95,7 +92,7 @@ module.exports = {
 </br></details>
 
 <details>
-<summary>rolldown(⚠️ experimental)</summary><br>
+<summary>rolldown</summary><br>
 
 ```js
 // rolldown.config.js

package/biome.json

@@ -1,10 +1,70 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "html": {
+    "formatter": {
+      "enabled": true,
+      "indentScriptAndStyle": true,
+      "indentStyle": "space",
+      "indentWidth": 2
+    },
+    "parser": {
+      "interpolation": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "lineWidth": 120,
+      "indentWidth": 2,
+      "indentStyle": "space",
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    },
+    "linter": {
+      "enabled": false
+    },
+    "jsxRuntime": "reactClassic"
+  },
+  "json": {
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 2
+    }
+  },
   "files": {
-    "ignoreUnknown": false,
-    "ignore": [".github/*", "biomejs.json", "dist/*", "node_modules/*", "pnpm-lock.yaml", "pnpm-workspace.yaml"]
+    "includes": [
+      "examples/**",
+      "!!**/.astro",
+      "!examples/**/node_modules",
+      "!examples/**/dist",
+      "src/**",
+      "test/**"
+    ]
   },
   "linter": {
     "enabled": true
-  }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.astro", "**/*.vue"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnusedVariables": "off",
+            "noUnusedImports": "off"
+          }
+        }
+      }
+    },
+    {
+      "includes": ["examples/rollup-example/public/index.html"],
+      "html": {
+        "formatter": {
+          "enabled": false
+        },
+        "linter": {
+          "enabled": false
+        }
+      }
+    }
+  ]
 }

package/dist/astro.cjs

@@ -0,0 +1,84 @@
+"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 _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunk7LU6DGX6cjs = require('./chunk-7LU6DGX6.cjs');
+
+
+
+
+
+
+var _chunkIU3ZVEOUcjs = require('./chunk-IU3ZVEOU.cjs');
+require('./chunk-ZBPRDZS4.cjs');
+
+// src/astro.ts
+var _path = require('path'); var path = _interopRequireWildcard(_path);
+function astro(options = {}) {
+  const configured = _chunkIU3ZVEOUcjs.getOptions.call(void 0, { ...options, framework: "vite" });
+  const filename = configured.stylex.filename;
+  return {
+    name: _chunkIU3ZVEOUcjs.PLUGIN_NAME,
+    hooks: {
+      "astro:config:setup": async ({ config, updateConfig, injectScript }) => {
+        var _a;
+        const astroOptions = {
+          ...options,
+          validExts: _nullishCoalesce(options.validExts, () => ( /\.[mc]?[jt]sx?$|\.astro$|\.stylex$/))
+        };
+        if (!_chunkIU3ZVEOUcjs.stylexRulesStore.has(_chunkIU3ZVEOUcjs.STORE_KEY)) {
+          _chunkIU3ZVEOUcjs.stylexRulesStore.set(_chunkIU3ZVEOUcjs.STORE_KEY, {});
+        }
+        config.vite.plugins ??= [];
+        const basePlugin = _chunk7LU6DGX6cjs.vite_default.call(void 0, astroOptions);
+        const wrappedPlugin = {
+          ...basePlugin,
+          getStylexRules: () => _chunkIU3ZVEOUcjs.stylexRulesStore.get(_chunkIU3ZVEOUcjs.STORE_KEY) || {}
+        };
+        const base = _nullishCoalesce(config.base, () => ( "/"));
+        const cssPath = path.posix.join(base, filename).replace(/\/+/g, "/");
+        injectScript(
+          "head-inline",
+          `
+          (function() {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = ${JSON.stringify(cssPath)};
+            document.head.appendChild(link);
+          })();
+          `
+        );
+        config.vite.plugins.push(wrappedPlugin);
+        const currentNoExternal = _nullishCoalesce(((_a = config.vite.ssr) == null ? void 0 : _a.noExternal), () => ( []));
+        const noExternal = Array.isArray(currentNoExternal) ? [...currentNoExternal] : [];
+        if (!noExternal.includes("@stylexjs/stylex")) {
+          noExternal.push("@stylexjs/stylex");
+        }
+        updateConfig({
+          vite: {
+            ssr: {
+              noExternal
+            }
+          }
+        });
+      },
+      "astro:server:setup": ({ server }) => {
+        server.middlewares.use((req, res, next) => {
+          var _a, _b;
+          const base = "/";
+          const cssPath = path.posix.join(base, filename).replace(/\/+/g, base);
+          if (req.url === cssPath || req.url === `/${filename}` || ((_a = req.url) == null ? void 0 : _a.endsWith(`/${filename}`))) {
+            const stylexRules = _nullishCoalesce(_chunkIU3ZVEOUcjs.stylexRulesStore.get(_chunkIU3ZVEOUcjs.STORE_KEY), () => ( {}));
+            const collectedCSS = _chunkIU3ZVEOUcjs.buildStylexRules.call(void 0, stylexRules, _nullishCoalesce(((_b = options.stylex) == null ? void 0 : _b.useCSSLayers), () => ( false)));
+            res.setHeader("Content-Type", "text/css");
+            res.setHeader("Cache-Control", "no-cache");
+            res.end(_nullishCoalesce(collectedCSS, () => ( "")));
+            return;
+          }
+          next();
+        });
+      }
+    }
+  };
+}
+
+
+exports.default = astro;

package/dist/astro.d.cts

@@ -0,0 +1,39 @@
+import { UnpluginStylexOptions } from './types.cjs';
+import '@babel/core';
+import '@stylexjs/babel-plugin';
+
+/**
+ * This entry file is for astro plugin.
+ *
+ * @module
+ */
+
+/**
+ * Astro plugin
+ *
+ * @example
+ *
+ * import { defineConfig } from 'astro/config'
+ * import stylexAstroPlugin from 'unplugin-stylex/astro'
+ *
+ * export default defineConfig({
+ *   integrations: [
+ *     stylexAstroPlugin(),
+ *   ],
+ * })
+ */
+declare function astro(options?: UnpluginStylexOptions): {
+    name: string;
+    hooks: {
+        'astro:config:setup': ({ config, updateConfig, injectScript }: {
+            config: any;
+            updateConfig: any;
+            injectScript: any;
+        }) => Promise<void>;
+        'astro:server:setup': ({ server }: {
+            server: any;
+        }) => void;
+    };
+};
+
+export { astro as default };

package/dist/astro.d.ts

@@ -0,0 +1,39 @@
+import { UnpluginStylexOptions } from './types.js';
+import '@babel/core';
+import '@stylexjs/babel-plugin';
+
+/**
+ * This entry file is for astro plugin.
+ *
+ * @module
+ */
+
+/**
+ * Astro plugin
+ *
+ * @example
+ *
+ * import { defineConfig } from 'astro/config'
+ * import stylexAstroPlugin from 'unplugin-stylex/astro'
+ *
+ * export default defineConfig({
+ *   integrations: [
+ *     stylexAstroPlugin(),
+ *   ],
+ * })
+ */
+declare function astro(options?: UnpluginStylexOptions): {
+    name: string;
+    hooks: {
+        'astro:config:setup': ({ config, updateConfig, injectScript }: {
+            config: any;
+            updateConfig: any;
+            injectScript: any;
+        }) => Promise<void>;
+        'astro:server:setup': ({ server }: {
+            server: any;
+        }) => void;
+    };
+};
+
+export { astro as default };

package/dist/astro.js

@@ -0,0 +1,84 @@
+import {
+  vite_default
+} from "./chunk-F2LYIKCV.js";
+import {
+  PLUGIN_NAME,
+  STORE_KEY,
+  buildStylexRules,
+  getOptions,
+  stylexRulesStore
+} from "./chunk-B3OIQQRZ.js";
+import "./chunk-6F4PWJZI.js";
+
+// src/astro.ts
+import * as path from "path";
+function astro(options = {}) {
+  const configured = getOptions({ ...options, framework: "vite" });
+  const filename = configured.stylex.filename;
+  return {
+    name: PLUGIN_NAME,
+    hooks: {
+      "astro:config:setup": async ({ config, updateConfig, injectScript }) => {
+        var _a;
+        const astroOptions = {
+          ...options,
+          validExts: options.validExts ?? /\.[mc]?[jt]sx?$|\.astro$|\.stylex$/
+        };
+        if (!stylexRulesStore.has(STORE_KEY)) {
+          stylexRulesStore.set(STORE_KEY, {});
+        }
+        config.vite.plugins ??= [];
+        const basePlugin = vite_default(astroOptions);
+        const wrappedPlugin = {
+          ...basePlugin,
+          getStylexRules: () => stylexRulesStore.get(STORE_KEY) || {}
+        };
+        const base = config.base ?? "/";
+        const cssPath = path.posix.join(base, filename).replace(/\/+/g, "/");
+        injectScript(
+          "head-inline",
+          `
+          (function() {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = ${JSON.stringify(cssPath)};
+            document.head.appendChild(link);
+          })();
+          `
+        );
+        config.vite.plugins.push(wrappedPlugin);
+        const currentNoExternal = ((_a = config.vite.ssr) == null ? void 0 : _a.noExternal) ?? [];
+        const noExternal = Array.isArray(currentNoExternal) ? [...currentNoExternal] : [];
+        if (!noExternal.includes("@stylexjs/stylex")) {
+          noExternal.push("@stylexjs/stylex");
+        }
+        updateConfig({
+          vite: {
+            ssr: {
+              noExternal
+            }
+          }
+        });
+      },
+      "astro:server:setup": ({ server }) => {
+        server.middlewares.use((req, res, next) => {
+          var _a, _b;
+          const base = "/";
+          const cssPath = path.posix.join(base, filename).replace(/\/+/g, base);
+          if (req.url === cssPath || req.url === `/${filename}` || ((_a = req.url) == null ? void 0 : _a.endsWith(`/${filename}`))) {
+            const stylexRules = stylexRulesStore.get(STORE_KEY) ?? {};
+            const collectedCSS = buildStylexRules(stylexRules, ((_b = options.stylex) == null ? void 0 : _b.useCSSLayers) ?? false);
+            res.setHeader("Content-Type", "text/css");
+            res.setHeader("Cache-Control", "no-cache");
+            res.end(collectedCSS ?? "");
+            return;
+          }
+          next();
+        });
+      }
+    }
+  };
+}
+export {
+  astro as default
+};

package/dist/chunk-7LU6DGX6.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkIU3ZVEOUcjs = require('./chunk-IU3ZVEOU.cjs');
+
+// src/vite.ts
+var _unplugin = require('unplugin');
+var vitePlugin = _unplugin.createVitePlugin.call(void 0, _chunkIU3ZVEOUcjs.unpluginFactory);
+var vite_default = vitePlugin;
+
+
+
+exports.vite_default = vite_default;

package/dist/{chunk-QPFVWZ5B.js → chunk-B3OIQQRZ.js}

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/index.ts
-import * as path2 from "node:path";
+import * as path2 from "path";
 import { createUnplugin } from "unplugin";
 
 // src/core/build.ts
@@ -23,8 +23,8 @@ var isDevelopment = process.env.NODE_ENV !== "production" || process.env.BABEL_E
 var EXTENSIONS = [".js", ".mjs", ".cjs", ".ts", ".mts", ".cts"];
 
 // src/utils/get-aliases.ts
-import fs from "node:fs";
-import path from "node:path";
+import fs from "fs";
+import path from "path";
 function makePathAbsolute(value) {
   return path.isAbsolute(value) ? value : path.resolve(process.cwd(), value);
 }
@@ -50,7 +50,7 @@ function getAliasesFromTSConfig() {
       {}
     );
     return Object.keys(aliases).length > 0 ? aliases : void 0;
-  } catch (error) {
+  } catch {
     return void 0;
   }
 }
@@ -72,7 +72,7 @@ function getAliasesFromViteConfig() {
       },
       {}
     );
-  } catch (error) {
+  } catch {
     return {};
   }
 }
@@ -94,7 +94,7 @@ function getAliasesFromWebpackConfig() {
       },
       {}
     );
-  } catch (error) {
+  } catch {
     return {};
   }
 }
@@ -125,7 +125,7 @@ function getAliasesFromRollupConfig() {
       },
       {}
     );
-  } catch (error) {
+  } catch {
     return {};
   }
 }
@@ -147,7 +147,7 @@ function getAliasesFromRolldownConfig() {
       },
       {}
     );
-  } catch (error) {
+  } catch {
     return {};
   }
 }
@@ -172,7 +172,7 @@ function getAliasesFromRspackConfig() {
       },
       {}
     );
-  } catch (error) {
+  } catch {
     return {};
   }
 }
@@ -194,7 +194,7 @@ function getAliasesFromFarmConfig() {
       },
       {}
     );
-  } catch (error) {
+  } catch {
     return {};
   }
 }
@@ -251,6 +251,10 @@ function getAliases(framework) {
   }
 }
 
+// src/utils/store.ts
+var STORE_KEY = `stylex-${PLUGIN_NAME}`;
+var stylexRulesStore = /* @__PURE__ */ new Map();
+
 // src/core/options.ts
 function getOptions(options) {
   var _a, _b, _c;
@@ -260,8 +264,8 @@ function getOptions(options) {
   return {
     ...options,
     dev: isDev,
-    // .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts
-    validExts: options.validExts ?? /\.[mc]?[jt]sx?$/,
+    // .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts, .svelte, .vue
+    validExts: options.validExts ?? /\.[mc]?[jt]sx?$|\.svelte$|\.vue$/,
     stylex: {
       filename: stylex2.filename || "stylex.css",
       stylexImports: stylex2.stylexImports || ["@stylexjs/stylex"],
@@ -279,8 +283,8 @@ function getOptions(options) {
   };
 }
 
-// src/core/transformer.ts
-import { extname as pathExtname } from "node:path";
+// src/core/transformers/default.ts
+import { extname as pathExtname } from "path";
 import { transformAsync } from "@babel/core";
 import jsxSyntaxPlugin from "@babel/plugin-syntax-jsx";
 import stylexBabelPlugin from "@stylexjs/babel-plugin";
@@ -293,11 +297,11 @@ function getSyntaxPlugins(extname2) {
   return [".js", ".jsx"].includes(extname2) ? [flowSyntaxPlugin] : TSPlugin;
 }
 
-// src/core/transformer.ts
-async function transformer(context) {
+// src/core/transformers/default.ts
+var defaultTransformer = async (context) => {
   var _a, _b, _c, _d;
-  const { id, inputCode, options } = context;
-  const stylex2 = options.stylex;
+  const { inputCode, id, options } = context;
+  const stylex2 = options.stylex ?? {};
   const extname2 = pathExtname(id);
   const stylexRules = {};
   const stylexBabelPluginOptions = {
@@ -329,12 +333,93 @@ async function transformer(context) {
     };
   }
   return { code, stylexRules };
-}
+};
+
+// src/core/transformers/astro.ts
+var astro = async (context) => {
+  const { inputCode, id, options } = context;
+  const frontmatterMatch = inputCode.match(/^---\s*\n([\s\S]*?)\n---\s*\n?([\s\S]*)$/);
+  if (!frontmatterMatch) {
+    return {
+      code: inputCode,
+      map: void 0,
+      stylexRules: {}
+    };
+  }
+  const frontmatterContent = frontmatterMatch[1];
+  const templateContent = frontmatterMatch[2] ?? "";
+  const stylex2 = options.stylex ?? {};
+  const stylexImports = stylex2.stylexImports ?? ["@stylexjs/stylex"];
+  if (!stylexImports.some((importName) => frontmatterContent.includes(importName))) {
+    return {
+      code: inputCode,
+      map: void 0,
+      stylexRules: {}
+    };
+  }
+  const ctx = {
+    id,
+    inputCode: frontmatterContent,
+    pluginContext: context.pluginContext,
+    options
+  };
+  const result = await defaultTransformer(ctx);
+  const transformedFrontmatter = `---
+${result.code}
+---`;
+  const transformedCode = transformedFrontmatter + (templateContent ? `
+${templateContent}` : "");
+  return {
+    code: transformedCode,
+    map: result.map,
+    stylexRules: result.stylexRules
+  };
+};
+
+// src/core/transformers/svelte.ts
+var svelte = async (context) => {
+  const { inputCode, id, options } = context;
+  const scriptMatch = inputCode.match(/<script([^>]*)>([\s\S]*?)<\/script>/i);
+  if (!scriptMatch) {
+    return {
+      code: inputCode,
+      map: void 0,
+      stylexRules: {}
+    };
+  }
+  const scriptAttrs = scriptMatch[1];
+  const scriptContent = scriptMatch[2];
+  const fullScriptTag = scriptMatch[0];
+  const ctx = {
+    id,
+    inputCode: scriptContent,
+    pluginContext: void 0,
+    options
+  };
+  const result = await defaultTransformer(ctx);
+  const transformedScriptTag = `<script${scriptAttrs}>${result.code}</script>`;
+  const transformedCode = inputCode.replace(fullScriptTag, transformedScriptTag);
+  return {
+    code: transformedCode,
+    map: result.map,
+    stylexRules: result.stylexRules
+  };
+};
+
+// src/core/transformers/index.ts
+var transformers = {
+  astro,
+  svelte,
+  default: defaultTransformer
+};
 
 // src/index.ts
 var unpluginFactory = (rawOptions, meta) => {
   const options = getOptions({ ...rawOptions || {}, framework: meta.framework });
-  const stylexRules = {};
+  if (!stylexRulesStore.has(STORE_KEY)) {
+    stylexRulesStore.set(STORE_KEY, {});
+  }
+  const stylexRules = stylexRulesStore.get(STORE_KEY);
   let viteConfig = null;
   return {
     name: PLUGIN_NAME,
@@ -350,6 +435,7 @@ var unpluginFactory = (rawOptions, meta) => {
       const dir = path2.dirname(id);
       const basename2 = path2.basename(id);
       const file = path2.join(dir, basename2.includes("?") ? basename2.split("?")[0] : basename2);
+      const extname2 = path2.extname(file).slice(1);
       if (!options.stylex.stylexImports.some((importName) => code.includes(importName))) {
         return;
       }
@@ -360,6 +446,7 @@ var unpluginFactory = (rawOptions, meta) => {
         options
       };
       try {
+        const transformer = transformers[extname2] ?? transformers.default;
         const result = await transformer(context);
         if ((_a = result.stylexRules) == null ? void 0 : _a[id]) {
           stylexRules[id] = result.stylexRules[id];
@@ -387,9 +474,28 @@ var unpluginFactory = (rawOptions, meta) => {
           base: config.base
         };
       },
-      configResolved(config) {
-        config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
-        config.optimizeDeps.exclude.push("@stylexjs/open-props");
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          var _a;
+          if (!req.url) {
+            next();
+            return;
+          }
+          const fileName = `${((_a = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _a.assetsDir) ?? "assets"}/${options.stylex.filename}`;
+          const cssPath = path2.posix.join((viteConfig == null ? void 0 : viteConfig.base) ?? "/", fileName.replace(/\\/g, "/")).replace(/\/+/g, "/");
+          const basePath = ((viteConfig == null ? void 0 : viteConfig.base) ?? "/").replace(/\/+$/, "") || "/";
+          const filename = options.stylex.filename;
+          const normalizedUrl = req.url.split("?")[0];
+          const isCSSRequest = normalizedUrl === cssPath || normalizedUrl === `${basePath}/${filename}` || normalizedUrl === `/${filename}` || normalizedUrl.endsWith(`/${filename}`) || normalizedUrl === filename;
+          if (isCSSRequest) {
+            const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers);
+            res.setHeader("Content-Type", "text/css");
+            res.setHeader("Cache-Control", "no-cache");
+            res.end(collectedCSS || "");
+            return;
+          }
+          next();
+        });
       },
       buildEnd() {
         var _a;
@@ -428,6 +534,11 @@ var unplugin = createUnplugin(unpluginFactory);
 var index_default = unplugin;
 
 export {
+  buildStylexRules,
+  PLUGIN_NAME,
+  STORE_KEY,
+  stylexRulesStore,
+  getOptions,
   unpluginFactory,
   unplugin,
   index_default

package/dist/chunk-F2LYIKCV.js

@@ -0,0 +1,12 @@
+import {
+  unpluginFactory
+} from "./chunk-B3OIQQRZ.js";
+
+// src/vite.ts
+import { createVitePlugin } from "unplugin";
+var vitePlugin = createVitePlugin(unpluginFactory);
+var vite_default = vitePlugin;
+
+export {
+  vite_default
+};