@stylexswc/unplugin 0.17.0-rc.2 → 0.17.0-rc.3

package/README.md

@@ -203,6 +203,53 @@ build({
 - Default: `['js', 'jsx', 'ts', 'tsx', 'mjs', 'mts']`
 - Description: File extensions to process for StyleX transformations.
 
+#### `transformCss`
+
+- Type: `CSSTransformer`
+- Optional
+- Description: Transforms the extracted StyleX CSS before it is emitted or
+  injected. Matches the `@stylexswc/webpack-plugin` API. Use it to run the
+  generated CSS through PostCSS, LightningCSS, a minifier, or any custom
+  post-processing step.
+
+```ts
+type CSSTransformer = (
+  css: string,
+  filePath: string | undefined
+) => string | Buffer | Promise<string | Buffer>;
+```
+
+```typescript
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+
+StylexRsPlugin({
+  async transformCss(css) {
+    const result = await postcss([autoprefixer]).process(css, {
+      from: undefined,
+    });
+    return result.css;
+  },
+})
+```
+
+The `filePath` argument identifies the CSS destination and is
+bundler-specific:
+
+- webpack/rspack/rollup injection: the output asset name (e.g. `app.css`)
+- esbuild disk writes: the absolute path of the written file
+- Vite placeholder replacement: the id of the CSS module being loaded
+- generated assets: the configured `fileName`, with `[hash]` left unresolved
+  (the hash is computed from the transformed CSS, so it cannot be known
+  earlier)
+- `undefined` when no destination is known
+
+> [!NOTE]
+> `Buffer` results are decoded as UTF-8. Results are memoized per `filePath`
+> while the input CSS is unchanged, so the callback must be a pure function of
+> its arguments — the same input may be served from cache instead of invoking
+> the callback again.
+
 #### `useCssPlaceholder`
 
 - Type: `boolean | string`

package/dist/astro.cjs

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

package/dist/astro.js

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

package/dist/{chunk-I43XNUJV.cjs → chunk-6KFXJPTK.cjs}

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

package/dist/{chunk-NUYT2WWJ.cjs → chunk-FIIRNHWY.cjs}

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

package/dist/{chunk-VXGDBTUT.cjs → chunk-FYEXHH45.cjs}

@@ -34,8 +34,9 @@ function getStyleXRules(stylexRules, transformedOptions) {
 // src/utils/normalizeOptions.ts
 var _rscompiler = require('@stylexswc/rs-compiler');
 var DEFAULT_CSS_PLACEHOLDER = "@stylex;";
+var identityTransformCss = (css) => css;
 function normalizeOptions(options) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   let useCssPlaceholder = false;
   if (options.useCssPlaceholder === true) {
     useCssPlaceholder = DEFAULT_CSS_PLACEHOLDER;
@@ -52,6 +53,7 @@ function normalizeOptions(options) {
     pageExtensions: (_b = options.pageExtensions) != null ? _b : ["tsx", "jsx", "js", "ts"],
     rsOptions: normalizedRsOptions,
     extractCSS: (_c = options.extractCSS) != null ? _c : true,
+    transformCss: (_d = options.transformCss) != null ? _d : identityTransformCss,
     useCssPlaceholder,
     enableLTRRTLComments: normalizedRsOptions.enableLTRRTLComments,
     legacyDisableLayers: normalizedRsOptions.legacyDisableLayers
@@ -124,7 +126,7 @@ async function invalidateAndCollectCssModules(server, placeholder) {
   );
   return cssModules;
 }
-function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, updateAsset, emitAsset, createRawSource) {
+async function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, normalizedOptions, updateAsset, emitAsset, createRawSource) {
   const cssAssets = Object.keys(assets).filter((f) => f.endsWith(".css"));
   let injected = false;
   for (const fileName of cssAssets) {
@@ -132,7 +134,8 @@ function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, u
     if (!asset) continue;
     const source = asset.source().toString();
     if (source.includes(injectMarker)) {
-      const newSource = source.replace(injectMarker, collectedCSS);
+      const finalCSS = await transformStyleXCSS(collectedCSS, fileName, normalizedOptions);
+      const newSource = source.replace(injectMarker, () => finalCSS);
       updateAsset(fileName, createRawSource(newSource));
       injected = true;
       break;
@@ -144,14 +147,16 @@ function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, u
       const asset = assets[targetAsset];
       if (asset) {
         const existing = asset.source().toString();
-        const newSource = existing ? existing + "\n" + collectedCSS : collectedCSS;
+        const finalCSS = await transformStyleXCSS(collectedCSS, targetAsset, normalizedOptions);
+        const newSource = existing ? existing + "\n" + finalCSS : finalCSS;
         updateAsset(targetAsset, createRawSource(newSource));
         injected = true;
       }
     }
   }
   if (!injected) {
-    emitAsset(fallbackFileName, createRawSource(collectedCSS));
+    const finalCSS = await transformStyleXCSS(collectedCSS, fallbackFileName, normalizedOptions);
+    emitAsset(fallbackFileName, createRawSource(finalCSS));
   }
 }
 var unpluginFactory = (options = {}) => {
@@ -247,7 +252,7 @@ var unpluginFactory = (options = {}) => {
         this.error(new Error(enhancedMessage, { cause: error }));
       }
     },
-    buildEnd() {
+    async buildEnd() {
       var _a;
       const framework = (_a = this.getNativeBuildContext) == null ? void 0 : _a.call(this).framework;
       if (framework === "esbuild") {
@@ -256,7 +261,7 @@ var unpluginFactory = (options = {}) => {
       if (normalizedOptions.useCssPlaceholder) {
         return;
       }
-      const { processedFileName, collectedCSS } = generateCSSAssets(
+      const { processedFileName, collectedCSS } = await generateCSSAssets(
         stylexRules,
         normalizedOptions,
         transformedOptions
@@ -299,11 +304,11 @@ var unpluginFactory = (options = {}) => {
         if (!(collectedCSS == null ? void 0 : collectedCSS.trim())) {
           replacementCSS = isDevMode ? "/* StyleX styles will load after transformation */" : "/* No StyleX styles */";
         } else {
-          replacementCSS = collectedCSS;
+          replacementCSS = await transformStyleXCSS(collectedCSS, id, normalizedOptions);
         }
-        return cssContent.replace(normalizedOptions.useCssPlaceholder, replacementCSS);
+        return cssContent.replace(normalizedOptions.useCssPlaceholder, () => replacementCSS);
       },
-      generateBundle(_options, bundle) {
+      async generateBundle(_options, bundle) {
         if (!normalizedOptions.useCssPlaceholder) return;
         const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
         if (!collectedCSS) return;
@@ -318,7 +323,12 @@ var unpluginFactory = (options = {}) => {
           if (output.type !== "asset") continue;
           const source = output.source.toString();
           if (normalizedOptions.useCssPlaceholder && source.includes(normalizedOptions.useCssPlaceholder)) {
-            output.source = source.replace(normalizedOptions.useCssPlaceholder, collectedCSS);
+            const finalCSS = await transformStyleXCSS(
+              collectedCSS,
+              output.fileName,
+              normalizedOptions
+            );
+            output.source = source.replace(normalizedOptions.useCssPlaceholder, () => finalCSS);
             injected = true;
             break;
           }
@@ -328,19 +338,29 @@ var unpluginFactory = (options = {}) => {
           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;
+            const finalCSS = await transformStyleXCSS(
+              collectedCSS,
+              target.fileName,
+              normalizedOptions
+            );
+            target.output.source = existing ? existing + "\n" + finalCSS : finalCSS;
             injected = true;
           }
         }
         if (!injected) {
+          const finalCSS = await transformStyleXCSS(
+            collectedCSS,
+            normalizedOptions.fileName,
+            normalizedOptions
+          );
           this.emitFile({
             type: "asset",
             fileName: normalizedOptions.fileName,
-            source: collectedCSS
+            source: finalCSS
           });
         }
       },
-      buildEnd() {
+      async buildEnd() {
         var _a, _b;
         if (normalizedOptions.useCssPlaceholder) {
           return;
@@ -349,7 +369,7 @@ var unpluginFactory = (options = {}) => {
         if (isDev) {
           return;
         }
-        const { processedFileName, collectedCSS } = generateCSSAssets(
+        const { processedFileName, collectedCSS } = await generateCSSAssets(
           stylexRules,
           normalizedOptions,
           transformedOptions,
@@ -370,13 +390,17 @@ var unpluginFactory = (options = {}) => {
         server.middlewares.use(
           (req, res, next) => {
             var _a;
-            if (cssFileName && ((_a = req.url) == null ? void 0 : _a.includes(cssFileName))) {
-              const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
-              res.setHeader("Content-Type", "text/css");
-              res.end(collectedCSS);
+            const requestedCssFileName = cssFileName;
+            if (!requestedCssFileName || !((_a = req.url) == null ? void 0 : _a.includes(requestedCssFileName))) {
+              next();
               return;
             }
-            next();
+            void (async () => {
+              const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
+              const finalCSS = collectedCSS ? await transformStyleXCSS(collectedCSS, requestedCssFileName, normalizedOptions) : collectedCSS;
+              res.setHeader("Content-Type", "text/css");
+              res.end(finalCSS);
+            })().catch(next);
           }
         );
       },
@@ -402,7 +426,7 @@ var unpluginFactory = (options = {}) => {
           return;
         }
         transformStyleXCode(file, inputCode, normalizedOptions, stylexRules, id);
-        const { processedFileName, collectedCSS } = generateCSSAssets(
+        const { processedFileName, collectedCSS } = await generateCSSAssets(
           stylexRules,
           normalizedOptions,
           transformedOptions,
@@ -434,13 +458,13 @@ var unpluginFactory = (options = {}) => {
           }
         }
       },
-      transformIndexHtml: (html, ctx) => {
+      transformIndexHtml: async (html, ctx) => {
         var _a, _b;
         if (normalizedOptions.useCssPlaceholder) {
           return html;
         }
         const isDev = !!ctx.server;
-        const { processedFileName } = generateCSSAssets(
+        const { processedFileName } = await generateCSSAssets(
           stylexRules,
           normalizedOptions,
           transformedOptions,
@@ -494,7 +518,12 @@ var unpluginFactory = (options = {}) => {
                 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);
+                  const finalCSS = await transformStyleXCSS(
+                    collectedCSS,
+                    cssFile,
+                    normalizedOptions
+                  );
+                  const newContent = content.replace(injectMarker, () => finalCSS);
                   await writeFile(cssFile, newContent, "utf8");
                   injected = true;
                   break;
@@ -505,12 +534,17 @@ var unpluginFactory = (options = {}) => {
             if (!injected && cssFiles.length > 0) {
               const targetFile = pickCssAsset(cssFiles.map((f) => path.basename(f)));
               if (targetFile) {
-                const fullPath = cssFiles.find((f) => f.endsWith(targetFile));
+                const fullPath = cssFiles.find((f) => path.basename(f) === 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;
+                    const finalCSS = await transformStyleXCSS(
+                      collectedCSS,
+                      fullPath,
+                      normalizedOptions
+                    );
+                    const newContent = existing ? existing + "\n" + finalCSS : finalCSS;
                     await writeFile(fullPath, newContent, "utf8");
                     injected = true;
                   } catch (e) {
@@ -520,26 +554,37 @@ var unpluginFactory = (options = {}) => {
             }
             if (!injected) {
               const generatedCSSFileName = path.join(outDir, fileName);
+              const finalCSS = await transformStyleXCSS(
+                collectedCSS,
+                generatedCSSFileName,
+                normalizedOptions
+              );
               await mkdir(path.dirname(generatedCSSFileName), { recursive: true });
-              await writeFile(generatedCSSFileName, collectedCSS, "utf8");
+              await writeFile(generatedCSSFileName, finalCSS, "utf8");
             }
             return;
           }
           if (shouldWriteToDisk) {
             const generatedCSSFileName = path.join(process.cwd(), fileName);
+            const finalCSS = await transformStyleXCSS(
+              collectedCSS,
+              generatedCSSFileName,
+              normalizedOptions
+            );
             await mkdir(path.dirname(generatedCSSFileName), {
               recursive: true
             });
-            await writeFile(generatedCSSFileName, collectedCSS, "utf8");
+            await writeFile(generatedCSSFileName, finalCSS, "utf8");
             return;
           }
           if (outputFiles !== void 0) {
+            const finalCSS = await transformStyleXCSS(collectedCSS, fileName, normalizedOptions);
             outputFiles.push({
               path: "<stdout>",
-              contents: new TextEncoder().encode(collectedCSS),
-              hash: generateHash(collectedCSS),
+              contents: new TextEncoder().encode(finalCSS),
+              hash: generateHash(finalCSS),
               get text() {
-                return collectedCSS;
+                return finalCSS;
               }
             });
           }
@@ -548,16 +593,16 @@ var unpluginFactory = (options = {}) => {
     },
     farm: {
       transformHtml: {
-        executor(resource) {
+        async executor(resource) {
           if (normalizedOptions.useCssPlaceholder) {
-            return Promise.resolve(resource.htmlResource);
+            return resource.htmlResource;
           }
-          if (!hasCssToExtract) return Promise.resolve(resource.htmlResource);
+          if (!hasCssToExtract) return resource.htmlResource;
           const htmlResource = resource.htmlResource;
           let htmlContent = Buffer.from(htmlResource.bytes).toString("utf-8");
           htmlContent = `${htmlContent}<link rel="stylesheet" href="/${normalizedOptions.fileName}" />`;
           htmlResource.bytes = [...Buffer.from(htmlContent, "utf-8")];
-          return Promise.resolve(resource.htmlResource);
+          return resource.htmlResource;
         }
       }
       // Farm uses Rollup-like bundle hooks, so generateBundle handles CSS injection
@@ -567,19 +612,20 @@ var unpluginFactory = (options = {}) => {
       if (!normalizedOptions.useCssPlaceholder) return;
       const injectMarker = normalizedOptions.useCssPlaceholder;
       compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-        compilation.hooks.processAssets.tap(
+        compilation.hooks.processAssets.tapPromise(
           {
             name: PLUGIN_NAME,
             stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
           },
-          (assets) => {
+          async (assets) => {
             const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
             if (!collectedCSS) return;
-            injectStyleXCss(
+            await injectStyleXCss(
               assets,
               injectMarker,
               collectedCSS,
               normalizedOptions.fileName,
+              normalizedOptions,
               (fileName, source) => compilation.updateAsset(fileName, source),
               (fileName, source) => compilation.emitAsset(fileName, source),
               (content) => new compiler.webpack.sources.RawSource(content)
@@ -592,19 +638,20 @@ var unpluginFactory = (options = {}) => {
       if (!normalizedOptions.useCssPlaceholder) return;
       const injectMarker = normalizedOptions.useCssPlaceholder;
       compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-        compilation.hooks.processAssets.tap(
+        compilation.hooks.processAssets.tapPromise(
           {
             name: PLUGIN_NAME,
             stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
           },
-          (assets) => {
+          async (assets) => {
             const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
             if (!collectedCSS) return;
-            injectStyleXCss(
+            await injectStyleXCss(
               assets,
               injectMarker,
               collectedCSS,
               normalizedOptions.fileName,
+              normalizedOptions,
               (fileName, source) => compilation.updateAsset(fileName, source),
               (fileName, source) => compilation.emitAsset(fileName, source),
               (content) => new compiler.webpack.sources.RawSource(content)
@@ -618,10 +665,36 @@ var unpluginFactory = (options = {}) => {
 function ensureLeadingSlash(filePath) {
   return filePath.startsWith("/") ? filePath : `/${filePath}`;
 }
-function generateCSSAssets(stylexRules, normalizedOptions, transformedOptions, assetsDir) {
+async function generateCSSAssets(stylexRules, normalizedOptions, transformedOptions, assetsDir) {
+  var _a;
   const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
-  const processedFileName = getProcessedFileName(normalizedOptions, collectedCSS || "", assetsDir);
-  return { processedFileName, collectedCSS };
+  const finalCSS = collectedCSS ? await transformStyleXCSS(
+    collectedCSS,
+    (_a = getCssFilePathTemplate(normalizedOptions, assetsDir)) != null ? _a : void 0,
+    normalizedOptions
+  ) : collectedCSS;
+  const processedFileName = getProcessedFileName(normalizedOptions, finalCSS || "", assetsDir);
+  return { processedFileName, collectedCSS: finalCSS };
+}
+var transformCssCache = /* @__PURE__ */ new WeakMap();
+async function transformStyleXCSS(css, filePath, normalizedOptions) {
+  const { transformCss } = normalizedOptions;
+  if (transformCss === identityTransformCss) {
+    return css;
+  }
+  let cache = transformCssCache.get(transformCss);
+  if (!cache) {
+    cache = /* @__PURE__ */ new Map();
+    transformCssCache.set(transformCss, cache);
+  }
+  const cacheKey = filePath != null ? filePath : "";
+  const cached = cache.get(cacheKey);
+  if (cached && cached.css === css) {
+    return cached.result;
+  }
+  const result = (await transformCss(css, filePath)).toString();
+  cache.set(cacheKey, { css, result });
+  return result;
 }
 function hasStyleXCode(normalizedOptions, inputCode) {
   var _a;
@@ -640,10 +713,13 @@ function transformStyleXCode(file, inputCode, normalizedOptions, stylexRules, id
   }
   return result;
 }
-function getProcessedFileName(normalizedOptions, collectedCSS, assetsDir) {
+function getCssFilePathTemplate(normalizedOptions, assetsDir) {
   if (!normalizedOptions.fileName) return null;
-  const computedFileName = assetsDir ? path.posix.join(assetsDir, normalizedOptions.fileName) : normalizedOptions.fileName;
-  return replaceFileName(computedFileName, collectedCSS || "");
+  return assetsDir ? path.posix.join(assetsDir, normalizedOptions.fileName) : normalizedOptions.fileName;
+}
+function getProcessedFileName(normalizedOptions, collectedCSS, assetsDir) {
+  const template = getCssFilePathTemplate(normalizedOptions, assetsDir);
+  return template ? replaceFileName(template, collectedCSS || "") : null;
 }
 var unplugin = _unplugin.createUnplugin.call(void 0, unpluginFactory);
 var index_default = unplugin;

package/dist/{chunk-JDL3R5RP.js → chunk-JXPUCXE6.js}

@@ -34,8 +34,9 @@ function getStyleXRules(stylexRules, transformedOptions) {
 // src/utils/normalizeOptions.ts
 import { normalizeRsOptions } from "@stylexswc/rs-compiler";
 var DEFAULT_CSS_PLACEHOLDER = "@stylex;";
+var identityTransformCss = (css) => css;
 function normalizeOptions(options) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   let useCssPlaceholder = false;
   if (options.useCssPlaceholder === true) {
     useCssPlaceholder = DEFAULT_CSS_PLACEHOLDER;
@@ -52,6 +53,7 @@ function normalizeOptions(options) {
     pageExtensions: (_b = options.pageExtensions) != null ? _b : ["tsx", "jsx", "js", "ts"],
     rsOptions: normalizedRsOptions,
     extractCSS: (_c = options.extractCSS) != null ? _c : true,
+    transformCss: (_d = options.transformCss) != null ? _d : identityTransformCss,
     useCssPlaceholder,
     enableLTRRTLComments: normalizedRsOptions.enableLTRRTLComments,
     legacyDisableLayers: normalizedRsOptions.legacyDisableLayers
@@ -124,7 +126,7 @@ async function invalidateAndCollectCssModules(server, placeholder) {
   );
   return cssModules;
 }
-function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, updateAsset, emitAsset, createRawSource) {
+async function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, normalizedOptions, updateAsset, emitAsset, createRawSource) {
   const cssAssets = Object.keys(assets).filter((f) => f.endsWith(".css"));
   let injected = false;
   for (const fileName of cssAssets) {
@@ -132,7 +134,8 @@ function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, u
     if (!asset) continue;
     const source = asset.source().toString();
     if (source.includes(injectMarker)) {
-      const newSource = source.replace(injectMarker, collectedCSS);
+      const finalCSS = await transformStyleXCSS(collectedCSS, fileName, normalizedOptions);
+      const newSource = source.replace(injectMarker, () => finalCSS);
       updateAsset(fileName, createRawSource(newSource));
       injected = true;
       break;
@@ -144,14 +147,16 @@ function injectStyleXCss(assets, injectMarker, collectedCSS, fallbackFileName, u
       const asset = assets[targetAsset];
       if (asset) {
         const existing = asset.source().toString();
-        const newSource = existing ? existing + "\n" + collectedCSS : collectedCSS;
+        const finalCSS = await transformStyleXCSS(collectedCSS, targetAsset, normalizedOptions);
+        const newSource = existing ? existing + "\n" + finalCSS : finalCSS;
         updateAsset(targetAsset, createRawSource(newSource));
         injected = true;
       }
     }
   }
   if (!injected) {
-    emitAsset(fallbackFileName, createRawSource(collectedCSS));
+    const finalCSS = await transformStyleXCSS(collectedCSS, fallbackFileName, normalizedOptions);
+    emitAsset(fallbackFileName, createRawSource(finalCSS));
   }
 }
 var unpluginFactory = (options = {}) => {
@@ -247,7 +252,7 @@ var unpluginFactory = (options = {}) => {
         this.error(new Error(enhancedMessage, { cause: error }));
       }
     },
-    buildEnd() {
+    async buildEnd() {
       var _a;
       const framework = (_a = this.getNativeBuildContext) == null ? void 0 : _a.call(this).framework;
       if (framework === "esbuild") {
@@ -256,7 +261,7 @@ var unpluginFactory = (options = {}) => {
       if (normalizedOptions.useCssPlaceholder) {
         return;
       }
-      const { processedFileName, collectedCSS } = generateCSSAssets(
+      const { processedFileName, collectedCSS } = await generateCSSAssets(
         stylexRules,
         normalizedOptions,
         transformedOptions
@@ -299,11 +304,11 @@ var unpluginFactory = (options = {}) => {
         if (!(collectedCSS == null ? void 0 : collectedCSS.trim())) {
           replacementCSS = isDevMode ? "/* StyleX styles will load after transformation */" : "/* No StyleX styles */";
         } else {
-          replacementCSS = collectedCSS;
+          replacementCSS = await transformStyleXCSS(collectedCSS, id, normalizedOptions);
         }
-        return cssContent.replace(normalizedOptions.useCssPlaceholder, replacementCSS);
+        return cssContent.replace(normalizedOptions.useCssPlaceholder, () => replacementCSS);
       },
-      generateBundle(_options, bundle) {
+      async generateBundle(_options, bundle) {
         if (!normalizedOptions.useCssPlaceholder) return;
         const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
         if (!collectedCSS) return;
@@ -318,7 +323,12 @@ var unpluginFactory = (options = {}) => {
           if (output.type !== "asset") continue;
           const source = output.source.toString();
           if (normalizedOptions.useCssPlaceholder && source.includes(normalizedOptions.useCssPlaceholder)) {
-            output.source = source.replace(normalizedOptions.useCssPlaceholder, collectedCSS);
+            const finalCSS = await transformStyleXCSS(
+              collectedCSS,
+              output.fileName,
+              normalizedOptions
+            );
+            output.source = source.replace(normalizedOptions.useCssPlaceholder, () => finalCSS);
             injected = true;
             break;
           }
@@ -328,19 +338,29 @@ var unpluginFactory = (options = {}) => {
           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;
+            const finalCSS = await transformStyleXCSS(
+              collectedCSS,
+              target.fileName,
+              normalizedOptions
+            );
+            target.output.source = existing ? existing + "\n" + finalCSS : finalCSS;
             injected = true;
           }
         }
         if (!injected) {
+          const finalCSS = await transformStyleXCSS(
+            collectedCSS,
+            normalizedOptions.fileName,
+            normalizedOptions
+          );
           this.emitFile({
             type: "asset",
             fileName: normalizedOptions.fileName,
-            source: collectedCSS
+            source: finalCSS
           });
         }
       },
-      buildEnd() {
+      async buildEnd() {
         var _a, _b;
         if (normalizedOptions.useCssPlaceholder) {
           return;
@@ -349,7 +369,7 @@ var unpluginFactory = (options = {}) => {
         if (isDev) {
           return;
         }
-        const { processedFileName, collectedCSS } = generateCSSAssets(
+        const { processedFileName, collectedCSS } = await generateCSSAssets(
           stylexRules,
           normalizedOptions,
           transformedOptions,
@@ -370,13 +390,17 @@ var unpluginFactory = (options = {}) => {
         server.middlewares.use(
           (req, res, next) => {
             var _a;
-            if (cssFileName && ((_a = req.url) == null ? void 0 : _a.includes(cssFileName))) {
-              const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
-              res.setHeader("Content-Type", "text/css");
-              res.end(collectedCSS);
+            const requestedCssFileName = cssFileName;
+            if (!requestedCssFileName || !((_a = req.url) == null ? void 0 : _a.includes(requestedCssFileName))) {
+              next();
               return;
             }
-            next();
+            void (async () => {
+              const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
+              const finalCSS = collectedCSS ? await transformStyleXCSS(collectedCSS, requestedCssFileName, normalizedOptions) : collectedCSS;
+              res.setHeader("Content-Type", "text/css");
+              res.end(finalCSS);
+            })().catch(next);
           }
         );
       },
@@ -402,7 +426,7 @@ var unpluginFactory = (options = {}) => {
           return;
         }
         transformStyleXCode(file, inputCode, normalizedOptions, stylexRules, id);
-        const { processedFileName, collectedCSS } = generateCSSAssets(
+        const { processedFileName, collectedCSS } = await generateCSSAssets(
           stylexRules,
           normalizedOptions,
           transformedOptions,
@@ -434,13 +458,13 @@ var unpluginFactory = (options = {}) => {
           }
         }
       },
-      transformIndexHtml: (html, ctx) => {
+      transformIndexHtml: async (html, ctx) => {
         var _a, _b;
         if (normalizedOptions.useCssPlaceholder) {
           return html;
         }
         const isDev = !!ctx.server;
-        const { processedFileName } = generateCSSAssets(
+        const { processedFileName } = await generateCSSAssets(
           stylexRules,
           normalizedOptions,
           transformedOptions,
@@ -494,7 +518,12 @@ var unpluginFactory = (options = {}) => {
                 const { readFile } = await import("fs/promises");
                 const content = await readFile(cssFile, "utf8");
                 if (content.includes(injectMarker)) {
-                  const newContent = content.replace(injectMarker, collectedCSS);
+                  const finalCSS = await transformStyleXCSS(
+                    collectedCSS,
+                    cssFile,
+                    normalizedOptions
+                  );
+                  const newContent = content.replace(injectMarker, () => finalCSS);
                   await writeFile(cssFile, newContent, "utf8");
                   injected = true;
                   break;
@@ -505,12 +534,17 @@ var unpluginFactory = (options = {}) => {
             if (!injected && cssFiles.length > 0) {
               const targetFile = pickCssAsset(cssFiles.map((f) => path.basename(f)));
               if (targetFile) {
-                const fullPath = cssFiles.find((f) => f.endsWith(targetFile));
+                const fullPath = cssFiles.find((f) => path.basename(f) === targetFile);
                 if (fullPath) {
                   try {
                     const { readFile } = await import("fs/promises");
                     const existing = await readFile(fullPath, "utf8");
-                    const newContent = existing ? existing + "\n" + collectedCSS : collectedCSS;
+                    const finalCSS = await transformStyleXCSS(
+                      collectedCSS,
+                      fullPath,
+                      normalizedOptions
+                    );
+                    const newContent = existing ? existing + "\n" + finalCSS : finalCSS;
                     await writeFile(fullPath, newContent, "utf8");
                     injected = true;
                   } catch (e) {
@@ -520,26 +554,37 @@ var unpluginFactory = (options = {}) => {
             }
             if (!injected) {
               const generatedCSSFileName = path.join(outDir, fileName);
+              const finalCSS = await transformStyleXCSS(
+                collectedCSS,
+                generatedCSSFileName,
+                normalizedOptions
+              );
               await mkdir(path.dirname(generatedCSSFileName), { recursive: true });
-              await writeFile(generatedCSSFileName, collectedCSS, "utf8");
+              await writeFile(generatedCSSFileName, finalCSS, "utf8");
             }
             return;
           }
           if (shouldWriteToDisk) {
             const generatedCSSFileName = path.join(process.cwd(), fileName);
+            const finalCSS = await transformStyleXCSS(
+              collectedCSS,
+              generatedCSSFileName,
+              normalizedOptions
+            );
             await mkdir(path.dirname(generatedCSSFileName), {
               recursive: true
             });
-            await writeFile(generatedCSSFileName, collectedCSS, "utf8");
+            await writeFile(generatedCSSFileName, finalCSS, "utf8");
             return;
           }
           if (outputFiles !== void 0) {
+            const finalCSS = await transformStyleXCSS(collectedCSS, fileName, normalizedOptions);
             outputFiles.push({
               path: "<stdout>",
-              contents: new TextEncoder().encode(collectedCSS),
-              hash: generateHash(collectedCSS),
+              contents: new TextEncoder().encode(finalCSS),
+              hash: generateHash(finalCSS),
               get text() {
-                return collectedCSS;
+                return finalCSS;
               }
             });
           }
@@ -548,16 +593,16 @@ var unpluginFactory = (options = {}) => {
     },
     farm: {
       transformHtml: {
-        executor(resource) {
+        async executor(resource) {
           if (normalizedOptions.useCssPlaceholder) {
-            return Promise.resolve(resource.htmlResource);
+            return resource.htmlResource;
           }
-          if (!hasCssToExtract) return Promise.resolve(resource.htmlResource);
+          if (!hasCssToExtract) return resource.htmlResource;
           const htmlResource = resource.htmlResource;
           let htmlContent = Buffer.from(htmlResource.bytes).toString("utf-8");
           htmlContent = `${htmlContent}<link rel="stylesheet" href="/${normalizedOptions.fileName}" />`;
           htmlResource.bytes = [...Buffer.from(htmlContent, "utf-8")];
-          return Promise.resolve(resource.htmlResource);
+          return resource.htmlResource;
         }
       }
       // Farm uses Rollup-like bundle hooks, so generateBundle handles CSS injection
@@ -567,19 +612,20 @@ var unpluginFactory = (options = {}) => {
       if (!normalizedOptions.useCssPlaceholder) return;
       const injectMarker = normalizedOptions.useCssPlaceholder;
       compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-        compilation.hooks.processAssets.tap(
+        compilation.hooks.processAssets.tapPromise(
           {
             name: PLUGIN_NAME,
             stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
           },
-          (assets) => {
+          async (assets) => {
             const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
             if (!collectedCSS) return;
-            injectStyleXCss(
+            await injectStyleXCss(
               assets,
               injectMarker,
               collectedCSS,
               normalizedOptions.fileName,
+              normalizedOptions,
               (fileName, source) => compilation.updateAsset(fileName, source),
               (fileName, source) => compilation.emitAsset(fileName, source),
               (content) => new compiler.webpack.sources.RawSource(content)
@@ -592,19 +638,20 @@ var unpluginFactory = (options = {}) => {
       if (!normalizedOptions.useCssPlaceholder) return;
       const injectMarker = normalizedOptions.useCssPlaceholder;
       compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-        compilation.hooks.processAssets.tap(
+        compilation.hooks.processAssets.tapPromise(
           {
             name: PLUGIN_NAME,
             stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
           },
-          (assets) => {
+          async (assets) => {
             const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
             if (!collectedCSS) return;
-            injectStyleXCss(
+            await injectStyleXCss(
               assets,
               injectMarker,
               collectedCSS,
               normalizedOptions.fileName,
+              normalizedOptions,
               (fileName, source) => compilation.updateAsset(fileName, source),
               (fileName, source) => compilation.emitAsset(fileName, source),
               (content) => new compiler.webpack.sources.RawSource(content)
@@ -618,10 +665,36 @@ var unpluginFactory = (options = {}) => {
 function ensureLeadingSlash(filePath) {
   return filePath.startsWith("/") ? filePath : `/${filePath}`;
 }
-function generateCSSAssets(stylexRules, normalizedOptions, transformedOptions, assetsDir) {
+async function generateCSSAssets(stylexRules, normalizedOptions, transformedOptions, assetsDir) {
+  var _a;
   const collectedCSS = getStyleXRules(stylexRules, transformedOptions);
-  const processedFileName = getProcessedFileName(normalizedOptions, collectedCSS || "", assetsDir);
-  return { processedFileName, collectedCSS };
+  const finalCSS = collectedCSS ? await transformStyleXCSS(
+    collectedCSS,
+    (_a = getCssFilePathTemplate(normalizedOptions, assetsDir)) != null ? _a : void 0,
+    normalizedOptions
+  ) : collectedCSS;
+  const processedFileName = getProcessedFileName(normalizedOptions, finalCSS || "", assetsDir);
+  return { processedFileName, collectedCSS: finalCSS };
+}
+var transformCssCache = /* @__PURE__ */ new WeakMap();
+async function transformStyleXCSS(css, filePath, normalizedOptions) {
+  const { transformCss } = normalizedOptions;
+  if (transformCss === identityTransformCss) {
+    return css;
+  }
+  let cache = transformCssCache.get(transformCss);
+  if (!cache) {
+    cache = /* @__PURE__ */ new Map();
+    transformCssCache.set(transformCss, cache);
+  }
+  const cacheKey = filePath != null ? filePath : "";
+  const cached = cache.get(cacheKey);
+  if (cached && cached.css === css) {
+    return cached.result;
+  }
+  const result = (await transformCss(css, filePath)).toString();
+  cache.set(cacheKey, { css, result });
+  return result;
 }
 function hasStyleXCode(normalizedOptions, inputCode) {
   var _a;
@@ -640,10 +713,13 @@ function transformStyleXCode(file, inputCode, normalizedOptions, stylexRules, id
   }
   return result;
 }
-function getProcessedFileName(normalizedOptions, collectedCSS, assetsDir) {
+function getCssFilePathTemplate(normalizedOptions, assetsDir) {
   if (!normalizedOptions.fileName) return null;
-  const computedFileName = assetsDir ? path.posix.join(assetsDir, normalizedOptions.fileName) : normalizedOptions.fileName;
-  return replaceFileName(computedFileName, collectedCSS || "");
+  return assetsDir ? path.posix.join(assetsDir, normalizedOptions.fileName) : normalizedOptions.fileName;
+}
+function getProcessedFileName(normalizedOptions, collectedCSS, assetsDir) {
+  const template = getCssFilePathTemplate(normalizedOptions, assetsDir);
+  return template ? replaceFileName(template, collectedCSS || "") : null;
 }
 var unplugin = createUnplugin(unpluginFactory);
 var index_default = unplugin;

package/dist/{chunk-AHGTDBFS.js → chunk-QS5OGKES.js}

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

package/dist/{chunk-JCKQLIX6.js → chunk-VFU3MJQV.js}

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

package/dist/esbuild.cjs

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

package/dist/esbuild.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-JDL3R5RP.js";
+} from "./chunk-JXPUCXE6.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 _chunkVXGDBTUTcjs = require('./chunk-VXGDBTUT.cjs');
+var _chunkFYEXHH45cjs = require('./chunk-FYEXHH45.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/farm.ts
 var _unplugin = require('unplugin');
-var plugin = _unplugin.createFarmPlugin.call(void 0, _chunkVXGDBTUTcjs.unpluginFactory);
+var plugin = _unplugin.createFarmPlugin.call(void 0, _chunkFYEXHH45cjs.unpluginFactory);
 var farm_default = plugin;
 
 

package/dist/farm.js

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

package/dist/index.cjs

@@ -2,10 +2,10 @@
 
 
 
-var _chunkVXGDBTUTcjs = require('./chunk-VXGDBTUT.cjs');
+var _chunkFYEXHH45cjs = require('./chunk-FYEXHH45.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 
 
 
-exports.default = _chunkVXGDBTUTcjs.index_default; exports.unplugin = _chunkVXGDBTUTcjs.unplugin; exports.unpluginFactory = _chunkVXGDBTUTcjs.unpluginFactory;
+exports.default = _chunkFYEXHH45cjs.index_default; exports.unplugin = _chunkFYEXHH45cjs.unplugin; exports.unpluginFactory = _chunkFYEXHH45cjs.unpluginFactory;

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import { UnpluginInstance, UnpluginFactory } from 'unplugin';
 import { UnpluginStylexRSOptions } from './types.cjs';
+export { CSSTransformer } from './types.cjs';
 import '@stylexswc/rs-compiler';
 
 declare const unpluginFactory: UnpluginFactory<UnpluginStylexRSOptions | undefined>;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { UnpluginInstance, UnpluginFactory } from 'unplugin';
 import { UnpluginStylexRSOptions } from './types.js';
+export { CSSTransformer } from './types.js';
 import '@stylexswc/rs-compiler';
 
 declare const unpluginFactory: UnpluginFactory<UnpluginStylexRSOptions | undefined>;

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   index_default,
   unplugin,
   unpluginFactory
-} from "./chunk-JDL3R5RP.js";
+} from "./chunk-JXPUCXE6.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 _chunkNUYT2WWJcjs = require('./chunk-NUYT2WWJ.cjs');
+var _chunkFIIRNHWYcjs = require('./chunk-FIIRNHWY.cjs');
 
 
-var _chunkI43XNUJVcjs = require('./chunk-I43XNUJV.cjs');
-require('./chunk-VXGDBTUT.cjs');
+var _chunk6KFXJPTKcjs = require('./chunk-6KFXJPTK.cjs');
+require('./chunk-FYEXHH45.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, () => _chunkNUYT2WWJcjs.vite_default.call(void 0, options));
-    _kit.addWebpackPlugin.call(void 0, () => _chunkI43XNUJVcjs.webpack_default.call(void 0, options));
+    _kit.addVitePlugin.call(void 0, () => _chunkFIIRNHWYcjs.vite_default.call(void 0, options));
+    _kit.addWebpackPlugin.call(void 0, () => _chunk6KFXJPTKcjs.webpack_default.call(void 0, options));
   }
 });
 

package/dist/nuxt.js

@@ -1,10 +1,10 @@
 import {
   vite_default
-} from "./chunk-AHGTDBFS.js";
+} from "./chunk-QS5OGKES.js";
 import {
   webpack_default
-} from "./chunk-JCKQLIX6.js";
-import "./chunk-JDL3R5RP.js";
+} from "./chunk-VFU3MJQV.js";
+import "./chunk-JXPUCXE6.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 _chunkVXGDBTUTcjs = require('./chunk-VXGDBTUT.cjs');
+var _chunkFYEXHH45cjs = require('./chunk-FYEXHH45.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/rollup.ts
 var _unplugin = require('unplugin');
-var rollup_default = _unplugin.createRollupPlugin.call(void 0, _chunkVXGDBTUTcjs.unpluginFactory);
+var rollup_default = _unplugin.createRollupPlugin.call(void 0, _chunkFYEXHH45cjs.unpluginFactory);
 
 
 exports.default = rollup_default;

package/dist/rollup.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-JDL3R5RP.js";
+} from "./chunk-JXPUCXE6.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 _chunkVXGDBTUTcjs = require('./chunk-VXGDBTUT.cjs');
+var _chunkFYEXHH45cjs = require('./chunk-FYEXHH45.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 // src/rspack.ts
 var _unplugin = require('unplugin');
-var rspack_default = _unplugin.createRspackPlugin.call(void 0, _chunkVXGDBTUTcjs.unpluginFactory);
+var rspack_default = _unplugin.createRspackPlugin.call(void 0, _chunkFYEXHH45cjs.unpluginFactory);
 
 
 exports.default = rspack_default;

package/dist/rspack.js

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

package/dist/types.d.cts

@@ -1,11 +1,34 @@
 import { TransformedOptions, StyleXOptions } from '@stylexswc/rs-compiler';
 
+/**
+ * Transforms extracted StyleX CSS before it is emitted or injected.
+ *
+ * `filePath` identifies the CSS destination and is bundler-specific:
+ * - webpack/rspack/rollup injection: the output asset name (e.g. `app.css`)
+ * - esbuild disk writes: the absolute path of the written file
+ * - Vite placeholder replacement: the id of the CSS module being loaded
+ * - generated assets: the configured `fileName`, with `[hash]` left unresolved
+ *   (the hash is computed from the transformed CSS, so it cannot be known earlier)
+ * - `undefined` when no destination is known
+ *
+ * Buffer results are decoded as UTF-8. Results are memoized per `filePath`
+ * while the input CSS is unchanged, so the callback must be a pure function
+ * of its arguments.
+ */
+type CSSTransformer = (css: string, filePath: string | undefined) => string | Buffer | Promise<string | Buffer>;
 interface UnpluginStylexRSOptions {
     fileName?: string;
     useCSSLayers?: TransformedOptions['useLayers'];
     pageExtensions?: string[];
     rsOptions?: StyleXOptions;
     extractCSS?: boolean;
+    /**
+     * Transform the extracted StyleX CSS before it is emitted or injected.
+     *
+     * This matches the webpack plugin API and receives the generated CSS plus the
+     * target CSS asset path when one is known.
+     */
+    transformCss?: CSSTransformer;
     /**
      * Enable CSS injection into CSS files via placeholder marker.
      *
@@ -36,4 +59,4 @@ interface UnpluginStylexRSOptions {
     useCssPlaceholder?: boolean | string;
 }
 
-export type { UnpluginStylexRSOptions };
+export type { CSSTransformer, UnpluginStylexRSOptions };

package/dist/types.d.ts

@@ -1,11 +1,34 @@
 import { TransformedOptions, StyleXOptions } from '@stylexswc/rs-compiler';
 
+/**
+ * Transforms extracted StyleX CSS before it is emitted or injected.
+ *
+ * `filePath` identifies the CSS destination and is bundler-specific:
+ * - webpack/rspack/rollup injection: the output asset name (e.g. `app.css`)
+ * - esbuild disk writes: the absolute path of the written file
+ * - Vite placeholder replacement: the id of the CSS module being loaded
+ * - generated assets: the configured `fileName`, with `[hash]` left unresolved
+ *   (the hash is computed from the transformed CSS, so it cannot be known earlier)
+ * - `undefined` when no destination is known
+ *
+ * Buffer results are decoded as UTF-8. Results are memoized per `filePath`
+ * while the input CSS is unchanged, so the callback must be a pure function
+ * of its arguments.
+ */
+type CSSTransformer = (css: string, filePath: string | undefined) => string | Buffer | Promise<string | Buffer>;
 interface UnpluginStylexRSOptions {
     fileName?: string;
     useCSSLayers?: TransformedOptions['useLayers'];
     pageExtensions?: string[];
     rsOptions?: StyleXOptions;
     extractCSS?: boolean;
+    /**
+     * Transform the extracted StyleX CSS before it is emitted or injected.
+     *
+     * This matches the webpack plugin API and receives the generated CSS plus the
+     * target CSS asset path when one is known.
+     */
+    transformCss?: CSSTransformer;
     /**
      * Enable CSS injection into CSS files via placeholder marker.
      *
@@ -36,4 +59,4 @@ interface UnpluginStylexRSOptions {
     useCssPlaceholder?: boolean | string;
 }
 
-export type { UnpluginStylexRSOptions };
+export type { CSSTransformer, UnpluginStylexRSOptions };

package/dist/vite.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkNUYT2WWJcjs = require('./chunk-NUYT2WWJ.cjs');
-require('./chunk-VXGDBTUT.cjs');
+var _chunkFIIRNHWYcjs = require('./chunk-FIIRNHWY.cjs');
+require('./chunk-FYEXHH45.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 
-exports.default = _chunkNUYT2WWJcjs.vite_default;
+exports.default = _chunkFIIRNHWYcjs.vite_default;
 
 module.exports = exports.default;

package/dist/vite.js

@@ -1,7 +1,7 @@
 import {
   vite_default
-} from "./chunk-AHGTDBFS.js";
-import "./chunk-JDL3R5RP.js";
+} from "./chunk-QS5OGKES.js";
+import "./chunk-JXPUCXE6.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 _chunkI43XNUJVcjs = require('./chunk-I43XNUJV.cjs');
-require('./chunk-VXGDBTUT.cjs');
+var _chunk6KFXJPTKcjs = require('./chunk-6KFXJPTK.cjs');
+require('./chunk-FYEXHH45.cjs');
 require('./chunk-ZBPRDZS4.cjs');
 
 
-exports.default = _chunkI43XNUJVcjs.webpack_default;
+exports.default = _chunk6KFXJPTKcjs.webpack_default;
 
 module.exports = exports.default;

package/dist/webpack.js

@@ -1,7 +1,7 @@
 import {
   webpack_default
-} from "./chunk-JCKQLIX6.js";
-import "./chunk-JDL3R5RP.js";
+} from "./chunk-VFU3MJQV.js";
+import "./chunk-JXPUCXE6.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.17.0-rc.2",
+  "version": "0.17.0-rc.3",
   "bugs": "https://github.com/Dwlad90/stylex-swc-plugin/issues",
   "config": {
     "scripty": {
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@stylexjs/babel-plugin": "^0.19.0",
-    "@stylexswc/rs-compiler": "0.17.0-rc.2",
+    "@stylexswc/rs-compiler": "0.17.0-rc.3",
     "unplugin": "^3.0.0",
     "vite": "^8.1.2"
   },