@stylexswc/unplugin 0.11.2-rc.1 → 0.11.2-rc.3

package/README.md

@@ -184,6 +184,72 @@ build({
 - Default: `['js', 'jsx', 'ts', 'tsx', 'mjs', 'mts']`
 - Description: File extensions to process for StyleX transformations.
 
+#### `useViteCssPipeline`
+
+- Type: `boolean`
+- 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.
+
+##### 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
+- **Consistent Output**: All CSS follows the same processing rules and bundling strategy
+- **Build Optimization**: CSS can be code-split and optimized alongside other stylesheets
+
+##### How to Use
+
+```typescript
+// vite.config.ts
+import StylexRsPlugin from '@stylexswc/unplugin/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    StylexRsPlugin({
+      useViteCssPipeline: true,
+    }),
+  ],
+});
+```
+
+Then import the virtual CSS module in your entry file:
+
+```typescript
+// src/main.ts
+import 'virtual:stylex.css';
+import { App } from './App';
+```
+
+**TypeScript Support:**
+
+For TypeScript projects, add the type definition to your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@stylexswc/unplugin/virtual-css"]
+  }
+}
+```
+
+> [!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.
+
+> [!IMPORTANT]
+> **Reset CSS and Other Global Styles**
+>
+> 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:
+>
+> ```typescript
+> // src/main.ts
+> import './reset.css';        // Your reset CSS
+> import './global.css';       // Other global styles
+> import 'virtual:stylex.css'; // StyleX-generated CSS
+> ```
+>
+> **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.
+
 ### Example Configuration
 
 ```typescript

package/dist/astro.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVCGI7W6Acjs = require('./chunk-VCGI7W6A.cjs');
+var _chunk55H2YGNWcjs = require('./chunk-55H2YGNW.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(_chunkVCGI7W6Acjs.index_default.vite(options));
+      astro.config.vite.plugins.push(_chunk55H2YGNWcjs.index_default.vite(options));
     }
   }
 });

package/dist/astro.js

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

package/dist/{chunk-4YI47FZZ.js → chunk-3EDKY6TH.js}

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-267F4SHV.js";
+} from "./chunk-NM6UYBKL.js";
 
 // src/webpack.ts
 import { createWebpackPlugin } from "unplugin";

package/dist/{chunk-VCGI7W6A.cjs → chunk-55H2YGNW.cjs}

@@ -37,13 +37,14 @@ function getStyleXRules(stylexRules, useCSSLayers) {
 // src/utils/normalizeOptions.ts
 var _rscompiler = require('@stylexswc/rs-compiler'); var _rscompiler2 = _interopRequireDefault(_rscompiler);
 function normalizeOptions(options) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   return __spreadProps(__spreadValues({}, options), {
     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
+    extractCSS: (_d = options.extractCSS) != null ? _d : true,
+    useViteCssPipeline: (_e = options.useViteCssPipeline) != null ? _e : false
   });
 }
 
@@ -59,6 +60,12 @@ 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;
 function replaceFileName(original, css) {
   if (!original.includes("[hash]")) {
     return original;
@@ -123,6 +130,29 @@ 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,
@@ -161,8 +191,53 @@ 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;
+        const collectedCSS = getStyleXRules(stylexRules, normalizedOptions.useCSSLayers);
+        if (!collectedCSS) return;
+        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;
+            }
+          }
+        }
+      },
       buildEnd() {
         var _a;
+        if (normalizedOptions.useViteCssPipeline) {
+          return;
+        }
         const { processedFileName, collectedCSS } = generateCSSAssets(
           stylexRules,
           normalizedOptions,
@@ -178,6 +253,8 @@ 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))) {
@@ -189,8 +266,18 @@ var unpluginFactory = (options = {}) => {
           next();
         });
       },
-      async handleHotUpdate({ file: id, file, server, read }) {
+      async handleHotUpdate({ file: id, file, server, read, modules }) {
         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();
         if (!hasStyleXCode(normalizedOptions, inputCode)) {
           return;
@@ -202,23 +289,34 @@ var unpluginFactory = (options = {}) => {
           (_a = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _a.assetsDir
         );
         if (!collectedCSS) return;
-        if (processedFileName) {
-          const normalizedFileName = ensureLeadingSlash(processedFileName);
-          server.ws.send({
-            type: "update",
-            updates: [
-              {
-                acceptedPath: normalizedFileName,
-                path: normalizedFileName,
-                timestamp: Date.now(),
-                type: "css-update"
-              }
-            ]
-          });
+        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"
+                }
+              ]
+            });
+          }
         }
       },
       transformIndexHtml: (html, ctx) => {
         var _a, _b;
+        if (normalizedOptions.useViteCssPipeline) {
+          return html;
+        }
         const isDev = !!ctx.server;
         const { processedFileName } = generateCSSAssets(
           stylexRules,

package/dist/{chunk-YQB2TVUP.cjs → chunk-56CEC7LU.cjs}

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

package/dist/{chunk-7GG4DYVS.js → chunk-AHX3RGCT.js}

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-267F4SHV.js";
+} from "./chunk-NM6UYBKL.js";
 
 // src/vite.ts
 import { createVitePlugin } from "unplugin";

package/dist/{chunk-WJOLWJKA.cjs → chunk-MZPFT5OY.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVCGI7W6Acjs = require('./chunk-VCGI7W6A.cjs');
+var _chunk55H2YGNWcjs = require('./chunk-55H2YGNW.cjs');
 
 // src/webpack.ts
 var _unplugin = require('unplugin');
-var webpack_default = _unplugin.createWebpackPlugin.call(void 0, _chunkVCGI7W6Acjs.unpluginFactory);
+var webpack_default = _unplugin.createWebpackPlugin.call(void 0, _chunk55H2YGNWcjs.unpluginFactory);
 
 
 

package/dist/{chunk-267F4SHV.js → chunk-NM6UYBKL.js}

@@ -37,13 +37,14 @@ function getStyleXRules(stylexRules, useCSSLayers) {
 // src/utils/normalizeOptions.ts
 import { normalizeRsOptions } from "@stylexswc/rs-compiler";
 function normalizeOptions(options) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   return __spreadProps(__spreadValues({}, options), {
     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: normalizeRsOptions(options.rsOptions || {}),
-    extractCSS: (_d = options.extractCSS) != null ? _d : true
+    extractCSS: (_d = options.extractCSS) != null ? _d : true,
+    useViteCssPipeline: (_e = options.useViteCssPipeline) != null ? _e : false
   });
 }
 
@@ -59,6 +60,12 @@ function generateHash(content) {
 // src/index.ts
 import crypto2 from "crypto";
 var { writeFile, mkdir } = 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;
 function replaceFileName(original, css) {
   if (!original.includes("[hash]")) {
     return original;
@@ -123,6 +130,29 @@ 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,
@@ -161,8 +191,53 @@ 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;
+        const collectedCSS = getStyleXRules(stylexRules, normalizedOptions.useCSSLayers);
+        if (!collectedCSS) return;
+        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;
+            }
+          }
+        }
+      },
       buildEnd() {
         var _a;
+        if (normalizedOptions.useViteCssPipeline) {
+          return;
+        }
         const { processedFileName, collectedCSS } = generateCSSAssets(
           stylexRules,
           normalizedOptions,
@@ -178,6 +253,8 @@ 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))) {
@@ -189,8 +266,18 @@ var unpluginFactory = (options = {}) => {
           next();
         });
       },
-      async handleHotUpdate({ file: id, file, server, read }) {
+      async handleHotUpdate({ file: id, file, server, read, modules }) {
         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();
         if (!hasStyleXCode(normalizedOptions, inputCode)) {
           return;
@@ -202,23 +289,34 @@ var unpluginFactory = (options = {}) => {
           (_a = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _a.assetsDir
         );
         if (!collectedCSS) return;
-        if (processedFileName) {
-          const normalizedFileName = ensureLeadingSlash(processedFileName);
-          server.ws.send({
-            type: "update",
-            updates: [
-              {
-                acceptedPath: normalizedFileName,
-                path: normalizedFileName,
-                timestamp: Date.now(),
-                type: "css-update"
-              }
-            ]
-          });
+        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"
+                }
+              ]
+            });
+          }
         }
       },
       transformIndexHtml: (html, ctx) => {
         var _a, _b;
+        if (normalizedOptions.useViteCssPipeline) {
+          return html;
+        }
         const isDev = !!ctx.server;
         const { processedFileName } = generateCSSAssets(
           stylexRules,

package/dist/esbuild.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVCGI7W6Acjs = require('./chunk-VCGI7W6A.cjs');
+var _chunk55H2YGNWcjs = require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/esbuild.ts
 var _unplugin = require('unplugin');
-var esbuild_default = _unplugin.createEsbuildPlugin.call(void 0, _chunkVCGI7W6Acjs.unpluginFactory);
+var esbuild_default = _unplugin.createEsbuildPlugin.call(void 0, _chunk55H2YGNWcjs.unpluginFactory);
 
 
 exports.default = esbuild_default;

package/dist/esbuild.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-267F4SHV.js";
+} from "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 
 // src/esbuild.ts

package/dist/farm.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVCGI7W6Acjs = require('./chunk-VCGI7W6A.cjs');
+var _chunk55H2YGNWcjs = require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/farm.ts
 var _unplugin = require('unplugin');
-var plugin = _unplugin.createFarmPlugin.call(void 0, _chunkVCGI7W6Acjs.unpluginFactory);
+var plugin = _unplugin.createFarmPlugin.call(void 0, _chunk55H2YGNWcjs.unpluginFactory);
 var farm_default = plugin;
 
 

package/dist/farm.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-267F4SHV.js";
+} from "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 
 // src/farm.ts

package/dist/index.cjs

@@ -2,10 +2,10 @@
 
 
 
-var _chunkVCGI7W6Acjs = require('./chunk-VCGI7W6A.cjs');
+var _chunk55H2YGNWcjs = require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 
 
 
-exports.default = _chunkVCGI7W6Acjs.index_default; exports.unplugin = _chunkVCGI7W6Acjs.unplugin; exports.unpluginFactory = _chunkVCGI7W6Acjs.unpluginFactory;
+exports.default = _chunk55H2YGNWcjs.index_default; exports.unplugin = _chunk55H2YGNWcjs.unplugin; exports.unpluginFactory = _chunk55H2YGNWcjs.unpluginFactory;

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   index_default,
   unplugin,
   unpluginFactory
-} from "./chunk-267F4SHV.js";
+} from "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 export {
   index_default as default,

package/dist/nuxt.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkYQB2TVUPcjs = require('./chunk-YQB2TVUP.cjs');
+var _chunk56CEC7LUcjs = require('./chunk-56CEC7LU.cjs');
 
 
-var _chunkWJOLWJKAcjs = require('./chunk-WJOLWJKA.cjs');
-require('./chunk-VCGI7W6A.cjs');
+var _chunkMZPFT5OYcjs = require('./chunk-MZPFT5OY.cjs');
+require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/nuxt.ts
@@ -19,8 +19,8 @@ var nuxt_default = _kit.defineNuxtModule.call(void 0, {
     // ...default options
   },
   setup(options, _nuxt) {
-    _kit.addVitePlugin.call(void 0, () => _chunkYQB2TVUPcjs.vite_default.call(void 0, options));
-    _kit.addWebpackPlugin.call(void 0, () => _chunkWJOLWJKAcjs.webpack_default.call(void 0, options));
+    _kit.addVitePlugin.call(void 0, () => _chunk56CEC7LUcjs.vite_default.call(void 0, options));
+    _kit.addWebpackPlugin.call(void 0, () => _chunkMZPFT5OYcjs.webpack_default.call(void 0, options));
   }
 });
 

package/dist/nuxt.js

@@ -1,10 +1,10 @@
 import {
   vite_default
-} from "./chunk-7GG4DYVS.js";
+} from "./chunk-AHX3RGCT.js";
 import {
   webpack_default
-} from "./chunk-4YI47FZZ.js";
-import "./chunk-267F4SHV.js";
+} from "./chunk-3EDKY6TH.js";
+import "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 
 // src/nuxt.ts

package/dist/rollup.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVCGI7W6Acjs = require('./chunk-VCGI7W6A.cjs');
+var _chunk55H2YGNWcjs = require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/rollup.ts
 var _unplugin = require('unplugin');
-var rollup_default = _unplugin.createRollupPlugin.call(void 0, _chunkVCGI7W6Acjs.unpluginFactory);
+var rollup_default = _unplugin.createRollupPlugin.call(void 0, _chunk55H2YGNWcjs.unpluginFactory);
 
 
 exports.default = rollup_default;

package/dist/rollup.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-267F4SHV.js";
+} from "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 
 // src/rollup.ts

package/dist/rspack.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkVCGI7W6Acjs = require('./chunk-VCGI7W6A.cjs');
+var _chunk55H2YGNWcjs = require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/rspack.ts
 var _unplugin = require('unplugin');
-var rspack_default = _unplugin.createRspackPlugin.call(void 0, _chunkVCGI7W6Acjs.unpluginFactory);
+var rspack_default = _unplugin.createRspackPlugin.call(void 0, _chunk55H2YGNWcjs.unpluginFactory);
 
 
 exports.default = rspack_default;

package/dist/rspack.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-267F4SHV.js";
+} from "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 
 // src/rspack.ts

package/dist/types.d.cts

@@ -6,6 +6,13 @@ interface UnpluginStylexRSOptions {
     pageExtensions?: string[];
     rsOptions?: StyleXOptions;
     extractCSS?: boolean;
+    /**
+     * Use Vite's CSS pipeline for processing StyleX CSS.
+     * When enabled, StyleX CSS will be processed through Vite's transforms (LightningCSS, PostCSS, etc.)
+     * instead of being directly injected into HTML.
+     * @default false
+     */
+    useViteCssPipeline?: boolean;
 }
 
 export type { UnpluginStylexRSOptions };

package/dist/types.d.ts

@@ -6,6 +6,13 @@ interface UnpluginStylexRSOptions {
     pageExtensions?: string[];
     rsOptions?: StyleXOptions;
     extractCSS?: boolean;
+    /**
+     * Use Vite's CSS pipeline for processing StyleX CSS.
+     * When enabled, StyleX CSS will be processed through Vite's transforms (LightningCSS, PostCSS, etc.)
+     * instead of being directly injected into HTML.
+     * @default false
+     */
+    useViteCssPipeline?: boolean;
 }
 
 export type { UnpluginStylexRSOptions };

package/dist/vite.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkYQB2TVUPcjs = require('./chunk-YQB2TVUP.cjs');
-require('./chunk-VCGI7W6A.cjs');
+var _chunk56CEC7LUcjs = require('./chunk-56CEC7LU.cjs');
+require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 
-exports.default = _chunkYQB2TVUPcjs.vite_default;
+exports.default = _chunk56CEC7LUcjs.vite_default;
 
 module.exports = exports.default;

package/dist/vite.js

@@ -1,7 +1,7 @@
 import {
   vite_default
-} from "./chunk-7GG4DYVS.js";
-import "./chunk-267F4SHV.js";
+} from "./chunk-AHX3RGCT.js";
+import "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 export {
   vite_default as default

package/dist/webpack.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkWJOLWJKAcjs = require('./chunk-WJOLWJKA.cjs');
-require('./chunk-VCGI7W6A.cjs');
+var _chunkMZPFT5OYcjs = require('./chunk-MZPFT5OY.cjs');
+require('./chunk-55H2YGNW.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 
-exports.default = _chunkWJOLWJKAcjs.webpack_default;
+exports.default = _chunkMZPFT5OYcjs.webpack_default;
 
 module.exports = exports.default;

package/dist/webpack.js

@@ -1,7 +1,7 @@
 import {
   webpack_default
-} from "./chunk-4YI47FZZ.js";
-import "./chunk-267F4SHV.js";
+} from "./chunk-3EDKY6TH.js";
+import "./chunk-NM6UYBKL.js";
 import "./chunk-6F4PWJZI.js";
 export {
   webpack_default as default

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stylexswc/unplugin",
   "description": "Unplugin for StyleX RS compiler",
-  "version": "0.11.2-rc.1",
+  "version": "0.11.2-rc.3",
   "private": false,
   "license": "MIT",
   "sideEffects": false,
@@ -58,10 +58,14 @@
       "import": "./dist/types.js",
       "require": "./dist/types.cjs"
     },
+    "./virtual-css": {
+      "types": "./virtual-css.d.ts"
+    },
     "./*": "./*"
   },
   "files": [
-    "dist"
+    "dist",
+    "virtual-css.d.ts"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -74,7 +78,7 @@
   },
   "dependencies": {
     "@stylexjs/babel-plugin": "^0.15.4",
-    "@stylexswc/rs-compiler": "0.11.2-rc.1",
+    "@stylexswc/rs-compiler": "0.11.2-rc.3",
     "unplugin": "^2.3.5",
     "vite": "^7.1.9",
     "vite-plugin-inspect": "^11.3.3"

package/virtual-css.d.ts

@@ -0,0 +1,15 @@
+/**
+ * TypeScript declaration for StyleX virtual CSS module
+ *
+ * When using `useViteCssPipeline: true`, you can import the virtual CSS module:
+ *
+ * @example
+ * ```ts
+ * import 'virtual:stylex.css';
+ * ```
+ */
+declare module 'virtual:stylex.css' {
+  const css: string;
+  export default css;
+}
+