stylex-webpack 0.4.3 → 0.4.5

package/dist/index.d.ts

@@ -49,16 +49,14 @@ interface StyleXPluginOption {
      */
     transformCss?: CSSTransformer;
 }
-type RegisterStyleXRules = (resourcePath: string, stylexRules: Rule[]) => void;
 declare class StyleXPlugin {
     stylexRules: Map<string, readonly Rule[]>;
     useCSSLayers: boolean;
     loaderOption: StyleXLoaderOptions;
     transformCss: CSSTransformer;
-    private readonly _virtualModuleInstance;
     constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode, nextjsAppRouterMode, transformCss }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }
 
 export { StyleXPlugin };
-export type { RegisterStyleXRules, StyleXPluginOption };
+export type { StyleXPluginOption };

package/dist/index.js

@@ -3,19 +3,28 @@
 var stylexBabelPlugin = require('@stylexjs/babel-plugin');
 var path = require('node:path');
 var process = require('node:process');
-var VirtualModulesPlugin = require('webpack-virtual-modules');
 var identity = require('foxts/identity');
 
-var version = "0.4.3";
+var version = "0.4.5";
 
 const PLUGIN_NAME = 'stylex';
 const VIRTUAL_ENTRYPOINT_CSS_PATH = require.resolve('./stylex.css');
-const VIRTUAL_ENTRYPOINT_CSS_PATTERN = /stylex\.css/;
+require.resolve('./stylex-virtual.css');
+const VIRTUAL_CSS_PATTERN = /stylex\.css|stylex-virtual\.css/;
+const VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATTERN = /stylex-virtual\.css/;
 const STYLEX_CHUNK_NAME = '_stylex-webpack-generated';
-require.resolve('./stylex.fuck-nextjs.virtual-carrier.css');
-const FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN = /stylex\.fuck-nextjs\.virtual-carrier\.css/;
-const FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME = '_stylex-fuck-nextjs-collect-stylex-rules';
 const INCLUDE_REGEXP = /\.[cm]?[jt]sx?$/;
+const BUILD_INFO_STYLEX_KEY = '~stylex_webpack_stylex_rules';
+// https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/shared/lib/constants.ts#L7
+const NEXTJS_COMPILER_NAMES = {
+    client: 'client',
+    server: 'server',
+    edgeServer: 'edge-server'
+};
+function isNextJsCompilerName(name) {
+    if (name == null) return false;
+    return NEXTJS_COMPILER_NAMES[name] === name;
+}
 
 function _define_property(obj, key, value) {
     if (key in obj) {
@@ -31,7 +40,7 @@ function _define_property(obj, key, value) {
     return obj;
 }
 const stylexLoaderPath = require.resolve('./stylex-loader');
-const fuckNextjsVirtualLoaderPath = require.resolve('./stylex-fuck-nextjs-virtual-carrier-loader');
+const stylexVirtualCssLoaderPath = require.resolve('./stylex-virtual-css-loader');
 function getStyleXRules(stylexRules, useCSSLayers) {
     if (stylexRules.size === 0) {
         return null;
@@ -50,24 +59,14 @@ class StyleXPlugin {
                 '"optimization.splitChunks" should be enabled for "stylex-webpack" to function properly.'
             ].join(' '));
         }
-        this._virtualModuleInstance.apply(compiler);
         (_compiler_options_optimization_splitChunks = compiler.options.optimization.splitChunks).cacheGroups ?? (_compiler_options_optimization_splitChunks.cacheGroups = {});
         compiler.options.optimization.splitChunks.cacheGroups[STYLEX_CHUNK_NAME] = {
             name: STYLEX_CHUNK_NAME,
-            test: VIRTUAL_ENTRYPOINT_CSS_PATTERN,
+            test: VIRTUAL_CSS_PATTERN,
             type: 'css/mini-extract',
             chunks: 'all',
             enforce: true
         };
-        if (this.loaderOption.nextjsMode) {
-            compiler.options.optimization.splitChunks.cacheGroups[FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME] = {
-                name: FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME,
-                test: FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN,
-                type: 'css/mini-extract',
-                chunks: 'all',
-                enforce: true
-            };
-        }
         // const IS_RSPACK = Object.prototype.hasOwnProperty.call(compiler.webpack, 'rspackVersion');
         // stylex-loader adds virtual css import (which triggers virtual-loader)
         // This prevents "stylex.virtual.css" files from being tree shaken by forcing
@@ -83,6 +82,12 @@ class StyleXPlugin {
                 }
             });
         });
+        // compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+        //   compilation.dependencyTemplates.set(
+        //     CssLocalIdentifierDependency,
+        //     new CssLocalIdentifierDependency.Template()
+        //   );
+        // });
         const { Compilation, NormalModule, sources } = compiler.webpack;
         const { RawSource } = sources;
         const meta = JSON.stringify({
@@ -90,25 +95,14 @@ class StyleXPlugin {
             packageVersion: version,
             opt: this.loaderOption
         });
+        const logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
         // Apply loader to JS modules
         compiler.hooks.make.tap(PLUGIN_NAME, (compilation)=>{
             compilation.hooks.chunkHash.tap(PLUGIN_NAME, (_, hash)=>hash.update(meta));
-            NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, mod)=>{
+            NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (_loaderContext, mod)=>{
                 const extname = path.extname(mod.matchResource || mod.resource);
-                if (this.loaderOption.nextjsMode && FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN.test(mod.matchResource || mod.resource)) {
-                    mod.loaders.push({
-                        loader: fuckNextjsVirtualLoaderPath,
-                        options: {},
-                        ident: null,
-                        type: null
-                    });
-                }
+                logger.debug(`attaching stylex-loader to ${mod.matchResource || mod.resource}`);
                 if (INCLUDE_REGEXP.test(extname)) {
-                    loaderContext.StyleXWebpackContextKey = {
-                        registerStyleXRules: (resourcePath, stylexRules)=>{
-                            this.stylexRules.set(resourcePath, stylexRules);
-                        }
-                    };
                     // We use .push() here instead of .unshift()
                     // Webpack usually runs loaders in reverse order and we want to ideally run
                     // our loader before anything else.
@@ -118,45 +112,78 @@ class StyleXPlugin {
                         ident: null,
                         type: null
                     });
+                } else if (VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATTERN.test(mod.matchResource || mod.resource)) {
+                    mod.loaders.push({
+                        loader: stylexVirtualCssLoaderPath,
+                        ident: null,
+                        type: null
+                    });
                 }
             });
             compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
             }, async (assets)=>{
-                if (this.loaderOption.nextjsMode) {
-                    // Collect stylex rules from module instead of self maintained map
-                    // on previous step, we create a "stylex" chunk to hold all virtual stylex css
-                    // the chunk contains all css chunks generated by mini-css-extract-plugin
-                    // TODO-RSPACK: once again, rspack doesn't have this
-                    const fuckNextjsChunk = compilation.namedChunks.get(FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME);
-                    if (fuckNextjsChunk) {
-                        const cssModulesInFuckNextjsChunk = compilation.chunkGraph.getChunkModulesIterableBySourceType(fuckNextjsChunk, 'css/mini-extract');
-                        // we only re-collect stylex rules if we can found css in the stylex chunk
-                        if (cssModulesInFuckNextjsChunk) {
-                            for (const cssModule of cssModulesInFuckNextjsChunk){
-                                if (!('_identifier' in cssModule) || typeof cssModule._identifier !== 'string') {
-                                    continue;
-                                }
-                                const stringifiedStylexRule = cssModule._identifier.split('!').pop()?.split('?').pop();
-                                if (!stringifiedStylexRule) {
-                                    continue;
-                                }
-                                const params = new URLSearchParams(stringifiedStylexRule);
-                                const stylex = params.get('stylex');
-                                const from = params.get('from');
-                                if (stylex != null && from != null) {
-                                    this.stylexRules.set(from, JSON.parse(stylex));
-                                }
-                            }
+                compilation.modules.forEach((mod)=>{
+                    if (mod.buildInfo && BUILD_INFO_STYLEX_KEY in mod.buildInfo) {
+                        const stylexBuildInfo = mod.buildInfo[BUILD_INFO_STYLEX_KEY];
+                        if (typeof stylexBuildInfo === 'object' && stylexBuildInfo != null && 'resourcePath' in stylexBuildInfo && 'stylexRules' in stylexBuildInfo && typeof stylexBuildInfo.resourcePath === 'string') {
+                            logger.debug(`collecting stylex rules from ${stylexBuildInfo.resourcePath}'s build info`);
+                            this.stylexRules.set(stylexBuildInfo.resourcePath, stylexBuildInfo.stylexRules);
                         }
-                        // Let's find the css file that belongs to the fuck-next.js chunk to remove it
-                        const fuckNextjsChunkCssAssetNames = Object.keys(assets).filter((assetName)=>fuckNextjsChunk.files.has(assetName) && assetName.endsWith('.css'));
-                        if (fuckNextjsChunkCssAssetNames.length > 0) {
-                            for (const assetName of fuckNextjsChunkCssAssetNames){
-                                compilation.deleteAsset(assetName);
-                            }
+                    }
+                });
+                if (this.loaderOption.nextjsMode && this.loaderOption.nextjsAppRouterMode && isNextJsCompilerName(compiler.name)) {
+                    /**
+             * Next.js call webpack compiler through "runCompiler": https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/compiler.ts#L39
+             *
+             * The "runCompiler" funtion is invoked by "webpackBuildImpl" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L203
+             *
+             * The "webpackBuildImpl" function accepts "compilerName" parameter, and is invoked by "webpackBuild" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack-build/index.ts#L124
+             * When build worker is enabled, the "compilerName" parameter is set to either "client", "server" or "edge-server". If build worker is disabled,
+             * the "compilerName" parameter is always "null".
+             *
+             * When build worker is disabled, the multi-stage build is managed by "webpackBuildImpl" function itself: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L203
+             * It will first run "server" compiler, then "edge-server" compiler, and finally "client" compiler.
+             *
+             * The "webpackBuildImpl" function is invoked by "webpackBuild" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack-build/index.ts#L124
+             *
+             * If build worker is enabled, the multi-stage build is managed by the build entrypoint, and the "client", "server" and "edge-server" compilerName
+             * is passed to "webpackBuildImpl" through "webpackBuild" function:
+             * https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L905
+             * https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L1796
+             *
+             * Note that, if a custom webpack config is provided, Next.js will always disable build worker: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/index.ts#L1723
+             * We will not take that as an assumption. We already overwrite "nextConfig.experimental.webpackBuildWorker" to false in the Next.js plugin.
+             *
+             * Now all compiler instances are running in the same process, we can use a global variable to track stylex rules from different compilers.
+             *
+             * Back to "runCompiler". "runCompiler" accepts webpack configurations which is created by "getBaseWebpackConfig" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-build/impl.ts#L128
+             *
+             * Inside "getBaseWebpackConfig" function, there is a "buildConfiguration" function: https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/webpack-config.ts#L2464
+             * Inside "buildConfiguration" function there is a curried "base" function: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack/config/index.ts#L73
+             * Inside the "base" function, the compiler name is attached to the webpack configuration: https://github.com/vercel/next.js/blob/c0c75e4aaa8ece2c9e789e2e3f150d7487b60bbc/packages/next/src/build/webpack/config/blocks/base.ts#L24
+             */ if (compiler.name === NEXTJS_COMPILER_NAMES.server || compiler.name === NEXTJS_COMPILER_NAMES.edgeServer) {
+                        var _globalThis;
+                        ((_globalThis = globalThis).__stylex_nextjs_global_registry__ ?? (_globalThis.__stylex_nextjs_global_registry__ = new Map())).set(compiler.name, this.stylexRules);
+                        // we don't need to do anything more in server/edge compiler, no CSS generation is needed
+                        return;
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- type safe
+                    if (compiler.name === NEXTJS_COMPILER_NAMES.client) {
+                        const globalRegistry = globalThis.__stylex_nextjs_global_registry__;
+                        if (globalRegistry != null) {
+                            // now we merge all collected rules from other compilers
+                            globalRegistry.forEach((rules)=>{
+                                rules.forEach((rule, resourcePath)=>{
+                                    if (!this.stylexRules.has(resourcePath)) {
+                                        this.stylexRules.set(resourcePath, rule);
+                                    }
+                                });
+                            });
                         }
+                    } else {
+                        compiler.name;
                     }
                 }
                 const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
@@ -164,28 +191,20 @@ class StyleXPlugin {
                     return;
                 }
                 const finalCss = await this.transformCss(stylexCSS);
-                if (compiler.options.mode === 'development' && this.loaderOption.nextjsAppRouterMode) {
-                    // In development mode, a.k.a. HMR
-                    /**
-             * Now we write final CSS to virtual module, which acts like `stylex-webpack/stylex.css` has been
-             * updated locally on the disk, and Next.js and webpack will have no choice but to update the global css
-             */ this._virtualModuleInstance.writeModule(VIRTUAL_ENTRYPOINT_CSS_PATH, finalCss.toString());
-                } else {
-                    const stylexChunk = compilation.namedChunks.get(STYLEX_CHUNK_NAME);
-                    if (!stylexChunk) return;
-                    // Let's find the css file that belongs to the stylex chunk
-                    const stylexChunkCssAssetNames = Object.keys(assets).filter((assetName)=>stylexChunk.files.has(assetName) && assetName.endsWith('.css'));
-                    if (stylexChunkCssAssetNames.length === 0) {
-                        return;
-                    }
-                    if (stylexChunkCssAssetNames.length > 1) {
-                        console.warn('[stylex-webpack] Multiple CSS assets found for the stylex chunk. This should not happen. Please report this issue.');
-                    }
-                    const stylexAssetName = stylexChunkCssAssetNames[0];
-                    compilation.updateAsset(stylexAssetName, ()=>new RawSource(finalCss), {
-                        minimized: false
-                    });
+                const stylexChunk = compilation.namedChunks.get(STYLEX_CHUNK_NAME);
+                if (!stylexChunk) return;
+                // Let's find the css file that belongs to the stylex chunk
+                const stylexChunkCssAssetNames = Object.keys(assets).filter((assetName)=>stylexChunk.files.has(assetName) && assetName.endsWith('.css'));
+                if (stylexChunkCssAssetNames.length === 0) {
+                    return;
+                }
+                if (stylexChunkCssAssetNames.length > 1) {
+                    logger.warn('Multiple CSS assets found for the stylex chunk. This should not happen. Please report this issue.');
                 }
+                const stylexAssetName = stylexChunkCssAssetNames[0];
+                compilation.updateAsset(stylexAssetName, ()=>new RawSource(finalCss), {
+                    minimized: false
+                });
             });
         });
     }
@@ -197,7 +216,6 @@ class StyleXPlugin {
         _define_property(this, "useCSSLayers", void 0);
         _define_property(this, "loaderOption", void 0);
         _define_property(this, "transformCss", void 0);
-        _define_property(this, "_virtualModuleInstance", new VirtualModulesPlugin());
         this.useCSSLayers = useCSSLayers;
         this.loaderOption = {
             stylexImports,

package/dist/next.js

@@ -7,8 +7,8 @@ var css = require('next/dist/build/webpack/config/blocks/css');
 var index = require('./index');
 
 require.resolve('./stylex.css');
-const VIRTUAL_ENTRYPOINT_CSS_PATTERN = /stylex\.css/;
-require.resolve('./stylex.fuck-nextjs.virtual-carrier.css');
+require.resolve('./stylex-virtual.css');
+const VIRTUAL_CSS_PATTERN = /stylex\.css|stylex-virtual\.css/;
 
 /** Next.js' precompilation add "__esModule: true", but doesn't add an actual default exports */ // @ts-expect-error -- Next.js fucks something up
 const NextMiniCssExtractPlugin = nextMiniCssExtractPluginExports.default;
@@ -74,7 +74,8 @@ function getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss) {
     return loaders;
 }
 function withStyleX(pluginOptions) {
-    return (nextConfig = {})=>({
+    return (nextConfig = {})=>{
+        const config = {
             ...nextConfig,
             webpack (config, ctx) {
                 var // For some reason, Next 11.0.1 has `config.optimization.splitChunks`
@@ -98,7 +99,7 @@ function withStyleX(pluginOptions) {
                 const cssRules = (config.module?.rules?.find((rule)=>typeof rule === 'object' && rule !== null && Array.isArray(rule.oneOf) && rule.oneOf.some((setRule)=>setRule && setRule.test instanceof RegExp && typeof setRule.test.test === 'function' && setRule.test.test('filename.css')))).oneOf;
                 // Here we matches virtual css file emitted by StyleXPlugin
                 cssRules?.unshift({
-                    test: VIRTUAL_ENTRYPOINT_CSS_PATTERN,
+                    test: VIRTUAL_CSS_PATTERN,
                     use: getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss)
                 });
                 (_config1 = config).plugins ?? (_config1.plugins = []);
@@ -147,7 +148,10 @@ function withStyleX(pluginOptions) {
                     },
                     async transformCss (css) {
                         const { postcssWithPlugins } = await postcss();
-                        const result = await postcssWithPlugins.process(css);
+                        // add from: undefined to avoid source map warning
+                        const result = await postcssWithPlugins.process(css, {
+                            from: undefined
+                        });
                         if (pluginOptions?.transformCss) {
                             return pluginOptions.transformCss(result.css);
                         }
@@ -156,7 +160,16 @@ function withStyleX(pluginOptions) {
                 }));
                 return config;
             }
-        });
+        };
+        // https://github.com/vercel/next.js/blob/ad6907a8a37e930639af071203f4ce49a5d69ee5/packages/next/src/build/index.ts#L1723
+        // Actually, if a custom webpack config is provided, Next.js will always disable parallel bundling
+        // But we should not take that as an assumption, so we just warn and disable the options
+        if (config.experimental?.webpackBuildWorker) {
+            log.warn('[stylex-webpack] "experimental.webpackBuildWorker" is not supported with "stylex-webpack", the option will be disabled.');
+            config.experimental.webpackBuildWorker = false;
+        }
+        return config;
+    };
 }
 
 exports.withStyleX = withStyleX;

package/dist/stylex-loader.js

@@ -2,13 +2,11 @@
 
 var core = require('@babel/core');
 var stylexBabelPlugin = require('@stylexjs/babel-plugin');
+var guard = require('foxts/guard');
 
 require.resolve('./stylex.css');
-const FUCK_NEXTJS_VIRTUAL_CARRIER_PATH = require.resolve('./stylex.fuck-nextjs.virtual-carrier.css');
-function isSupplementedLoaderContext(context) {
-    // eslint-disable-next-line prefer-object-has-own -- target older
-    return Object.prototype.hasOwnProperty.call(context, 'StyleXWebpackContextKey');
-}
+const VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATH = require.resolve('./stylex-virtual.css');
+const BUILD_INFO_STYLEX_KEY = '~stylex_webpack_stylex_rules';
 
 function stringifyRequest(loaderContext, request) {
     return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
@@ -17,14 +15,11 @@ function stringifyRequest(loaderContext, request) {
 const PLUGIN_NAME = 'stylex';
 async function stylexLoader(inputCode, inputSourceMap) {
     const callback = this.async();
-    const { stylexImports, stylexOption, nextjsMode, nextjsAppRouterMode } = this.getOptions();
+    const { stylexImports, stylexOption } = this.getOptions();
     // bail out early if the input doesn't contain stylex imports
     if (!stylexImports.some((importName)=>inputCode.includes(importName))) {
         return callback(null, inputCode, inputSourceMap);
     }
-    if (!isSupplementedLoaderContext(this)) {
-        return callback(new Error('stylex-loader: loader context is not SupplementedLoaderContext!'));
-    }
     try {
         const { code, map, metadata } = await core.transformAsync(inputCode, {
             babelrc: false,
@@ -51,22 +46,18 @@ async function stylexLoader(inputCode, inputSourceMap) {
         }
         // this.stylexRules[filename] = metadata.stylex;
         logger?.debug(`Read stylex styles from ${this.resourcePath}:`, metadata.stylex);
-        // TODO-RSPACK: doesn't support custom loader context
-        // Find a better way to register stylex rules to the compiler instance
-        this.StyleXWebpackContextKey.registerStyleXRules(this.resourcePath, metadata.stylex);
-        // Next.js Pages Router doesn't need CSS import in every page.
-        if (nextjsMode && nextjsAppRouterMode) {
-            // Next.js App Router doesn't support inline matchResource and inline loaders
-            // So we adapt Next.js' "external" css import approach instead
-            const urlParams = new URLSearchParams({
-                from: this.resourcePath,
-                stylex: JSON.stringify(metadata.stylex) // color: #fff is not url safe, let's get through JSON.stringify
-            });
-            const virtualCssRequest = stringifyRequest(this, `${FUCK_NEXTJS_VIRTUAL_CARRIER_PATH}?${urlParams.toString()}`);
-            const postfix = `\nimport ${virtualCssRequest};`;
-            return callback(null, code + postfix, map ?? undefined);
-        }
-        return callback(null, code ?? undefined, map ?? undefined);
+        guard.nullthrow(this._module?.buildInfo, '[stylex-webpack] Expected "this._module.buildInfo" to be defined')[BUILD_INFO_STYLEX_KEY] = {
+            resourcePath: this.resourcePath,
+            stylexRules: metadata.stylex
+        };
+        // Add a dummy virtual import that will be picked up by virtual dummy import loader to add fake CSS to invalidate HMR
+        const urlParams = new URLSearchParams({
+            from: this.resourcePath,
+            stylex: JSON.stringify(metadata.stylex) // color: #fff is not url safe, let's get through JSON.stringify
+        });
+        const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_STYLEX_CSS_DUMMY_IMPORT_PATH}?${urlParams.toString()}`);
+        const postfix = `\nimport ${virtualCssRequest};`;
+        return callback(null, code + postfix, map ?? undefined);
     } catch (error) {
         return callback(error);
     }

package/dist/{stylex-fuck-nextjs-virtual-carrier-loader.js → stylex-virtual-css-loader.js}

@@ -1,11 +1,16 @@
 'use strict';
 
 var loaderUtils = require('loader-utils');
-var tsDedent = require('ts-dedent');
 
 // prefer loader-utils over self-implemented hash function to utilize caching + bulk hashing
-function stylexFuckNextjsVirtualCarrierLoader(inputCode, inputSourceMap) {
+function stylexVirtualCssLoader(inputCode, inputSourceMap) {
     const callback = this.async();
+    this.cacheable(false);
+    if (this._compiler?.options.mode === 'production') {
+        // In development mode, we don't need to generate the virtual CSS content
+        callback(null, inputCode, inputSourceMap);
+        return;
+    }
     const data = new URLSearchParams(this.resourceQuery.slice(1));
     try {
         const stylex = data.get('stylex');
@@ -15,14 +20,11 @@ function stylexFuckNextjsVirtualCarrierLoader(inputCode, inputSourceMap) {
         }
         // @ts-expect-error -- getHashDigest supports string & xxhash64
         const hash = loaderUtils.getHashDigest(stylex, 'xxhash64', 'base62', 32);
-        const code = tsDedent.dedent`
-      /** stylex rules: ${stylex} */
-      .stylex-fuck-nextjs-${hash} {}
-    `;
+        const code = `/** stylex rules: ${stylex} */\n.stylex-hashed-${hash} {}`;
         callback(null, inputCode + '\n' + code);
     } catch (e) {
         callback(e);
     }
 }
 
-module.exports = stylexFuckNextjsVirtualCarrierLoader;
+module.exports = stylexVirtualCssLoader;

package/dist/stylex-virtual.css

@@ -0,0 +1,7 @@
+/*
+ * This is a noop file that is meant to be imported via a dummy import by stylex webpack loader
+ *
+ * This has to be an actual file as webpack requires a file to exist on disk
+ *
+ * In production build this should have been minimized away, if not please report an issue.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {
@@ -29,7 +29,7 @@
     "./stylex.css": "./dist/stylex.css"
   },
   "scripts": {
-    "prebuild": "rimraf dist",
+    "prebuild": "premove dist",
     "build": "rollup -c rollup.config.ts --configPlugin swc3 --bundleConfigAsCjs",
     "lint": "eslint --format=sukka .",
     "test": "mocha --require @swc-node/register --require mocha-expect-snapshot test/index.ts",
@@ -49,50 +49,48 @@
   "author": "Sukka <https://skk.moe>",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.28.4",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-syntax-jsx": "^7.27.1",
     "@babel/plugin-syntax-typescript": "^7.27.1",
     "@types/webpack": "^5.28.5",
-    "foxts": "^3.13.0",
-    "loader-utils": "^3.3.1",
-    "ts-dedent": "^2.2.0",
-    "webpack-virtual-modules": "^0.6.2"
+    "foxts": "^5.0.0",
+    "loader-utils": "^3.3.1"
   },
   "devDependencies": {
-    "@eslint-sukka/node": "^7.0.2",
+    "@eslint-sukka/node": "^8.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@swc-node/register": "^1.11.1",
-    "@swc/core": "^1.13.5",
+    "@swc/core": "^1.15.0",
     "@types/babel__core": "^7.20.5",
     "@types/loader-utils": "^3.0.0",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^22.18.3",
-    "browserslist": "^4.26.0",
-    "bumpp": "^10.2.3",
+    "@types/node": "^22.19.0",
+    "browserslist": "^4.27.0",
+    "bumpp": "^10.3.1",
     "css-loader": "^7.1.2",
-    "eslint": "^9.35.0",
-    "eslint-config-sukka": "^7.0.2",
-    "eslint-formatter-sukka": "^7.0.2",
-    "expect": "^30.1.2",
-    "memfs": "^4.39.0",
+    "eslint": "^9.39.1",
+    "eslint-config-sukka": "^8.0.2",
+    "eslint-formatter-sukka": "^8.0.2",
+    "expect": "^30.2.0",
+    "memfs": "^4.50.0",
     "mini-css-extract-plugin": "^2.9.4",
-    "mocha": "^11.7.2",
+    "mocha": "^11.7.5",
     "mocha-expect-snapshot": "^8.0.0",
-    "next": "^15.5.3",
+    "next": "^15.5.6",
     "postcss": "^8.5.6",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.50.1",
+    "premove": "^4.0.0",
+    "rollup": "^4.52.5",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-swc3": "^0.12.1",
     "swc-loader": "^0.2.6",
-    "typescript": "^5.9.2",
-    "webpack": "^5.101.3"
+    "typescript": "^5.9.3",
+    "webpack": "^5.102.1"
   },
   "peerDependencies": {
     "@stylexjs/babel-plugin": "*"
   },
-  "packageManager": "pnpm@10.16.0",
+  "packageManager": "pnpm@10.20.0",
   "pnpm": {
     "overrides": {
       "eslint>chalk": "npm:picocolors@^1.1.1"

package/dist/stylex.fuck-nextjs.virtual-carrier.css

@@ -1,15 +0,0 @@
-/*
- * This is a noop file specifically for Next.js app dir
- *
- * This has to be an actual file as webpack requires a file to exist on disk
- *
- * Due to how Next.js stupidly handles server code and client code in two different webpack namespaces,
- * the client compiler instance can't have access to the server code, including styles registered in the server code.
- *
- * In order for the client bundle to collect all the styles, we use this virtual noop file as a bridge. This file doesn't
- * do anything, but it will become a carrier, holding collected style rules. It is done by appending a fake import with
- * a url query using the "stylex-loader".
- *
- * Later in webpack's "processAsset" phase, we collect these imports from chunk information, extract those url query from
- * module identifiers, collect style rules for later CSS generation.
- */