stylex-webpack 0.3.2 → 0.4.0-beta.2

package/README.md

@@ -1,29 +1,42 @@
 # stylex-webpack
 
-[First introduced by Frank Yan at React Conf 2020](https://www.youtube.com/watch?v=9JZHodNR184), [StyleX](https://stylexjs.com/) framework agnostic CSS-in-JS system with near-zero runtime, ahead-of-time compiler, atomic CSS extraction that powers Facebook and Instagram.
+[First introduced by Frank Yan at React Conf 2020](https://www.youtube.com/watch?v=9JZHodNR184), [StyleX](https://stylexjs.com/) framework agnostic CSS-in-JS system with near-zero runtime, ahead-of-time compiler, atomic CSS extraction that powers Facebook and Instagram. `stylex-webpack` is a webpack and Next.js plugin for StyleX.
 
 ## Motivation
 
-stylex offers a CSS-in-JS compiler, allowing you to write CSS in your JavaScript/JSX/TSX. However, unlike other CSS-in-JS solutions that gather and process styles within the browser, stylex will read your source code, collect your style and transform your JS/JSX/TSX, stripping runtime calls as much as possible (making the value of `className` a static string literal), and output CSS elsewhere.
+StyleX offers a CSS-in-JS compiler, allowing you to write CSS in your JavaScript/JSX/TSX. However, unlike other CSS-in-JS solutions that gather and process styles within the browser, StyleX will read your source code, collect your style and transform your JS/JSX/TSX, stripping runtime calls as much as possible (making the value of `className` a static string literal), and output the minimum required CSS elsewhere.
 
-StyleX does provide a webpack plugin. Under the hood, it will traverse through the source code, collect styles, and emit a new CSS asset during the webpack compilation. However, it does come with some limitations:
+StyleX does provide an official webpack plugin. Under the hood, it will traverse through the source code, collect styles, and emit a new CSS asset during the webpack compilation. However, it does come with some limitations:
 
 - StyleX's official Next.js setup requires a `.babelrc` file, which disables Next.js' built-in SWC compiler.
 - StyleX's official Next.js plugin requires a CSS asset to pre-exist so that it can append the extracted CSS to it.
 
-I start this project as a Proof of Concept, to see if it is possible to make a webpack plugin for ststylex that doesn't disable Next.js' SWC compiler. I have already made [a similar webpack plugin for style9](https://github.com/sukkaw/style9-webpack), which is also an AoT atomic CSS-in-JS system that is inspired by StyleX.
+I start this project as a Proof of Concept, to see if it is possible to make a webpack plugin for StyleX that doesn't disable Next.js' SWC compiler. I have already made [a similar webpack plugin for style9](https://github.com/sukkaw/style9-webpack), which is also an AoT atomic CSS-in-JS system that is inspired by StyleX.
 
-Unlike stylex's official webpack plugin, `stylex-webpack` requires you have setup `css-loader` and `MiniCssExtractPlugin` in your webpack configuration, just like your normal CSS based webpack project. `stylex-webpack`'s built-in loader will generate a virtual CSS import containing a dummy CSS rule. This allows the `MiniCssExtractPlugin` to collect those virtual CSS imports and emit a CSS asset, which `stylex-webpack` will later inject the actual extracted CSS into at the `processAssets` stage.
+Unlike StyleX's official webpack plugin, `stylex-webpack` requires you have setup `css-loader` and `MiniCssExtractPlugin` in your webpack configuration, or enables webpack's built-in CSS feature (as the time of writing this, it is still experimental, but it would become stable on webpack 6 or newer), just like your traditional CSS based webpack project. You will also have to import a virtual (dummy) CSS at the entrypoint of your App (for Next.js it is either `app/layout.tsx` for App Router or `pages/_app.tsx` for Pages Router). This allows the those webpack css solutions to collect the virtual CSS imports and emit a CSS asset, which `stylex-webpack` will later replace the dummy CSS with the actual generated CSS during webpack's `processAssets` stage.
 
 ## Installation
 
 ```sh
 # npm
-npm i stylex-webpack
+npm i stylex-webpack @stylexjs/babel-plugin
 # Yarn
-yarn add stylex-webpack
+yarn add stylex-webpack @stylexjs/babel-plugin
 # pnpm
-pnpm add stylex-webpack
+pnpm add stylex-webpack @stylexjs/babel-plugin
+```
+
+`@stylexjs/babel-plugin` is declared as a mandatory peer dependency. But we still recommend you install it directly in your project to specify the version you want to use.
+
+Also you will most likely need to install `@stylexjs/stylex` as well if you haven't already:
+
+```sh
+# npm
+npm i @stylexjs/stylex
+# Yarn
+yarn add @stylexjs/stylex
+# pnpm
+pnpm add @stylexjs/stylex
 ```
 
 ## Usage
@@ -58,6 +71,12 @@ module.exports = {
 };
 ```
 
+Then import `stylex-webpack/stylex.css` inside the entry point of your App (something like `App.tsx`, `index.tsx`, etc.):
+
+```js
+import 'stylex-webpack/stylex.css';
+```
+
 ### Next.js
 
 ```js
@@ -72,6 +91,12 @@ module.exports = withStyleX({
 });
 ```
 
+Then import `stylex-webpack/stylex.css` inside the entry point of your Next.js App, as if you are importing a global CSS file. For Next.js App Router, your app entry point would be the root layout file (e.g. `app/layout.tsx`). For Next.js Pages Router, your app entry point would be the `_app` file (e.g. `pages/_app.tsx`).
+
+```tsx
+import 'stylex-webpack/stylex.css';
+```
+
 ## Options
 
 ### webpack
@@ -117,6 +142,7 @@ new StyleXPlugin({
      *
      * https://github.com/facebook/stylex/issues/455
      * https://github.com/facebook/stylex/issues/517
+     * https://github.com/facebook/stylex/issues/1157
      *
      * For now, it is recommended to use postcss-sort-media-queries as a workaround.
      */

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import webpack from 'webpack';
 import { Options, Rule } from '@stylexjs/babel-plugin';
+import * as webpack from 'webpack';
+import { Buffer } from 'node:buffer';
 
 interface StyleXLoaderOptions {
     stylexImports: string[];
@@ -47,8 +48,10 @@ declare class StyleXPlugin {
     useCSSLayers: boolean;
     loaderOption: StyleXLoaderOptions;
     transformCss: CSSTransformer;
+    private readonly _virtualModuleInstance;
     constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode, transformCss }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }
 
-export { type RegisterStyleXRules, StyleXPlugin, type StyleXPluginOption };
+export { StyleXPlugin };
+export type { RegisterStyleXRules, StyleXPluginOption };

package/dist/index.js

@@ -1,12 +1,17 @@
 'use strict';
 
 var stylexBabelPlugin = require('@stylexjs/babel-plugin');
-var path = require('path');
+var path = require('node:path');
+var process = require('node:process');
+var VirtualModulesPlugin = require('webpack-virtual-modules');
 
 const PLUGIN_NAME = 'stylex';
-const VIRTUAL_CSS_PATH = require.resolve('./stylex.virtual.css');
-const VIRTUAL_CSS_PATTERN = /stylex\.virtual\.css/;
+const VIRTUAL_ENTRYPOINT_CSS_PATH = require.resolve('./stylex.css');
+const VIRTUAL_ENTRYPOINT_CSS_PATTERN = /stylex\.css/;
 const STYLEX_CHUNK_NAME = '_stylex-webpack-generated';
+require.resolve('./stylex.fuck-nextjs.virtual-carrier.js');
+const FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN = /stylex\.fuck-nextjs\.virtual-carrier\.js/;
+const FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME = '_stylex-fuck-nextjs-collect-stylex-rules';
 const INCLUDE_REGEXP = /\.[cm]?[jt]sx?$/;
 
 function _define_property(obj, key, value) {
@@ -23,15 +28,15 @@ function _define_property(obj, key, value) {
     return obj;
 }
 const stylexLoaderPath = require.resolve('./stylex-loader');
-const stylexVirtualLoaderPath = require.resolve('./stylex-virtual-css-loader');
-const getStyleXRules = (stylexRules, useCSSLayers)=>{
+const fuckNextjsVirtualLoaderPath = require.resolve('./stylex-fuck-nextjs-virtual-carrier-loader');
+function getStyleXRules(stylexRules, useCSSLayers) {
     if (stylexRules.size === 0) {
         return null;
     }
     // Take styles for the modules that were included in the last compilation.
     const allRules = Array.from(stylexRules.values()).flat();
     return stylexBabelPlugin.processStylexRules(allRules, useCSSLayers);
-};
+}
 const identityTransfrom = (css)=>css;
 class StyleXPlugin {
     apply(compiler) {
@@ -43,14 +48,23 @@ 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_CSS_PATTERN,
+            test: VIRTUAL_ENTRYPOINT_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,
+                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
@@ -59,19 +73,27 @@ class StyleXPlugin {
         compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, (nmf)=>{
             nmf.hooks.createModule.tap(PLUGIN_NAME, (createData)=>{
                 const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
-                if (modPath === VIRTUAL_CSS_PATH) {
+                if (modPath === VIRTUAL_ENTRYPOINT_CSS_PATH) {
                     var _createData;
                     (_createData = createData).settings ?? (_createData.settings = {});
                     createData.settings.sideEffects = true;
                 }
             });
         });
-        const { Compilation, NormalModule, sources } = compiler.webpack;
-        const { RawSource, ConcatSource } = sources;
+        const { Compilation, NormalModule } = compiler.webpack;
+        // const { RawSource } = sources;
         // Apply loader to JS modules
         compiler.hooks.make.tap(PLUGIN_NAME, (compilation)=>{
             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
+                    });
+                }
                 if (INCLUDE_REGEXP.test(extname)) {
                     loaderContext.StyleXWebpackContextKey = {
                         registerStyleXRules: (resourcePath, stylexRules)=>{
@@ -88,60 +110,49 @@ class StyleXPlugin {
                         type: null
                     });
                 }
-                if (VIRTUAL_CSS_PATTERN.test(mod.matchResource || mod.resource)) {
-                    mod.loaders.push({
-                        loader: stylexVirtualLoaderPath,
-                        options: {},
-                        ident: null,
-                        type: null
-                    });
-                }
             });
             compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
-            }, async (assets)=>{
-                // 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 stylexChunk = compilation.namedChunks.get(STYLEX_CHUNK_NAME);
-                if (stylexChunk == null) {
-                    return;
-                }
-                // Collect stylex rules from module instead of self maintained map
+            }, async (_)=>{
                 if (this.loaderOption.nextjsMode) {
-                    const cssModulesInStylexChunk = compilation.chunkGraph.getChunkModulesIterableBySourceType(stylexChunk, 'css/mini-extract');
-                    // we only re-collect stylex rules if we can found css in the stylex chunk
-                    if (cssModulesInStylexChunk) {
-                        this.stylexRules.clear();
-                        for (const cssModule of cssModulesInStylexChunk){
-                            const stringifiedStylexRule = cssModule._identifier.split('!').pop()?.split('?').pop();
-                            if (!stringifiedStylexRule) {
-                                continue;
-                            }
-                            const params = new URLSearchParams(stringifiedStylexRule);
-                            const stylex = params.get('stylex');
-                            if (stylex != null) {
-                                this.stylexRules.set(cssModule.identifier(), JSON.parse(stylex));
+                    // 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) {
+                            this.stylexRules.clear();
+                            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));
+                                }
                             }
                         }
                     }
                 }
-                // Let's find the css file that belongs to the stylex chunk
-                const cssAssetDetails = Object.entries(assets).filter(([assetName])=>stylexChunk.files.has(assetName) && assetName.endsWith('.css'));
-                if (cssAssetDetails.length === 0) {
-                    return;
-                }
-                if (cssAssetDetails.length > 1) {
-                    console.warn('[stylex-webpack] Multiple CSS assets found for the stylex chunk. This should not happen. Please report this issue.');
-                }
-                const stylexAsset = cssAssetDetails[0];
                 const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
                 if (stylexCSS == null) {
                     return;
                 }
                 const finalCss = await this.transformCss(stylexCSS);
-                compilation.updateAsset(stylexAsset[0], (source)=>new ConcatSource(source, new RawSource(finalCss)));
+                /**
+           * 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());
             });
         });
     }
@@ -153,6 +164,7 @@ 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.d.ts

@@ -1,41 +1,6 @@
 import { NextConfig } from 'next/dist/server/config-shared';
-import { Options } from '@stylexjs/babel-plugin';
+import { StyleXPluginOption } from './index';
 
-type CSSTransformer = (css: string) => string | Buffer | Promise<string | Buffer>;
-interface StyleXPluginOption {
-    /**
-     * stylex options passed to stylex babel plugin
-     *
-     * @see https://stylexjs.com/docs/api/configuration/babel-plugin/
-     */
-    stylexOption?: Partial<Options>;
-    /**
-     * Specify where stylex will be imported from
-     *
-     * @default ['stylex', '@stylexjs/stylex']
-     */
-    stylexImports?: string[];
-    /**
-     * Whether to use CSS layers
-     *
-     * @default false
-     */
-    useCSSLayers?: boolean;
-    /**
-     * Next.js Mode
-     *
-     * @default false
-     */
-    nextjsMode?: boolean;
-    /**
-     * Enable other CSS transformation
-     *
-     * Since stylex-webpack only inject CSS after all loaders, you can not use postcss-loader.
-     * With this you can incovate `postcss()` here.
-     */
-    transformCss?: CSSTransformer;
-}
-
-declare const withStyleX: (pluginOptions?: StyleXPluginOption) => (nextConfig?: NextConfig) => NextConfig;
+declare function withStyleX(pluginOptions?: StyleXPluginOption): (nextConfig?: NextConfig) => NextConfig;
 
 export { withStyleX };

package/dist/next.js

@@ -6,21 +6,22 @@ var browserslist = require('next/dist/compiled/browserslist');
 var css = require('next/dist/build/webpack/config/blocks/css');
 var index = require('./index');
 
-require.resolve('./stylex.virtual.css');
-const VIRTUAL_CSS_PATTERN = /stylex\.virtual\.css/;
+require.resolve('./stylex.css');
+const VIRTUAL_ENTRYPOINT_CSS_PATTERN = /stylex\.css/;
+require.resolve('./stylex.fuck-nextjs.virtual-carrier.js');
 
 /** 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;
 // Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
-const getSupportedBrowsers = (dir, isDevelopment)=>{
+function getSupportedBrowsers(dir, isDevelopment) {
     try {
         return browserslist.loadConfig({
             path: dir,
             env: isDevelopment ? 'development' : 'production'
         });
     } catch  {}
-};
-const getNextMiniCssExtractPlugin = (isDev)=>{
+}
+function getNextMiniCssExtractPlugin(isDev) {
     // Use own MiniCssExtractPlugin to ensure HMR works
     // v9 has issues when using own plugin in production
     // v10.2.1 has issues when using built-in plugin in development since it
@@ -33,12 +34,13 @@ const getNextMiniCssExtractPlugin = (isDev)=>{
             return NextMiniCssExtractPlugin;
         } catch  {
             log.warn('Next.js built-in mini-css-extract-plugin is broken, will fallback to "mini-css-extract-plugin"');
+            // eslint-disable-next-line @typescript-eslint/no-require-imports -- Require only when needed
             return require('mini-css-extract-plugin');
         }
     }
     // Always use Next.js built-in MiniCssExtractPlugin in production
     return NextMiniCssExtractPlugin;
-};
+}
 // Adopt from Next.js' getGlobalCssLoader
 // https://github.com/vercel/next.js/blob/d61b0761efae09bd9cb1201ff134ed8950d9deca/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
 function getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss) {
@@ -71,8 +73,8 @@ function getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss) {
     });
     return loaders;
 }
-const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
-        return {
+function withStyleX(pluginOptions) {
+    return (nextConfig = {})=>({
             ...nextConfig,
             webpack (config, ctx) {
                 var // For some reason, Next 11.0.1 has `config.optimization.splitChunks`
@@ -84,9 +86,11 @@ const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
                 (_config = config).optimization || (_config.optimization = {});
                 (_config_optimization = config.optimization).splitChunks || (_config_optimization.splitChunks = {});
                 (_config_optimization_splitChunks = config.optimization.splitChunks).cacheGroups || (_config_optimization_splitChunks.cacheGroups = {});
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- could be undefined
+                const useLightningcss = config.experimental?.useLightningcss;
                 let lazyPostCSSPromise = null;
                 const postcss = ()=>{
-                    lazyPostCSSPromise || (lazyPostCSSPromise = css.lazyPostCSS(ctx.dir, getSupportedBrowsers(ctx.dir, ctx.dev), undefined));
+                    lazyPostCSSPromise || (lazyPostCSSPromise = css.lazyPostCSS(ctx.dir, getSupportedBrowsers(ctx.dir, ctx.dev), undefined, useLightningcss));
                     return lazyPostCSSPromise;
                 };
                 const MiniCssExtractPlugin = getNextMiniCssExtractPlugin(ctx.dev);
@@ -94,7 +98,7 @@ const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
                 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_CSS_PATTERN,
+                    test: VIRTUAL_ENTRYPOINT_CSS_PATTERN,
                     use: getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss)
                 });
                 (_config1 = config).plugins ?? (_config1.plugins = []);
@@ -111,7 +115,7 @@ const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
                     // HMR reloads the CSS file when the content changes but does not use
                     // the new file name, which means it can't contain a hash.
                     const filename = ctx.dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
-                    // Logic adopted from https://git.io/JtdBy
+                    // Logic adopted from https://github.com/vercel/next.js/blob/143769bc8304423ba2038accf6f10de240733821/packages/next/src/build/webpack/config/blocks/css/index.ts#L606
                     config.plugins.push(new MiniCssExtractPlugin({
                         filename,
                         chunkFilename: filename,
@@ -152,7 +156,7 @@ const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
                 }));
                 return config;
             }
-        };
-    };
+        });
+}
 
 exports.withStyleX = withStyleX;

package/dist/stylex-fuck-nextjs-virtual-carrier-loader.js

@@ -0,0 +1,28 @@
+'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) {
+    const callback = this.async();
+    const data = new URLSearchParams(this.resourceQuery.slice(1));
+    try {
+        const stylex = data.get('stylex');
+        if (stylex == null) {
+            callback(null, inputCode, inputSourceMap);
+            return;
+        }
+        // @ts-expect-error -- getHashDigest supports string & xxhash64
+        const hash = loaderUtils.getHashDigest(stylex, 'xxhash64', 'base62', 32);
+        const code = tsDedent.dedent`
+      /** stylex rules: ${stylex} */
+      export default ${JSON.stringify('stylex-webpack-fuck-nextjs-' + hash)};
+    `;
+        callback(null, inputCode + '\n' + code);
+    } catch (e) {
+        callback(e);
+    }
+}
+
+module.exports = stylexFuckNextjsVirtualCarrierLoader;

package/dist/stylex-loader.js

@@ -2,18 +2,18 @@
 
 var core = require('@babel/core');
 var stylexBabelPlugin = require('@stylexjs/babel-plugin');
-var loaderUtils = require('loader-utils');
+
+require.resolve('./stylex.css');
+const FUCK_NEXTJS_VIRTUAL_CARRIER_PATH = require.resolve('./stylex.fuck-nextjs.virtual-carrier.js');
+function isSupplementedLoaderContext(context) {
+    // eslint-disable-next-line prefer-object-has-own -- target older
+    return Object.prototype.hasOwnProperty.call(context, 'StyleXWebpackContextKey');
+}
 
 function stringifyRequest(loaderContext, request) {
     return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
 }
 
-const VIRTUAL_CSS_PATH = require.resolve('./stylex.virtual.css');
-const isSupplementedLoaderContext = (context)=>{
-    // eslint-disable-next-line prefer-object-has-own -- target older
-    return Object.prototype.hasOwnProperty.call(context, 'StyleXWebpackContextKey');
-};
-
 const PLUGIN_NAME = 'stylex';
 async function stylexLoader(inputCode, inputSourceMap) {
     const callback = this.async();
@@ -51,30 +51,21 @@ 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
+        // 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);
-        // color: #fff is not url safe
-        const serializedStyleXRules = JSON.stringify(metadata.stylex);
-        const urlParams = new URLSearchParams({
-            from: this.resourcePath,
-            stylex: serializedStyleXRules
-        });
-        if (!nextjsMode) {
-            // Normal webpack mode
-            // We generate a virtual css file that looks like it is relative to the source
-            const virtualFileName = loaderUtils.interpolateName(this, '[path][name].[hash:base64:8].stylex.virtual.css', {
-                content: serializedStyleXRules
+        if (nextjsMode) {
+            // 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, `${virtualFileName}!=!${VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
+            const virtualCssRequest = stringifyRequest(this, `${FUCK_NEXTJS_VIRTUAL_CARRIER_PATH}?${urlParams.toString()}`);
             const postfix = `\nimport ${virtualCssRequest};`;
             return callback(null, code + postfix, map ?? undefined);
         }
-        // Next.js App Router doesn't support inline matchResource and inline loaders
-        // So we adapt Next.js' "external" css import approach instead
-        const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
-        const postfix = `\nimport ${virtualCssRequest};`;
-        return callback(null, code + postfix, map ?? undefined);
+        return callback(null, code ?? undefined, map ?? undefined);
     } catch (error) {
         return callback(error);
     }

package/dist/stylex.css

@@ -0,0 +1,8 @@
+/*
+ * This is a noop file to be imported at the entrypoint of your App
+ *
+ * This has to be an actual file as webpack requires a file to exist on disk
+ *
+ * During bundling, the stylex webpack plugin will replace content with generated CSS
+ */
+.__stylex_entrypoint__ {}

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

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */

package/next/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/next');

package/next/package.json

@@ -0,0 +1,5 @@
+{
+  "private": true,
+  "main": "../dist/next.js",
+  "types": "../dist/next.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.3.2",
+  "version": "0.4.0-beta.2",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {
@@ -14,17 +14,28 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "next.d.ts",
-    "next.js"
+    "next"
   ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./next": {
+      "types": "./next/index.d.ts",
+      "default": "./next/index.js"
+    },
+    "./stylex.css": "./dist/stylex.css"
+  },
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "rollup -c rollup.config.ts --configPlugin swc3 --bundleConfigAsCjs",
     "lint": "eslint --format=sukka .",
-    "test": "mocha --require @swc-node/register test/index.ts",
+    "test": "mocha --require @swc-node/register --require mocha-expect-snapshot test/index.ts",
     "test:update": "mocha --update --require @swc-node/register test/index.ts",
-    "prerelease": "npm run build && npm run lint",
-    "release": "bumpp -r --all --commit=\"release: %s\" --tag=\"%s\""
+    "prerelease": "pnpm run build && pnpm run lint",
+    "release": "bumpp -r --all --commit \"release: %s\" --tag \"%s\""
   },
   "keywords": [
     "css",
@@ -38,48 +49,52 @@
   "author": "Sukka <https://skk.moe>",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-syntax-jsx": "^7.24.1",
-    "@babel/plugin-syntax-typescript": "^7.24.1",
-    "@stylexjs/babel-plugin": "^0.5.1",
-    "loader-utils": "^3.2.1"
+    "@babel/core": "^7.28.3",
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@babel/plugin-syntax-typescript": "^7.27.1",
+    "@types/webpack": "^5.28.5",
+    "foxts": "^3.12.0",
+    "loader-utils": "^3.3.1",
+    "ts-dedent": "^2.2.0",
+    "webpack-virtual-modules": "^0.6.2"
   },
   "devDependencies": {
-    "@eslint-sukka/node": "^5.1.2",
-    "@eslint-sukka/ts": "^5.1.2",
-    "@swc-node/register": "^1.9.0",
-    "@swc/core": "^1.4.12",
+    "@eslint-sukka/node": "^6.23.1",
+    "@swc-node/register": "^1.11.1",
+    "@swc/core": "^1.13.5",
     "@types/babel__core": "^7.20.5",
-    "@types/chai": "^4.3.14",
-    "@types/loader-utils": "^2.0.6",
-    "@types/mocha": "^10.0.6",
-    "@types/node": "^20.12.4",
-    "browserslist": "^4.23.0",
-    "bumpp": "^9.3.0",
-    "chai": "^4.4.1",
-    "css-loader": "^6.10.0",
-    "eslint": "^8.57.0",
-    "eslint-config-sukka": "^5.1.2",
-    "eslint-formatter-sukka": "^5.1.2",
-    "memfs": "^4.8.1",
-    "mini-css-extract-plugin": "^2.8.1",
-    "mocha": "^10.4.0",
-    "mocha-chai-jest-snapshot": "^1.1.4",
-    "next": "^14.1.4",
-    "postcss": "^8.4.38",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.14.0",
+    "@types/loader-utils": "^3.0.0",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.18.1",
+    "browserslist": "^4.25.4",
+    "bumpp": "^10.2.3",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.34.0",
+    "eslint-config-sukka": "^6.23.1",
+    "eslint-formatter-sukka": "^6.23.1",
+    "expect": "^30.1.2",
+    "memfs": "^4.38.2",
+    "mini-css-extract-plugin": "^2.9.4",
+    "mocha": "^11.7.2",
+    "mocha-expect-snapshot": "^8.0.0",
+    "next": "^15.5.2",
+    "postcss": "^8.5.6",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.50.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-swc3": "^0.11.0",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-swc3": "^0.12.1",
     "swc-loader": "^0.2.6",
-    "typescript": "^5.4.4",
-    "webpack": "^5.91.0"
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3"
   },
   "peerDependencies": {
-    "@stylexjs/stylex": "*"
+    "@stylexjs/babel-plugin": "*"
   },
-  "overrides": {
-    "chai": "$chai"
+  "packageManager": "pnpm@10.15.1",
+  "pnpm": {
+    "overrides": {
+      "eslint>chalk": "npm:picocolors@^1.1.1"
+    }
   }
 }

package/dist/stylex-virtual-css-loader.js

@@ -1,36 +0,0 @@
-'use strict';
-
-var loaderUtils = require('loader-utils');
-
-// prefer loader-utils over self-implemented hash function to utilize caching + bulk hashing
-function stylexVirtualCssLoader(inputCode, inputSourceMap) {
-    const callback = this.async();
-    const data = new URLSearchParams(this.resourceQuery.slice(1));
-    try {
-        const stylex = data.get('stylex');
-        if (stylex == null) {
-            callback(null, inputCode, inputSourceMap);
-            return;
-        }
-        // If we got stylex in the virtual css import, we need to disable the cache
-        // to fix HMR and Next.js navigation
-        // TODO: find a better way to mark the generated chunk as uncacheable instead
-        // of disable caching the result of this loader
-        this.cacheable(false);
-        // @ts-expect-error -- getHashDigest supports string & xxhash64
-        const hash = loaderUtils.getHashDigest(stylex, 'xxhash64', 'base62', 32);
-        const css = `
-    /*
-     * dummy css generated by stylex-webpack
-     * real css will be injected later directly to the module
-     *
-     * stylex rules: ${stylex}
-     */
-    .__stylex_dummy_${hash} {}`;
-        callback(null, css);
-    } catch (e) {
-        callback(e);
-    }
-}
-
-module.exports = stylexVirtualCssLoader;

package/dist/stylex.virtual.css

@@ -1,7 +0,0 @@
-/*
- * This is a noop file for extracted CSS source to point to, as webpack
- * requires a file to exist on disk for virtual source files
- *
- * The filename "virtual.stylexrules" is intensionally chose to be not
- * matched by any other loaders
- */

package/next.d.ts

@@ -1 +0,0 @@
-export * from './dist/next';

package/next.js

@@ -1,5 +0,0 @@
-'use strict';
-
-/** @type {import('./dist/next')} */
-const next = require('./dist/next');
-module.exports = next;