unplugin-stylex 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # unplugin-stylex
 
+## 0.6.3
+
+### Patch Changes
+
+- [#321](https://github.com/eryue0220/unplugin-stylex/pull/321) [`cfd5f0b`](https://github.com/eryue0220/unplugin-stylex/commit/cfd5f0bbb9ca21026fd8f9094655e0b0bababcf3) Thanks [@eryue0220](https://github.com/eryue0220)! - update deps
+
+## 0.6.2
+
+### Patch Changes
+
+- [#281](https://github.com/eryue0220/unplugin-stylex/pull/281) [`e3eb53d`](https://github.com/eryue0220/unplugin-stylex/commit/e3eb53d5f30142cffa5578ec872df7244351bc4f) Thanks [@eryue0220](https://github.com/eryue0220)! - fix windows path error
+
 ## 0.6.1
 
 ### Patch Changes

package/README.md

@@ -1,29 +1,46 @@
 # 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)
 
-## Installation
+`unplugin-stylex` brings StyleX transform support to multiple bundlers via [unplugin](https://github.com/unjs/unplugin).
 
-Install the package from the following command
+## Installation
 
-```shell
-npm install unplugin-stylex --save-dev
+```bash
+npm i -D unplugin-stylex @stylexjs/stylex
 ```
 
-or with yarn:
+or
 
-```shell
-yarn add unplugin-stylex --save-dev
+```bash
+yarn add -D unplugin-stylex @stylexjs/stylex
 ```
 
-or with pnpm:
+or
 
-```shell
-pnpm i unplugin-stylex --save-dev
+```bash
+pnpm add -D unplugin-stylex @stylexjs/stylex
 ```
 
-## Configuration
+## Requirements
+
+- Node.js: `^20.19.0 || >=22.12.0`
+- Peer dependency: `@stylexjs/stylex@0.x`
+
+## Supported Targets
+
+- Vite (`unplugin-stylex/vite`)
+- Astro integration (`unplugin-stylex/astro`)
+- Esbuild (`unplugin-stylex/esbuild`)
+- Farm (`unplugin-stylex/farm`)
+- Rspack (`unplugin-stylex/rspack`)
+- RSBuild (through Rspack plugin in `tools.rspack.plugins`)
+- Rolldown (`unplugin-stylex/rolldown`)
+- Rollup (`unplugin-stylex/rollup`)
+- Webpack (`unplugin-stylex/webpack`)
+
+## Quick Start
 
 <details>
-<summary>vite</summary><br>
+<summary>Vite</summary>
 
 ```js
 // vite.config.js
@@ -32,32 +49,50 @@ import stylexPlugin from 'unplugin-stylex/vite'
 
 export default defineConfig({
   plugins: [
-    stylexPlugin({ /* options */}),
+    stylexPlugin(),
+  ],
+})
+```
+
+</details>
+
+<details>
+<summary>Astro</summary>
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config'
+import stylexAstroPlugin from 'unplugin-stylex/astro'
+
+export default defineConfig({
+  integrations: [
+    stylexAstroPlugin(),
   ],
 })
 ```
 
-</br></details>
+</details>
 
 <details>
-<summary>esbuild</summary><br>
+<summary>Esbuild</summary>
 
 ```js
 // esbuild.config.js
 import { build } from 'esbuild'
 import stylexPlugin from 'unplugin-stylex/esbuild'
 
-export default {
-  plugins: [
-    stylexPlugin({ /* options */ }),
-  ],
-}
+build({
+  entryPoints: ['src/index.tsx'],
+  bundle: true,
+  outfile: 'dist/out.js',
+  plugins: [stylexPlugin()],
+})
 ```
 
-</br></details>
+</details>
 
 <details>
-<summary>farm</summary><br>
+<summary>Farm</summary>
 
 ```js
 // farm.config.js
@@ -65,106 +100,141 @@ import { defineConfig } from '@farmfe/core'
 import stylexPlugin from 'unplugin-stylex/farm'
 
 export default defineConfig({
-  // other rollup config
-  plugins: [
-    stylexPlugin({ /* options */}),
-  ],
+  plugins: [stylexPlugin()],
 })
 ```
 
-</br></details>
+</details>
 
 <details>
-<summary>rspack</summary><br>
+<summary>Rspack</summary>
 
 ```js
 // rspack.config.js
 import stylexPlugin from 'unplugin-stylex/rspack'
 
-module.exports = {
-  // other rspack config
-  plugins: [
-    stylexPlugin({ /* options */}),
-  ],
+export default {
+  plugins: [stylexPlugin()],
 }
 ```
 
-</br></details>
+</details>
 
 <details>
-<summary>rolldown</summary><br>
+<summary>RSBuild</summary>
+
+```ts
+// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core'
+import stylexPlugin from 'unplugin-stylex/rspack'
+
+export default defineConfig({
+  tools: {
+    rspack: {
+      plugins: [stylexPlugin()],
+    },
+  },
+})
+```
+
+</details>
+
+<details>
+<summary>Rolldown</summary>
 
 ```js
-// rolldown.config.js
-import stylexRolldownPlugin from 'unplugin-stylex/rolldown'
+// rolldown.config.mjs
+import { defineConfig } from 'rolldown'
+import stylexPlugin from 'unplugin-stylex/rolldown'
 
-export default {
-  // other rolldown config
-  plugins: [
-    stylexRolldownPlugin({ /* options */}),
-  ],
-}
+export default defineConfig({
+  plugins: [stylexPlugin()],
+})
 ```
 
-</br></details>
+</details>
 
 <details>
-<summary>rollup</summary><br>
+<summary>Rollup</summary>
 
 ```js
 // rollup.config.js
-import stylexRollupPlugin from 'unplugin-stylex/rollup'
+import stylexPlugin from 'unplugin-stylex/rollup'
 
 export default {
-  // other rollup config
-  plugins: [
-    stylexRollupPlugin({ /* options */}),
-  ],
+  plugins: [stylexPlugin()],
 }
 ```
 
-</br></details>
+</details>
 
 <details>
-<summary>webpack</summary><br>
+<summary>Webpack</summary>
 
 ```js
 // webpack.config.js
-import stylexWebpackPlugin from 'unplugin-stylex/webpack'
+const stylexPlugin = require('unplugin-stylex/webpack').default
 
 module.exports = {
-  // other webpack config
-  plugins: [
-    stylexWebpackPlugin({ /* options */}),
-  ],
+  plugins: [stylexPlugin()],
 }
 ```
 
-</br></details>
-
-## Usage
-
-More detail usage can check [examples](https://github.com/eryue0220/unplugin-stylex/tree/main/examples)
+</details>
 
 ## Options
 
-Current support argument, which may have change in the future
-
-### options.dev
+```ts
+type UnpluginStylexOptions = {
+  validExts?: RegExp | string[]
+  dev?: boolean
+  stylex?: {
+    filename?: string
+    aliases?: Record<string, string | string[]>
+    stylexImports?: string[]
+    classNamePrefix?: string
+    unstable_moduleResolution?: {
+      type: 'commonJS' | 'haste'
+      rootDir: string
+    }
+    babelConfig?: {
+      plugins: unknown[]
+      presets: unknown[]
+      babelrc: boolean
+    }
+    useCSSLayers?: boolean
+    genConditionalClasses?: boolean
+    treeshakeCompensation?: boolean
+    runtimeInjection?: boolean
+  }
+}
+```
 
-#### options.stylex.runtimeInjection
+### Defaults
 
-#### options.stylex.classNamePrefix
+- `validExts`: `/\.[mc]?[jt]sx?$|\.svelte$|\.vue$/`
+- `dev`: inferred from environment (`NODE_ENV` / `BABEL_ENV`) unless explicitly set
+- `stylex.filename`: `'stylex.css'`
+- `stylex.stylexImports`: `['@stylexjs/stylex']`
+- `stylex.runtimeInjection`: follows `dev` by default
+- `stylex.aliases`: auto-reads from project config (TS paths + bundler aliases when available)
+- `stylex.useCSSLayers`: `false`
+- `stylex.unstable_moduleResolution`: `{ type: 'commonJS', rootDir: process.cwd() }`
+- `stylex.babelConfig`: `{ babelrc: false, plugins: [], presets: [] }`
 
-#### options.stylex.useCSSLayers
+## Notes
 
-#### options.stylex.babelConfig
+- The plugin only transforms modules containing at least one `stylexImports` source.
+- Output CSS is emitted as an asset file (`stylex.css` by default).
+- Vite and Astro integrations also handle dev server CSS serving and HTML injection.
+- Astro integration defaults `validExts` to include `.astro` and `.stylex`.
+- For Farm projects, `treeshakeCompensation: true` is usually needed (see example config).
 
-#### options.stylex.stylexImports
+## Examples
 
-#### options.stylex.unstable_moduleResolution
+- See runnable examples in [`examples`](https://github.com/eryue0220/unplugin-stylex/tree/main/examples)
 
-# Acknowledgments
+## Acknowledgments
 
 - [@stylexjs/rollup-plugin](https://github.com/facebook/stylex/tree/main/packages/rollup-plugin)
-- [vite-plugin-stylex](https://github.com/HorusGoul/vite-plugin-stylex)
+- [vite-plugin-stylex](https://github.com/HorusGoul/vite-plugin-stylex)

package/dist/astro.cjs

@@ -1,40 +1,43 @@
-"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(); } }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
 
-var _chunk7LU6DGX6cjs = require('./chunk-7LU6DGX6.cjs');
+var _chunkWDYGV6FUcjs = require('./chunk-WDYGV6FU.cjs');
 
 
 
 
 
 
-var _chunkIU3ZVEOUcjs = require('./chunk-IU3ZVEOU.cjs');
+
+
+var _chunk45JWH4GZcjs = require('./chunk-45JWH4GZ.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;
+  const configured = _chunk45JWH4GZcjs.getOptions.call(void 0, { ...options, framework: "vite" });
+  const filename = _nullishCoalesce(configured.stylex.filename, () => ( "stylex.css"));
   return {
-    name: _chunkIU3ZVEOUcjs.PLUGIN_NAME,
+    name: _chunk45JWH4GZcjs.PLUGIN_NAME,
     hooks: {
       "astro:config:setup": async ({ config, updateConfig, injectScript }) => {
-        var _a;
+        var _a, _b;
         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, {});
+        if (!_chunk45JWH4GZcjs.stylexRulesStore.has(_chunk45JWH4GZcjs.STORE_KEY)) {
+          _chunk45JWH4GZcjs.stylexRulesStore.set(_chunk45JWH4GZcjs.STORE_KEY, {});
         }
         config.vite.plugins ??= [];
-        const basePlugin = _chunk7LU6DGX6cjs.vite_default.call(void 0, astroOptions);
+        const basePlugin = _chunkWDYGV6FUcjs.vite_default.call(void 0, astroOptions);
         const wrappedPlugin = {
           ...basePlugin,
-          getStylexRules: () => _chunkIU3ZVEOUcjs.stylexRulesStore.get(_chunkIU3ZVEOUcjs.STORE_KEY) || {}
+          getStylexRules: () => _chunk45JWH4GZcjs.stylexRulesStore.get(_chunk45JWH4GZcjs.STORE_KEY) || {}
         };
         const base = _nullishCoalesce(config.base, () => ( "/"));
-        const cssPath = path.posix.join(base, filename).replace(/\/+/g, "/");
+        const assetsDir = typeof ((_a = config.build) == null ? void 0 : _a.assets) === "string" ? config.build.assets : "_astro";
+        const fileName = _chunk45JWH4GZcjs.getStylexAssetFileName.call(void 0, filename, assetsDir);
+        const cssPath = _chunk45JWH4GZcjs.getStylexPublicPath.call(void 0, base, fileName);
         injectScript(
           "head-inline",
           `
@@ -47,7 +50,7 @@ function astro(options = {}) {
           `
         );
         config.vite.plugins.push(wrappedPlugin);
-        const currentNoExternal = _nullishCoalesce(((_a = config.vite.ssr) == null ? void 0 : _a.noExternal), () => ( []));
+        const currentNoExternal = _nullishCoalesce(((_b = config.vite.ssr) == null ? void 0 : _b.noExternal), () => ( []));
         const noExternal = Array.isArray(currentNoExternal) ? [...currentNoExternal] : [];
         if (!noExternal.includes("@stylexjs/stylex")) {
           noExternal.push("@stylexjs/stylex");
@@ -63,11 +66,13 @@ function astro(options = {}) {
       "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)));
+          const assetsDir = "_astro";
+          const fileName = _chunk45JWH4GZcjs.getStylexAssetFileName.call(void 0, filename, assetsDir);
+          const cssPath = _chunk45JWH4GZcjs.getStylexPublicPath.call(void 0, "/", fileName);
+          const normalizedUrl = (_a = req.url) == null ? void 0 : _a.split("?")[0];
+          if (normalizedUrl === cssPath || normalizedUrl === `/${filename}` || (normalizedUrl == null ? void 0 : normalizedUrl.endsWith(`/${filename}`)) || normalizedUrl === filename) {
+            const stylexRules = _nullishCoalesce(_chunk45JWH4GZcjs.stylexRulesStore.get(_chunk45JWH4GZcjs.STORE_KEY), () => ( {}));
+            const collectedCSS = _chunk45JWH4GZcjs.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, () => ( "")));

package/dist/astro.d.ts

@@ -1,13 +1,41 @@
-import { UnpluginStylexOptions } from './types.js';
-import '@babel/core';
-import '@stylexjs/babel-plugin';
-
 /**
  * This entry file is for astro plugin.
  *
  * @module
  */
-
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { UnpluginStylexOptions } from './types';
+type AstroConfigSetupContext = {
+    config: {
+        base?: string;
+        build?: {
+            assets?: string;
+        };
+        vite: {
+            plugins?: unknown[];
+            ssr?: {
+                noExternal?: unknown;
+            };
+        };
+    };
+    updateConfig: (config: {
+        vite: {
+            ssr: {
+                noExternal: string[];
+            };
+        };
+    }) => void;
+    injectScript: (stage: string, content: string) => void;
+};
+type AstroServerSetupContext = {
+    server: {
+        middlewares: {
+            use: (handler: (req: IncomingMessage & {
+                url?: string;
+            }, res: ServerResponse, next: () => void) => void) => void;
+        };
+    };
+};
 /**
  * Astro plugin
  *
@@ -22,18 +50,12 @@ import '@stylexjs/babel-plugin';
  *   ],
  * })
  */
-declare function astro(options?: UnpluginStylexOptions): {
+export default 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;
+        'astro:config:setup': ({ config, updateConfig, injectScript }: AstroConfigSetupContext) => Promise<void>;
+        'astro:server:setup': ({ server }: AstroServerSetupContext) => void;
     };
 };
-
-export { astro as default };
+export {};
+//# sourceMappingURL=astro.d.ts.map

package/dist/astro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"astro.d.ts","sourceRoot":"","sources":["../src/astro.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAGhE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAIpD,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE;YACN,MAAM,CAAC,EAAE,MAAM,CAAA;SAChB,CAAA;QACD,IAAI,EAAE;YACJ,OAAO,CAAC,EAAE,OAAO,EAAE,CAAA;YACnB,GAAG,CAAC,EAAE;gBACJ,UAAU,CAAC,EAAE,OAAO,CAAA;aACrB,CAAA;SACF,CAAA;KACF,CAAA;IACD,YAAY,EAAE,CAAC,MAAM,EAAE;QACrB,IAAI,EAAE;YACJ,GAAG,EAAE;gBACH,UAAU,EAAE,MAAM,EAAE,CAAA;aACrB,CAAA;SACF,CAAA;KACF,KAAK,IAAI,CAAA;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACvD,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE;QACN,WAAW,EAAE;YACX,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,eAAe,GAAG;gBAAE,GAAG,CAAC,EAAE,MAAM,CAAA;aAAE,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,CAAA;SACjH,CAAA;KACF,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;GAaG;AAEH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,OAAO,GAAE,qBAA0B;;;uEAQU,uBAAuB;2CAyDzD,uBAAuB;;EA2B/D"}

package/dist/astro.js

@@ -1,25 +1,26 @@
 import {
   vite_default
-} from "./chunk-F2LYIKCV.js";
+} from "./chunk-5RGNKABP.js";
 import {
   PLUGIN_NAME,
   STORE_KEY,
   buildStylexRules,
   getOptions,
+  getStylexAssetFileName,
+  getStylexPublicPath,
   stylexRulesStore
-} from "./chunk-B3OIQQRZ.js";
+} from "./chunk-SSMUIUHR.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;
+  const filename = configured.stylex.filename ?? "stylex.css";
   return {
     name: PLUGIN_NAME,
     hooks: {
       "astro:config:setup": async ({ config, updateConfig, injectScript }) => {
-        var _a;
+        var _a, _b;
         const astroOptions = {
           ...options,
           validExts: options.validExts ?? /\.[mc]?[jt]sx?$|\.astro$|\.stylex$/
@@ -34,7 +35,9 @@ function astro(options = {}) {
           getStylexRules: () => stylexRulesStore.get(STORE_KEY) || {}
         };
         const base = config.base ?? "/";
-        const cssPath = path.posix.join(base, filename).replace(/\/+/g, "/");
+        const assetsDir = typeof ((_a = config.build) == null ? void 0 : _a.assets) === "string" ? config.build.assets : "_astro";
+        const fileName = getStylexAssetFileName(filename, assetsDir);
+        const cssPath = getStylexPublicPath(base, fileName);
         injectScript(
           "head-inline",
           `
@@ -47,7 +50,7 @@ function astro(options = {}) {
           `
         );
         config.vite.plugins.push(wrappedPlugin);
-        const currentNoExternal = ((_a = config.vite.ssr) == null ? void 0 : _a.noExternal) ?? [];
+        const currentNoExternal = ((_b = config.vite.ssr) == null ? void 0 : _b.noExternal) ?? [];
         const noExternal = Array.isArray(currentNoExternal) ? [...currentNoExternal] : [];
         if (!noExternal.includes("@stylexjs/stylex")) {
           noExternal.push("@stylexjs/stylex");
@@ -63,9 +66,11 @@ function astro(options = {}) {
       "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 assetsDir = "_astro";
+          const fileName = getStylexAssetFileName(filename, assetsDir);
+          const cssPath = getStylexPublicPath("/", fileName);
+          const normalizedUrl = (_a = req.url) == null ? void 0 : _a.split("?")[0];
+          if (normalizedUrl === cssPath || normalizedUrl === `/${filename}` || (normalizedUrl == null ? void 0 : normalizedUrl.endsWith(`/${filename}`)) || normalizedUrl === 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");