@stylexswc/unplugin 0.13.0 → 0.13.1-rc.2

package/README.md

@@ -75,6 +75,23 @@ module.exports = {
 
 <br></details>
 
+<details>
+<summary>Rspack</summary><br>
+
+```ts
+// rspack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('@stylexswc/unplugin/rspack')({
+      /* options */
+    }),
+  ],
+};
+```
+
+<br></details>
+
 <details>
 <summary>Nuxt</summary><br>
 
@@ -184,71 +201,101 @@ build({
 - Default: `['js', 'jsx', 'ts', 'tsx', 'mjs', 'mts']`
 - Description: File extensions to process for StyleX transformations.
 
-#### `useViteCssPipeline`
+#### `useCssPlaceholder`
 
-- Type: `boolean`
+- Type: `boolean | string`
 - Default: `false`
-- Description: **(Vite only)** Integrates StyleX-generated CSS into Vite's CSS processing pipeline as a virtual module. When enabled, StyleX CSS will be processed through Vite's CSS transformers (including PostCSS, LightningCSS, etc.) and benefit from proper HMR support.
+- Description: Enable CSS injection into CSS files via placeholder marker.
+  - When set to `true`, the plugin will look for the default `@stylex;` marker
+  - When set to a string, the plugin will use that string as the custom marker
 
 ##### Benefits
 
-- **CSS Processing**: Generated StyleX CSS goes through Vite's CSS pipeline (PostCSS, LightningCSS, etc.)
-- **Better HMR**: CSS updates are handled through Vite's native CSS HMR with proper source maps
+- **CSS Processing**: Generated StyleX CSS goes through the bundler's CSS pipeline (PostCSS, LightningCSS, css-loader, etc.)
+- **Deterministic Builds**: No race conditions or hash instability from virtual modules
 - **Consistent Output**: All CSS follows the same processing rules and bundling strategy
 - **Build Optimization**: CSS can be code-split and optimized alongside other stylesheets
+- **Works Everywhere**: Same approach works for Vite, Webpack, Rspack, esbuild, Rollup, and Farm
 
 ##### How to Use
 
+1. Create a CSS file with a marker (e.g., `global.css`):
+
+```css
+/* global.css */
+:root {
+  --brand-color: #663399;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+}
+
+@stylex;
+```
+
+2. Import the CSS file in your entry point:
+
 ```typescript
-// vite.config.ts
+// src/main.ts
+import './global.css';
+import { App } from './App';
+```
+
+3. Configure the plugin with `useCssPlaceholder`:
+
+```typescript
+// vite.config.ts (or webpack.config.js, rspack.config.js, etc.)
 import StylexRsPlugin from '@stylexswc/unplugin/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [
     StylexRsPlugin({
-      useViteCssPipeline: true,
+      useCssPlaceholder: true, // Uses default '@stylex;' marker
+      useCSSLayers: true,
     }),
   ],
 });
 ```
 
-Then import the virtual CSS module in your entry file:
+##### Using a Custom Marker
 
-```typescript
-// src/main.ts
-import 'virtual:stylex.css';
-import { App } from './App';
-```
+You can specify a custom marker string:
 
-**TypeScript Support:**
+```css
+/* global.css */
+:root {
+  --brand-color: #663399;
+}
 
-For TypeScript projects, add the type definition to your `tsconfig.json`:
+/* INJECT_STYLEX_HERE */
+```
 
-```json
-{
-  "compilerOptions": {
-    "types": ["@stylexswc/unplugin/virtual-css"]
-  }
-}
+```typescript
+StylexRsPlugin({
+  useCssPlaceholder: '/* INJECT_STYLEX_HERE */',
+  useCSSLayers: true,
+})
 ```
 
+The plugin will replace the marker with the generated StyleX CSS during the build process.
+
 > [!NOTE]
-> When `useViteCssPipeline` is enabled, you need to explicitly import `virtual:stylex.css` in your application. The plugin will no longer inject CSS automatically into the HTML.
+> When `useCssPlaceholder` is enabled, the plugin will no longer inject CSS automatically into HTML or emit a separate `stylex.css` file. The CSS is injected into your specified CSS file.
 
 > [!IMPORTANT]
-> **Reset CSS and Other Global Styles**
+> **Migration from `useViteCssPipeline`**
 >
-> The `virtual:stylex.css` module should only contain StyleX-generated CSS. If you need to include reset CSS, global styles, or other non-StyleX CSS, import them from separate CSS files:
+> The `useViteCssPipeline` option (which used virtual CSS modules) has been replaced with the `useCssPlaceholder` approach.
+> The new approach uses real CSS files instead of virtual modules, which provides:
 >
-> ```typescript
-> // src/main.ts
-> import './reset.css';        // Your reset CSS
-> import './global.css';       // Other global styles
-> import 'virtual:stylex.css'; // StyleX-generated CSS
-> ```
+> - Better compatibility across all bundlers
+> - No race conditions or timing issues
+> - Deterministic builds with stable hashes
 >
-> **Do not** put reset CSS or other styles inside the virtual module, as they should be managed separately from the StyleX-generated styles. See the examples in [`apps/vite-unplugin-virtual-css-example`](../../apps/vite-unplugin-virtual-css-example) and [`apps/vue-unplugin-virtual-css-example`](../../apps/vue-unplugin-virtual-css-example) for reference.
+> To migrate, simply create a CSS file with a marker and set `useCssPlaceholder: true` (or use a custom marker string).
 
 ### Example Configuration
 
@@ -268,7 +315,7 @@ export default defineConfig({
         exclude: ['**/*.test.*', '**/*.stories.*', '**/__tests__/**'],
       },
       useCSSLayers: true,
-      fileName: 'stylex.[hash].css',
+      useCssPlaceholder: true,
     }),
   ],
 });
@@ -343,29 +390,3 @@ StylexRsPlugin({
   },
 })
 ```
-
-**Exclude node_modules except specific packages:**
-
-```typescript
-StylexRsPlugin({
-  rsOptions: {
-    // Exclude all node_modules except @stylexjs/open-props
-    exclude: [/node_modules(?!\/@stylexjs\/open-props)/],
-  },
-})
-```
-
-**Transform only specific packages from node_modules:**
-
-```typescript
-StylexRsPlugin({
-  rsOptions: {
-    include: [
-      'src/**/*.{ts,tsx}',
-      'node_modules/@stylexjs/open-props/**/*.js',
-      'node_modules/@my-org/design-system/**/*.js',
-    ],
-    exclude: ['**/*.test.*'],
-  },
-})
-```

package/dist/astro.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkUW5Q43ZTcjs = require('./chunk-UW5Q43ZT.cjs');
+var _chunk3JYHFOPBcjs = require('./chunk-3JYHFOPB.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/astro.ts
@@ -10,7 +10,7 @@ var astro_default = (options) => ({
     "astro:config:setup": async (astro) => {
       var _a;
       (_a = astro.config.vite).plugins || (_a.plugins = []);
-      astro.config.vite.plugins.push(_chunkUW5Q43ZTcjs.index_default.vite(options));
+      astro.config.vite.plugins.push(_chunk3JYHFOPBcjs.index_default.vite(options));
     }
   }
 });

package/dist/astro.js

@@ -1,6 +1,6 @@
 import {
   index_default
-} from "./chunk-SKFER6F5.js";
+} from "./chunk-UUQN4CTB.js";
 import "./chunk-6F4PWJZI.js";
 
 // src/astro.ts

package/dist/{chunk-UW5Q43ZT.cjs → chunk-3JYHFOPB.cjs}

@@ -1,6 +1,4 @@
 "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 }; }var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/index.ts
 var _path = require('path'); var path = _interopRequireWildcard(_path);
@@ -36,16 +33,26 @@ function getStyleXRules(stylexRules, useCSSLayers) {
 
 // src/utils/normalizeOptions.ts
 var _rscompiler = require('@stylexswc/rs-compiler'); var _rscompiler2 = _interopRequireDefault(_rscompiler);
+var DEFAULT_CSS_PLACEHOLDER = "@stylex;";
 function normalizeOptions(options) {
-  var _a, _b, _c, _d, _e;
-  return __spreadProps(__spreadValues({}, options), {
+  var _a, _b, _c, _d;
+  let useCssPlaceholder = false;
+  if (options.useCssPlaceholder === true) {
+    useCssPlaceholder = DEFAULT_CSS_PLACEHOLDER;
+  } else if (typeof options.useCssPlaceholder === "string") {
+    const useCssPlaceholderTrimmed = options.useCssPlaceholder.trim();
+    if (useCssPlaceholderTrimmed) {
+      useCssPlaceholder = useCssPlaceholderTrimmed;
+    }
+  }
+  return {
     fileName: (_a = options.fileName) != null ? _a : "stylex.css",
     useCSSLayers: (_b = options.useCSSLayers) != null ? _b : false,
     pageExtensions: (_c = options.pageExtensions) != null ? _c : ["tsx", "jsx", "js", "ts"],
     rsOptions: _rscompiler.normalizeRsOptions.call(void 0, options.rsOptions || {}),
     extractCSS: (_d = options.extractCSS) != null ? _d : true,
-    useViteCssPipeline: (_e = options.useViteCssPipeline) != null ? _e : false
-  });
+    useCssPlaceholder
+  };
 }
 
 // src/index.ts
@@ -60,12 +67,7 @@ function generateHash(content) {
 // src/index.ts
 
 var { writeFile, mkdir } = _fs.promises;
-var VIRTUAL_CSS_MODULE_ID = "virtual:stylex.css";
-var RESOLVED_VIRTUAL_CSS_MODULE_ID = "\0" + VIRTUAL_CSS_MODULE_ID;
-var VIRTUAL_CSS_MARKER_VAR = "--stylex-placeholder";
-var VIRTUAL_CSS_MARKER = `:root{${VIRTUAL_CSS_MARKER_VAR}:1}`;
-var viteDevServer = null;
-var hasInvalidatedInitialCSS = false;
+var PLUGIN_NAME = "unplugin-stylex-rs";
 function replaceFileName(original, css) {
   if (!original.includes("[hash]")) {
     return original;
@@ -73,6 +75,45 @@ function replaceFileName(original, css) {
   const hash = _crypto2.default.createHash("sha256").update(css).digest("hex").slice(0, 8);
   return original.replace(/\[hash\]/g, hash);
 }
+function pickCssAsset(cssAssets, chooseFn) {
+  if (cssAssets.length === 0) return null;
+  if (typeof chooseFn === "function") {
+    const chosen = cssAssets.find(chooseFn);
+    if (chosen) return chosen;
+  }
+  const preferred = cssAssets.find((f) => /(^|\/)index\.css$/.test(f)) || cssAssets.find((f) => /(^|\/)style\.css$/.test(f)) || cssAssets.find((f) => /(^|\/)main\.css$/.test(f));
+  return preferred || cssAssets[0] || null;
+}
+function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, updateAsset, emitAsset, createRawSource) {
+  const cssAssets = Object.keys(assets).filter((f) => f.endsWith(".css"));
+  let injected = false;
+  for (const fileName of cssAssets) {
+    const asset = assets[fileName];
+    if (!asset) continue;
+    const source = asset.source().toString();
+    if (source.includes(injectMarker)) {
+      const newSource = source.replace(injectMarker, collectedCSS);
+      updateAsset(fileName, createRawSource(newSource));
+      injected = true;
+      break;
+    }
+  }
+  if (!injected && cssAssets.length > 0) {
+    const targetAsset = pickCssAsset(cssAssets);
+    if (targetAsset) {
+      const asset = assets[targetAsset];
+      if (asset) {
+        const existing = asset.source().toString();
+        const newSource = existing ? existing + "\n" + collectedCSS : collectedCSS;
+        updateAsset(targetAsset, createRawSource(newSource));
+        injected = true;
+      }
+    }
+  }
+  if (!injected) {
+    emitAsset(fallbackFileName, createRawSource(collectedCSS));
+  }
+}
 var unpluginFactory = (options = {}) => {
   const normalizedOptions = normalizeOptions(options);
   const stylexRules = {};
@@ -81,7 +122,10 @@ var unpluginFactory = (options = {}) => {
   let cssFileName = null;
   let wsSend = void 0;
   return {
-    name: "unplugin-stylex-rs",
+    name: PLUGIN_NAME,
+    buildStart() {
+      hasCssToExtract = false;
+    },
     transformInclude(id) {
       var _a, _b;
       const pageExtensions = normalizedOptions.pageExtensions;
@@ -130,36 +174,13 @@ var unpluginFactory = (options = {}) => {
             ]
           });
         }
-        if (normalizedOptions.useViteCssPipeline && viteDevServer && !hasInvalidatedInitialCSS) {
-          const hasStyleXCode2 = code !== inputCode;
-          if (hasStyleXCode2) {
-            hasInvalidatedInitialCSS = true;
-            setTimeout(() => {
-              const mod = viteDevServer == null ? void 0 : viteDevServer.moduleGraph.getModuleById(RESOLVED_VIRTUAL_CSS_MODULE_ID);
-              if (mod) {
-                viteDevServer == null ? void 0 : viteDevServer.moduleGraph.invalidateModule(mod);
-                viteDevServer == null ? void 0 : viteDevServer.ws.send({
-                  type: "update",
-                  updates: [
-                    {
-                      type: "js-update",
-                      acceptedPath: RESOLVED_VIRTUAL_CSS_MODULE_ID,
-                      path: RESOLVED_VIRTUAL_CSS_MODULE_ID,
-                      timestamp: Date.now()
-                    }
-                  ]
-                });
-              }
-            }, 50);
-          }
-        }
         return {
           code,
           map,
           stylexRules
         };
       } catch (error) {
-        console.error("Tansformation error:", error);
+        console.error("Transformation error:", error);
         this.error(error);
       }
     },
@@ -169,6 +190,9 @@ var unpluginFactory = (options = {}) => {
       if (framework === "esbuild") {
         return;
       }
+      if (normalizedOptions.useCssPlaceholder) {
+        return;
+      }
       const { processedFileName, collectedCSS } = generateCSSAssets(stylexRules, normalizedOptions);
       if (!collectedCSS) return;
       hasCssToExtract = true;
@@ -191,51 +215,46 @@ var unpluginFactory = (options = {}) => {
         config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
         config.optimizeDeps.exclude.push("@stylexjs/open-props");
       },
-      resolveId(id) {
-        if (id === VIRTUAL_CSS_MODULE_ID) {
-          return RESOLVED_VIRTUAL_CSS_MODULE_ID;
-        }
-      },
-      async load(id) {
-        var _a;
-        if (id === RESOLVED_VIRTUAL_CSS_MODULE_ID) {
-          const isDev = (_a = this.meta) == null ? void 0 : _a.watchMode;
-          if (isDev) {
-            const collectedCSS = getStyleXRules(stylexRules, normalizedOptions.useCSSLayers);
-            if (!collectedCSS || collectedCSS.trim().length === 0) {
-              return {
-                code: "/* StyleX styles will load after transformation */",
-                map: null
-              };
-            }
-            return {
-              code: collectedCSS,
-              map: null
-            };
-          }
-          return {
-            code: VIRTUAL_CSS_MARKER,
-            map: null
-          };
-        }
-      },
       generateBundle(_options, bundle) {
-        if (!normalizedOptions.useViteCssPipeline) return;
+        if (!normalizedOptions.useCssPlaceholder) return;
         const collectedCSS = getStyleXRules(stylexRules, normalizedOptions.useCSSLayers);
         if (!collectedCSS) return;
+        const cssAssets = [];
         for (const [fileName, output] of Object.entries(bundle)) {
           if (output.type === "asset" && fileName.endsWith(".css")) {
-            const source = output.source.toString();
-            if (source.includes(VIRTUAL_CSS_MARKER)) {
-              output.source = source.replace(VIRTUAL_CSS_MARKER, collectedCSS);
-              break;
-            }
+            cssAssets.push({ fileName, output });
           }
         }
+        let injected = false;
+        for (const { output } of cssAssets) {
+          if (output.type !== "asset") continue;
+          const source = output.source.toString();
+          if (normalizedOptions.useCssPlaceholder && source.includes(normalizedOptions.useCssPlaceholder)) {
+            output.source = source.replace(normalizedOptions.useCssPlaceholder, collectedCSS);
+            injected = true;
+            break;
+          }
+        }
+        if (!injected && cssAssets.length > 0) {
+          const targetName = pickCssAsset(cssAssets.map((a) => a.fileName));
+          const target = cssAssets.find((a) => a.fileName === targetName);
+          if (target && target.output.type === "asset") {
+            const existing = target.output.source.toString();
+            target.output.source = existing ? existing + "\n" + collectedCSS : collectedCSS;
+            injected = true;
+          }
+        }
+        if (!injected) {
+          this.emitFile({
+            type: "asset",
+            fileName: normalizedOptions.fileName,
+            source: collectedCSS
+          });
+        }
       },
       buildEnd() {
         var _a, _b;
-        if (normalizedOptions.useViteCssPipeline) {
+        if (normalizedOptions.useCssPlaceholder) {
           return;
         }
         const isDev = (_a = this.meta) == null ? void 0 : _a.watchMode;
@@ -257,8 +276,6 @@ var unpluginFactory = (options = {}) => {
         }
       },
       configureServer(server) {
-        viteDevServer = server;
-        hasInvalidatedInitialCSS = false;
         server.middlewares.use((req, res, next) => {
           var _a;
           if (cssFileName && ((_a = req.url) == null ? void 0 : _a.includes(cssFileName))) {
@@ -270,16 +287,9 @@ var unpluginFactory = (options = {}) => {
           next();
         });
       },
-      async handleHotUpdate({ file: id, file, server, read, modules }) {
+      async handleHotUpdate({ file: id, file, server, read }) {
         var _a;
         if (file.includes(".vue")) {
-          if (normalizedOptions.useViteCssPipeline) {
-            const virtualMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_CSS_MODULE_ID);
-            if (virtualMod) {
-              server.moduleGraph.invalidateModule(virtualMod);
-              return [...modules, virtualMod];
-            }
-          }
           return;
         }
         const inputCode = await read();
@@ -293,32 +303,24 @@ var unpluginFactory = (options = {}) => {
           (_a = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _a.assetsDir
         );
         if (!collectedCSS) return;
-        if (normalizedOptions.useViteCssPipeline) {
-          const virtualMod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_CSS_MODULE_ID);
-          if (virtualMod) {
-            server.moduleGraph.invalidateModule(virtualMod);
-            return [...modules, virtualMod];
-          }
-        } else {
-          if (processedFileName) {
-            const normalizedFileName = ensureLeadingSlash(processedFileName);
-            server.ws.send({
-              type: "update",
-              updates: [
-                {
-                  acceptedPath: normalizedFileName,
-                  path: normalizedFileName,
-                  timestamp: Date.now(),
-                  type: "css-update"
-                }
-              ]
-            });
-          }
+        if (processedFileName) {
+          const normalizedFileName = ensureLeadingSlash(processedFileName);
+          server.ws.send({
+            type: "update",
+            updates: [
+              {
+                acceptedPath: normalizedFileName,
+                path: normalizedFileName,
+                timestamp: Date.now(),
+                type: "css-update"
+              }
+            ]
+          });
         }
       },
       transformIndexHtml: (html, ctx) => {
         var _a, _b;
-        if (normalizedOptions.useViteCssPipeline) {
+        if (normalizedOptions.useCssPlaceholder) {
           return html;
         }
         const isDev = !!ctx.server;
@@ -349,11 +351,63 @@ var unpluginFactory = (options = {}) => {
     },
     esbuild: {
       setup(build) {
-        build.onEnd(async ({ outputFiles }) => {
+        build.onEnd(async ({ outputFiles, metafile }) => {
           const fileName = normalizedOptions.fileName;
           const collectedCSS = getStyleXRules(stylexRules, normalizedOptions.useCSSLayers);
           if (!collectedCSS) return;
           const shouldWriteToDisk = build.initialOptions.write === void 0 || build.initialOptions.write;
+          const outDir = build.initialOptions.outdir || (build.initialOptions.outfile ? path.dirname(build.initialOptions.outfile) : null);
+          if (normalizedOptions.useCssPlaceholder && outDir && shouldWriteToDisk) {
+            const injectMarker = normalizedOptions.useCssPlaceholder;
+            let cssFiles = [];
+            if (metafile == null ? void 0 : metafile.outputs) {
+              cssFiles = Object.keys(metafile.outputs).filter((f) => f.endsWith(".css")).map((f) => path.isAbsolute(f) ? f : path.join(process.cwd(), f));
+            }
+            if (cssFiles.length === 0) {
+              try {
+                const { readdir } = await Promise.resolve().then(() => _interopRequireWildcard(require("fs/promises")));
+                const files = await readdir(outDir);
+                cssFiles = files.filter((f) => f.endsWith(".css")).map((f) => path.join(outDir, f));
+              } catch (e) {
+              }
+            }
+            let injected = false;
+            for (const cssFile of cssFiles) {
+              try {
+                const { readFile } = await Promise.resolve().then(() => _interopRequireWildcard(require("fs/promises")));
+                const content = await readFile(cssFile, "utf8");
+                if (content.includes(injectMarker)) {
+                  const newContent = content.replace(injectMarker, collectedCSS);
+                  await writeFile(cssFile, newContent, "utf8");
+                  injected = true;
+                  break;
+                }
+              } catch (e) {
+              }
+            }
+            if (!injected && cssFiles.length > 0) {
+              const targetFile = pickCssAsset(cssFiles.map((f) => path.basename(f)));
+              if (targetFile) {
+                const fullPath = cssFiles.find((f) => f.endsWith(targetFile));
+                if (fullPath) {
+                  try {
+                    const { readFile } = await Promise.resolve().then(() => _interopRequireWildcard(require("fs/promises")));
+                    const existing = await readFile(fullPath, "utf8");
+                    const newContent = existing ? existing + "\n" + collectedCSS : collectedCSS;
+                    await writeFile(fullPath, newContent, "utf8");
+                    injected = true;
+                  } catch (e) {
+                  }
+                }
+              }
+            }
+            if (!injected) {
+              const generatedCSSFileName = path.join(outDir, fileName);
+              await mkdir(path.dirname(generatedCSSFileName), { recursive: true });
+              await writeFile(generatedCSSFileName, collectedCSS, "utf8");
+            }
+            return;
+          }
           if (shouldWriteToDisk) {
             const generatedCSSFileName = path.join(process.cwd(), fileName);
             await mkdir(path.dirname(generatedCSSFileName), {
@@ -378,6 +432,9 @@ var unpluginFactory = (options = {}) => {
     farm: {
       transformHtml: {
         executor(resource) {
+          if (normalizedOptions.useCssPlaceholder) {
+            return Promise.resolve(resource.htmlResource);
+          }
           if (!hasCssToExtract) return Promise.resolve(resource.htmlResource);
           const htmlResource = resource.htmlResource;
           let htmlContent = Buffer.from(htmlResource.bytes).toString("utf-8");
@@ -386,6 +443,58 @@ var unpluginFactory = (options = {}) => {
           return Promise.resolve(resource.htmlResource);
         }
       }
+      // Farm uses Rollup-like bundle hooks, so generateBundle handles CSS injection
+      // The useCssPlaceholder logic is handled in the shared generateBundle (via Vite hooks)
+    },
+    rspack(compiler) {
+      if (!normalizedOptions.useCssPlaceholder) return;
+      const injectMarker = normalizedOptions.useCssPlaceholder;
+      compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: PLUGIN_NAME,
+            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
+          },
+          (assets) => {
+            const collectedCSS = getStyleXRules(stylexRules, normalizedOptions.useCSSLayers);
+            if (!collectedCSS) return;
+            injectStyleXCss(
+              assets,
+              injectMarker,
+              collectedCSS,
+              normalizedOptions.fileName,
+              (fileName, source) => compilation.updateAsset(fileName, source),
+              (fileName, source) => compilation.emitAsset(fileName, source),
+              (content) => new compiler.webpack.sources.RawSource(content)
+            );
+          }
+        );
+      });
+    },
+    webpack(compiler) {
+      if (!normalizedOptions.useCssPlaceholder) return;
+      const injectMarker = normalizedOptions.useCssPlaceholder;
+      compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: PLUGIN_NAME,
+            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
+          },
+          (assets) => {
+            const collectedCSS = getStyleXRules(stylexRules, normalizedOptions.useCSSLayers);
+            if (!collectedCSS) return;
+            injectStyleXCss(
+              assets,
+              injectMarker,
+              collectedCSS,
+              normalizedOptions.fileName,
+              (fileName, source) => compilation.updateAsset(fileName, source),
+              (fileName, source) => compilation.emitAsset(fileName, source),
+              (content) => new compiler.webpack.sources.RawSource(content)
+            );
+          }
+        );
+      });
     }
   };
 };

package/dist/{chunk-5AHGEAJE.cjs → chunk-DPUWFDPX.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkUW5Q43ZTcjs = require('./chunk-UW5Q43ZT.cjs');
+var _chunk3JYHFOPBcjs = require('./chunk-3JYHFOPB.cjs');
 
 // src/vite.ts
 var _unplugin = require('unplugin');
-var vite_default = _unplugin.createVitePlugin.call(void 0, _chunkUW5Q43ZTcjs.unpluginFactory);
+var vite_default = _unplugin.createVitePlugin.call(void 0, _chunk3JYHFOPBcjs.unpluginFactory);