@stylexswc/webpack-plugin 0.4.4 → 0.5.0-rc.2

package/README.md

@@ -36,8 +36,13 @@ const config = (env, argv) => ({
   },
   plugins: [
     new StylexPlugin({
-      filename: 'styles.[contenthash].css',
-      dev: argv.mode === 'development',
+      // ... Other StyleX options
+      transformCss: css => {
+        // Transform CSS here, for example, using PostCSS
+        const transformedCSS = css;
+
+        return transformedCSS;
+      },
     }),
   ],
   cache: true,
@@ -47,9 +52,78 @@ module.exports = config;
 ```
 
 ## Plugin Options
-The options are similar like `@stylexjs/babel-plugin` and can be found [here](https://stylexjs.com/docs/api/configuration/babel-plugin/)
+
+### Basic Options
+
+#### `rsOptions`
+
+* Type: `Partial<StyleXOptions>`
+* Optional
+* Description: StyleX compiler options that will be passed to the NAPI-RS
+  compiler. See
+  [StyleX configuration docs](https://stylexjs.com/docs/api/configuration/babel-plugin/)
+  for details.
+
+#### `stylexImports`
+
+* Type: `Array<string | { as: string, from: string }>`
+* Default: `['stylex', '@stylexjs/stylex']`
+* Description: Specifies where StyleX will be imported from. Supports both
+  string paths and import aliases.
+
+#### `useCSSLayers`
+
+* Type: `boolean`
+* Default: `false`
+* Description: Enables CSS cascade layers support for better style isolation.
+
+#### `nextjsMode`
+
+* Type: `boolean`
+* Default: `false`
+* Description: Enables Next.js-specific optimizations and compatibility
+  features.
+
+### Advanced Options
+
+#### `transformCss`
+
+* Type: `(css: string) => string | Buffer | Promise<string | Buffer>`
+* Optional
+* Description: Custom CSS transformation function. Since the plugin injects CSS
+  after all loaders, use this to apply PostCSS or other CSS transformations.
+
+### Example Configuration
+
+```javascript
+const StylexPlugin = require('@stylexswc/webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new StylexPlugin({
+      rsOptions: {
+        dev: process.env.NODE_ENV !== 'production',
+        useRemForFontSize: true,
+      },
+      stylexImports: ['@stylexjs/stylex', { from: './theme', as: 'tokens' }],
+      useCSSLayers: true,
+      nextjsMode: false,
+      transformCss: async css => {
+        const postcss = require('postcss');
+        const result = await postcss([require('autoprefixer')]).process(css);
+        return result.css;
+      },
+    }),
+  ],
+};
+```
 
 ## Documentation
 
 * [StyleX Documentation](https://stylexjs.com)
 * [NAPI-RS compiler for StyleX](https://github.com/Dwlad90/stylex-swc-plugin/tree/develop/crates/stylex-rs-compiler)
+
+## Acknowledgments
+
+This plugin was inspired by
+[`stylex-webpack`](https://github.com/SukkaW/stylex-webpack).

package/dist/constants.d.ts

@@ -1,4 +1,7 @@
-import type { LoaderContext } from 'webpack';
 export declare const PLUGIN_NAME = "stylex";
-export type SupplementedLoaderContext<Options = unknown> = LoaderContext<Options> & {};
+export declare const VIRTUAL_CSS_PATH: string;
+export declare const VIRTUAL_CSS_PATTERN: RegExp;
+export declare const STYLEX_CHUNK_NAME = "_stylex-webpack-generated";
+export declare const INCLUDE_REGEXP: RegExp;
+export declare const IS_DEV_ENV: boolean;
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,WAAW,WAAW,CAAC;AAEpC,MAAM,MAAM,yBAAyB,CAAC,OAAO,GAAG,OAAO,IAAI,aAAa,CAAC,OAAO,CAAC,GAAG,EAEnF,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,WAAW,CAAC;AACpC,eAAO,MAAM,gBAAgB,QAA0C,CAAC;AACxE,eAAO,MAAM,mBAAmB,QAAyB,CAAC;AAC1D,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAC7D,eAAO,MAAM,cAAc,QAAoB,CAAC;AAChD,eAAO,MAAM,UAAU,SAAyC,CAAC"}

package/dist/constants.js

@@ -1,4 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PLUGIN_NAME = void 0;
+exports.IS_DEV_ENV = exports.INCLUDE_REGEXP = exports.STYLEX_CHUNK_NAME = exports.VIRTUAL_CSS_PATTERN = exports.VIRTUAL_CSS_PATH = exports.PLUGIN_NAME = void 0;
 exports.PLUGIN_NAME = 'stylex';
+exports.VIRTUAL_CSS_PATH = require.resolve('./stylex.virtual.css');
+exports.VIRTUAL_CSS_PATTERN = /stylex\.virtual\.css/;
+exports.STYLEX_CHUNK_NAME = '_stylex-webpack-generated';
+exports.INCLUDE_REGEXP = /\.[cm]?[jt]sx?$/;
+exports.IS_DEV_ENV = process.env.NODE_ENV === 'development';

package/dist/index.d.ts

@@ -1,2 +1,16 @@
-export {};
+import { VIRTUAL_CSS_PATTERN } from './constants';
+import type webpack from 'webpack';
+import type { Rule as StyleXRule } from '@stylexjs/babel-plugin';
+import type { CSSTransformer, StyleXPluginOption, StyleXWebpackLoaderOptions } from './types';
+export type RegisterStyleXRules = (resourcePath: string, stylexRules: StyleXRule[]) => void;
+export default class StyleXPlugin {
+    stylexRules: Map<string, readonly StyleXRule[]>;
+    useCSSLayers: boolean;
+    loaderOption: StyleXWebpackLoaderOptions;
+    transformCss: CSSTransformer;
+    constructor({ stylexImports, useCSSLayers, rsOptions, nextjsMode, transformCss, transformer, }?: StyleXPluginOption);
+    apply(compiler: webpack.Compiler): void;
+}
+export { VIRTUAL_CSS_PATTERN };
+export type { StyleXPluginOption } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAML,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,0BAA0B,EAE3B,MAAM,SAAS,CAAC;AAkBjB,MAAM,MAAM,mBAAmB,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;AAE5F,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,WAAW,qCAA4C;IACvD,YAAY,EAAE,OAAO,CAAC;IAEtB,YAAY,EAAE,0BAA0B,CAAC;IAEzC,YAAY,EAAE,cAAc,CAAC;gBAEjB,EACV,aAA8C,EAC9C,YAAoB,EACpB,SAAc,EACd,UAAkB,EAClB,YAAgC,EAChC,WAA2B,GAC5B,GAAE,kBAAuB;IAmB1B,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CA2JjC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -3,154 +3,161 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = __importDefault(require("path"));
+exports.VIRTUAL_CSS_PATTERN = void 0;
 const babel_plugin_1 = __importDefault(require("@stylexjs/babel-plugin"));
-const rs_compiler_1 = require("@stylexswc/rs-compiler");
-const webpack_1 = __importDefault(require("webpack"));
-const { NormalModule, Compilation } = webpack_1.default;
-const PLUGIN_NAME = 'stylex';
-const IS_DEV_ENV = process.env.NODE_ENV === 'development';
-const { RawSource, ConcatSource } = webpack_1.default.sources;
-class StylexPlugin {
-    filesInLastRun = null;
-    filePath = null;
-    dev;
-    appendTo;
-    filename;
-    stylexImports;
+const path_1 = __importDefault(require("path"));
+const constants_1 = require("./constants");
+Object.defineProperty(exports, "VIRTUAL_CSS_PATTERN", { enumerable: true, get: function () { return constants_1.VIRTUAL_CSS_PATTERN; } });
+const stylexLoaderPath = require.resolve('./stylex-loader');
+const stylexVirtualLoaderPath = require.resolve('./stylex-virtual-css-loader');
+const 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 babel_plugin_1.default.processStylexRules(allRules, useCSSLayers);
+};
+const identityTransfrom = css => css;
+class StyleXPlugin {
+    stylexRules = new Map();
     useCSSLayers;
-    rsOptions;
-    stylexRules = {};
-    constructor({ dev = IS_DEV_ENV, appendTo, filename = appendTo == null ? 'stylex.css' : undefined, stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, } = {}) {
-        this.dev = dev;
-        this.appendTo = appendTo;
-        this.filename = filename;
-        this.stylexImports = stylexImports;
+    loaderOption;
+    transformCss;
+    constructor({ stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, nextjsMode = false, transformCss = identityTransfrom, transformer = 'rs-compiler', } = {}) {
         this.useCSSLayers = useCSSLayers;
-        this.rsOptions = rsOptions;
+        this.loaderOption = {
+            stylexImports,
+            rsOptions: {
+                dev: constants_1.IS_DEV_ENV,
+                useRemForFontSize: true,
+                runtimeInjection: false,
+                genConditionalClasses: true,
+                treeshakeCompensation: true,
+                importSources: stylexImports,
+                ...rsOptions,
+            },
+            nextjsMode,
+            transformer,
+        };
+        this.transformCss = transformCss;
     }
     apply(compiler) {
-        compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
+        // If splitChunk is enabled, we create a dedicated chunk for stylex css
+        if (!compiler.options.optimization.splitChunks) {
+            throw new Error([
+                'You don\'t have "optimization.splitChunks" enabled.',
+                '"optimization.splitChunks" should be enabled for "@stylexswc/webpack-plugin" to function properly.',
+            ].join(' '));
+        }
+        compiler.options.optimization.splitChunks.cacheGroups ??= {};
+        compiler.options.optimization.splitChunks.cacheGroups[constants_1.STYLEX_CHUNK_NAME] = {
+            name: constants_1.STYLEX_CHUNK_NAME,
+            test: constants_1.VIRTUAL_CSS_PATTERN,
+            type: 'css/mini-extract',
+            chunks: 'all',
+            enforce: true,
+        };
+        // stylex-loader adds virtual css import (which triggers virtual-loader)
+        // This prevents "stylex.virtual.css" files from being tree shaken by forcing
+        // "sideEffects" setting.
+        compiler.hooks.normalModuleFactory.tap(constants_1.PLUGIN_NAME, nmf => {
+            nmf.hooks.createModule.tap(constants_1.PLUGIN_NAME, createData => {
+                const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
+                if (modPath === constants_1.VIRTUAL_CSS_PATH) {
+                    createData.settings ??= {};
+                    createData.settings.sideEffects = true;
+                }
+            });
+        });
+        const { Compilation, NormalModule, sources } = compiler.webpack;
+        const { RawSource, ConcatSource } = sources;
+        compiler.hooks.make.tap(constants_1.PLUGIN_NAME, compilation => {
             // Apply loader to JS modules.
-            NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => {
-                if (
-                // .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts
-                /\.[mc]?[jt]sx?$/.test(path_1.default.extname(module.resource))) {
-                    // It might make sense to use .push() here instead of .unshift()
-                    // Webpack usually runs loaders in reverse order and we want to ideally run
-                    // our loader before anything else.
-                    module.loaders.unshift({
-                        loader: path_1.default.resolve(__dirname, 'loader.js'),
-                        options: { stylexPlugin: this },
+            NormalModule.getCompilationHooks(compilation).loader.tap(constants_1.PLUGIN_NAME, (loaderContext, mod) => {
+                const extname = path_1.default.extname(mod.matchResource || mod.resource);
+                if (constants_1.INCLUDE_REGEXP.test(extname)) {
+                    loaderContext.StyleXWebpackContextKey = {
+                        registerStyleXRules: (resourcePath, stylexRules) => {
+                            this.stylexRules.set(resourcePath, stylexRules);
+                        },
+                    };
+                    // We use .unshift() and not .push() like original webpack plugin
+                    // because we want to transpile theme imports first,
+                    // else it will be unused imports, that will be removed by tree shaking,
+                    // and to run other transformations first, e.g. custom SWC plugins.
+                    mod.loaders.unshift({
+                        loader: stylexLoaderPath,
+                        options: this.loaderOption,
+                        ident: null,
+                        type: null,
+                    });
+                }
+                if (constants_1.VIRTUAL_CSS_PATTERN.test(mod.matchResource || mod.resource)) {
+                    mod.loaders.push({
+                        loader: stylexVirtualLoaderPath,
+                        options: {},
                         ident: null,
                         type: null,
                     });
                 }
             });
-            // Make a list of all modules that were included in the last compilation.
-            // This might need to be tweaked if not all files are included after a change
-            compilation.hooks.finishModules.tap(PLUGIN_NAME, modules => {
-                this.filesInLastRun = [...modules.values()].map(m => m.resource);
-            });
-            const getStyleXRules = () => {
-                const { stylexRules } = this;
-                if (Object.keys(stylexRules).length === 0) {
-                    return null;
+            compilation.hooks.processAssets.tapPromise({
+                name: constants_1.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
+                const stylexChunk = compilation.namedChunks.get(constants_1.STYLEX_CHUNK_NAME);
+                if (stylexChunk == null) {
+                    return;
                 }
-                // Take styles for the modules that were included in the last compilation.
-                const allRules = Object.keys(stylexRules)
-                    .filter(filename => this.filesInLastRun == null ? true : this.filesInLastRun.includes(filename))
-                    .map(filename => stylexRules[filename])
-                    .flat()
-                    .filter(Boolean);
-                return babel_plugin_1.default.processStylexRules(allRules, this.useCSSLayers);
-            };
-            if (this.appendTo) {
-                compilation.hooks.processAssets.tap({
-                    name: PLUGIN_NAME,
-                    stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS, // see below for more stages
-                }, assets => {
-                    const cssFileName = Object.keys(assets).find(typeof this.appendTo === 'function'
-                        ? this.appendTo
-                        : filename => filename.endsWith(this.appendTo));
-                    if (cssFileName) {
-                        const cssAsset = assets[cssFileName];
-                        const stylexCSS = getStyleXRules();
-                        if (stylexCSS != null && cssAsset) {
-                            assets[cssFileName] = new ConcatSource(cssAsset, new RawSource(stylexCSS));
+                // Collect stylex rules from module instead of self maintained map
+                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));
+                            }
                         }
                     }
-                });
-            }
-            else {
-                // We'll emit an asset ourselves. This comes with some complications in from Webpack.
-                // If the filename contains replacement tokens, like [contenthash], we need to
-                // process those tokens ourselves. Webpack does provide a way to reuse the configured
-                // hashing functions. We'll take advantage of that to process tokens.
-                const getContentHash = (source) => {
-                    const { outputOptions } = compilation;
-                    const { hashDigest, hashDigestLength, hashFunction, hashSalt } = outputOptions;
-                    if (!hashFunction) {
-                        throw new Error('webpack output options must have a hashFunction');
-                    }
-                    const hash = compiler.webpack.util.createHash(hashFunction);
-                    if (hashSalt) {
-                        hash.update(hashSalt);
-                    }
-                    hash.update(source);
-                    const fullContentHash = hash.digest(hashDigest);
-                    return fullContentHash.toString().slice(0, hashDigestLength);
-                };
-                // Consume collected rules and emit the stylex CSS asset
-                compilation.hooks.processAssets.tap({
-                    name: PLUGIN_NAME,
-                    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
-                }, () => {
-                    try {
-                        const collectedCSS = getStyleXRules();
-                        if (collectedCSS && this.filename) {
-                            // build up a content hash for the rules using webpack's configured hashing functions
-                            const contentHash = getContentHash(collectedCSS);
-                            // pretend to be a chunk so we can reuse the webpack routine to process the filename and do token replacement
-                            // see https://github.com/webpack/webpack/blob/main/lib/Compilation.js#L4733
-                            // see https://github.com/webpack/webpack/blob/main/lib/TemplatedPathPlugin.js#L102
-                            const data = {
-                                filename: this.filename,
-                                contentHash: contentHash,
-                                chunk: {
-                                    id: this.filename,
-                                    name: path_1.default.parse(this.filename).name,
-                                    hash: contentHash,
-                                },
-                            };
-                            const { path: hashedPath, info: assetsInfo } = compilation.getPathWithInfo(data.filename, data);
-                            compilation.emitAsset(hashedPath, new RawSource(collectedCSS), assetsInfo);
-                        }
-                    }
-                    catch (e) {
-                        compilation.errors.push(e);
-                    }
-                });
-            }
+                }
+                // 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);
+                const cssAsset = stylexAsset?.[0];
+                if (cssAsset) {
+                    compilation.updateAsset(cssAsset, source => new ConcatSource(source, new RawSource(finalCss)));
+                }
+            });
         });
     }
-    // This function is not called by Webpack directly.
-    // Instead, `NormalModule.getCompilationHooks` is used to inject a loader
-    // for JS modules. The loader than calls this function.
-    async transformCode(inputCode, filename, logger) {
-        if (this.stylexImports.some(importName => inputCode.includes(importName))) {
-            const originalSource = inputCode;
-            let result = (0, rs_compiler_1.transform)(filename, originalSource, this.rsOptions);
-            const metadata = result?.metadata;
-            const code = result.code;
-            const map = result.map;
-            if (metadata.stylex != null && metadata.stylex.length > 0) {
-                this.stylexRules[filename] = metadata.stylex;
-                logger.debug(`Read stylex styles from ${filename}:`, metadata.stylex);
-            }
-            return { code, map };
-        }
-        return { code: inputCode };
-    }
 }
-module.exports = StylexPlugin;
+exports.default = StyleXPlugin;
+module.exports = StyleXPlugin;
+module.exports.default = StyleXPlugin;
+module.exports.VIRTUAL_CSS_PATTERN = constants_1.VIRTUAL_CSS_PATTERN;

package/dist/stylex-loader.d.ts

@@ -0,0 +1,3 @@
+import type { InputCode, SourceMap, StyleXWebpackLoaderOptions, SupplementedLoaderContext } from './types';
+export default function stylexLoader(this: SupplementedLoaderContext<StyleXWebpackLoaderOptions>, inputCode: InputCode, inputSourceMap: SourceMap): Promise<void>;
+//# sourceMappingURL=stylex-loader.d.ts.map

package/dist/stylex-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylex-loader.d.ts","sourceRoot":"","sources":["../src/stylex-loader.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAEjB,wBAA8B,YAAY,CACxC,IAAI,EAAE,yBAAyB,CAAC,0BAA0B,CAAC,EAC3D,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,SAAS,iBA8F1B"}

package/dist/stylex-loader.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = stylexLoader;
+const constants_1 = require("./constants");
+const loader_utils_1 = __importDefault(require("loader-utils"));
+const utils_1 = require("./utils");
+async function stylexLoader(inputCode, inputSourceMap) {
+    const callback = this.async();
+    const { stylexImports, rsOptions, nextjsMode, transformer } = this.getOptions();
+    const logger = this._compiler?.getInfrastructureLogger(constants_1.PLUGIN_NAME);
+    if (!inputCode) {
+        if (!this.resourcePath.includes('empty')) {
+            logger?.warn(`@stylexswc/webpack-plugin: inputCode is empty for resource ${this.resourcePath}`);
+        }
+        return callback(null, inputCode, inputSourceMap);
+    }
+    const stringifiedInputCode = typeof inputCode === 'string' ? inputCode : inputCode.toString();
+    // bail out early if the input doesn't contain stylex imports
+    if (!stylexImports?.some(importName => typeof importName === 'string'
+        ? stringifiedInputCode.includes(importName)
+        : stringifiedInputCode.includes(importName.as) ||
+            stringifiedInputCode.includes(importName.from))) {
+        return callback(null, stringifiedInputCode, inputSourceMap);
+    }
+    if (!(0, utils_1.isSupplementedLoaderContext)(this)) {
+        return callback(new Error('stylex-loader: loader context is not SupplementedLoaderContext!'));
+    }
+    try {
+        const { code, map, metadata } = (0, utils_1.generateStyleXOutput)(this.resourcePath, stringifiedInputCode, rsOptions, transformer);
+        // If metadata.stylex doesn't exist at all, we only need to return the transformed code
+        if (!metadata ||
+            !('stylex' in metadata) ||
+            metadata.stylex == null ||
+            !metadata.stylex.length) {
+            logger?.debug(`No stylex styles generated from ${this.resourcePath}`);
+            return callback(null, code ?? undefined, map ?? undefined);
+        }
+        logger?.debug(`Read stylex styles from ${this.resourcePath}:`, metadata.stylex);
+        this.StyleXWebpackContextKey.registerStyleXRules(this.resourcePath, metadata.stylex);
+        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 = loader_utils_1.default.interpolateName(this, '[path][name].[hash:base64:8].stylex.virtual.css', { content: serializedStyleXRules });
+            const virtualCssRequest = (0, utils_1.stringifyRequest)(this, `${virtualFileName}!=!${constants_1.VIRTUAL_CSS_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 = (0, utils_1.stringifyRequest)(this, `${constants_1.VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
+        const postfix = `\nimport ${virtualCssRequest};`;
+        return callback(null, code + postfix, map ?? undefined);
+    }
+    catch (error) {
+        return callback(error);
+    }
+}

package/dist/stylex-virtual-css-loader.d.ts

@@ -0,0 +1,4 @@
+import type webpack from 'webpack';
+import { InputCode, SourceMap } from './types';
+export default function (this: webpack.LoaderContext<unknown>, inputCode: InputCode, inputSourceMap?: SourceMap): void;
+//# sourceMappingURL=stylex-virtual-css-loader.d.ts.map

package/dist/stylex-virtual-css-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylex-virtual-css-loader.d.ts","sourceRoot":"","sources":["../src/stylex-virtual-css-loader.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,CAAC,OAAO,WACZ,IAAI,EAAE,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,EACpC,SAAS,EAAE,SAAS,EACpB,cAAc,CAAC,EAAE,SAAS,QA6C3B"}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const loader_utils_1 = require("loader-utils");
+function default_1(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;
+        }
+        const isProd = this._compiler?.options.mode === 'production';
+        // If we got stylex in the virtual css import, we need to disable the cache
+        // to fix HMR and Next.js navigation
+        this.cacheable(isProd);
+        if (isProd) {
+            // In production, we don't need to generate dummy css
+            return callback(null, '');
+        }
+        // @ts-expect-error - since v3 getHashDigest supports xxhash64
+        // https://github.com/webpack/loader-utils?tab=readme-ov-file#interpolatename
+        const hash = (0, loader_utils_1.getHashDigest)(Buffer.from(stylex), 'xxhash64', 'base62', 32);
+        const css = `
+    /*
+     * Temporary CSS placeholder - @stylexswc/webpack-plugin
+     * This will be replaced with actual CSS during asset injection
+     *
+     * StyleX Bundle ID: ${hash}
+     * Generated Rules:
+     * ${JSON.stringify(JSON.parse(stylex), null, 4)}
+     *
+     * Note: This content is for development reference only
+     */
+    `;
+        callback(null, css);
+    }
+    catch (e) {
+        callback(e);
+    }
+}

package/dist/stylex.virtual.css

@@ -0,0 +1,9 @@
+/*
+ * Virtual placeholder file for StyleX CSS extraction
+ *
+ * Webpack requires physical files on disk for virtual sources.
+ * This empty file serves as the target for extracted CSS.
+ *
+ * Note: Filename "stylex.virtual.css" is intentionally chosen
+ * to avoid conflicts with other loaders.
+ */

package/dist/types.d.ts

@@ -0,0 +1,67 @@
+import type { StyleXOptions } from '@stylexswc/rs-compiler';
+import type { LoaderContext } from 'webpack';
+import type webpack from 'webpack';
+import type { RegisterStyleXRules } from '.';
+type AsyncFnParams = Parameters<ReturnType<LoaderContext<unknown>['async']>>;
+export type InputCode = AsyncFnParams['1'];
+export type SourceMap = AsyncFnParams['2'];
+export type CSSTransformer = (css: string) => string | Buffer | Promise<string | Buffer>;
+export interface StyleXPluginOption extends Pick<StyleXWebpackLoaderOptions, 'transformer'> {
+    /**
+     * stylex options passed to stylex babel plugin
+     *
+     * @see https://stylexjs.com/docs/api/configuration/babel-plugin/
+     */
+    rsOptions?: Partial<StyleXOptions>;
+    /**
+     * Specify where stylex will be imported from
+     *
+     * @default ['stylex', '@stylexjs/stylex']
+     */
+    stylexImports?: StyleXOptions['importSources'];
+    /**
+     * Whether to use CSS layers
+     *
+     * @default false
+     */
+    useCSSLayers?: boolean;
+    /**
+     * Next.js Mode
+     *
+     * @default false
+     */
+    nextjsMode?: boolean;
+    /**
+     * Enable other CSS transformation
+     *
+     * Since @stylexswc/webpack-plugin only inject CSS after all loaders, you can not use postcss-loader.
+     * With this you can incovate `postcss()` here.
+     */
+    transformCss?: CSSTransformer;
+}
+export type StyleXWebpackLoaderOptions = {
+    stylexImports: StyleXOptions['importSources'];
+    rsOptions: Partial<StyleXOptions>;
+    nextjsMode: boolean;
+    /**
+     * Specify the transformer to transform StyleX code
+     *
+     * @default 'rs-compiler'
+     */
+    transformer?: 'rs-compiler' | 'swc';
+};
+export type SupplementedLoaderContext<Options = unknown> = webpack.LoaderContext<Options> & {
+    StyleXWebpackContextKey: {
+        registerStyleXRules: RegisterStyleXRules;
+    };
+};
+export type SWCPluginRule = {
+    class_name: string;
+    style: {
+        ltr: string;
+        rtl?: null | string;
+    };
+    priority: number;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,GAAG,CAAC;AAE7C,KAAK,aAAa,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AACzF,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,aAAa,CAAC;IACzF;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG;IAC1F,uBAAuB,EAAE;QACvB,mBAAmB,EAAE,mBAAmB,CAAC;KAC1C,CAAC;CACH,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+import stylexPlugin from '@stylexswc/rs-compiler';
+import type webpack from 'webpack';
+import type { StyleXWebpackLoaderOptions, SupplementedLoaderContext } from './types';
+import type { StyleXTransformResult } from '@stylexswc/rs-compiler';
+export declare function stringifyRequest(loaderContext: webpack.LoaderContext<unknown>, request: string): string;
+export declare const isSupplementedLoaderContext: <T>(context: webpack.LoaderContext<T>) => context is SupplementedLoaderContext<T>;
+export declare function generateStyleXOutput(resourcePath: string, inputSource: string, rsOptions: Partial<stylexPlugin.StyleXOptions>, transformer: StyleXWebpackLoaderOptions['transformer']): StyleXTransformResult;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AAEnC,OAAO,KAAK,EAAiB,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AACpG,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,UAI9F;AAED,eAAO,MAAM,2BAA2B,GAAI,CAAC,WAClC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,KAChC,OAAO,IAAI,yBAAyB,CAAC,CAAC,CAExC,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,EAC9C,WAAW,EAAE,0BAA0B,CAAC,aAAa,CAAC,GACrD,qBAAqB,CA4BvB"}

package/dist/utils.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSupplementedLoaderContext = void 0;
+exports.stringifyRequest = stringifyRequest;
+exports.generateStyleXOutput = generateStyleXOutput;
+const rs_compiler_1 = __importDefault(require("@stylexswc/rs-compiler"));
+function stringifyRequest(loaderContext, request) {
+    return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
+}
+const isSupplementedLoaderContext = (context) => {
+    return Object.prototype.hasOwnProperty.call(context, 'StyleXWebpackContextKey');
+};
+exports.isSupplementedLoaderContext = isSupplementedLoaderContext;
+function generateStyleXOutput(resourcePath, inputSource, rsOptions, transformer) {
+    if (transformer === 'swc') {
+        const metadata = { stylex: [] };
+        let metadataStr = '[]';
+        const code = inputSource.replace(/\/\/*__stylex_metadata_start__(?<metadata>.+)__stylex_metadata_end__/, (...args) => {
+            metadataStr = args.at(-1)?.metadata.split('"__stylex_metadata_end__')[0];
+            return '';
+        });
+        try {
+            metadata.stylex = JSON.parse(metadataStr)?.map((rule) => [rule.class_name, rule.style, rule.priority]);
+        }
+        catch (e) {
+            console.error('Error parsing StylexX metadata', e);
+        }
+        const map = undefined;
+        return { code, map, metadata };
+    }
+    return rs_compiler_1.default.transform(resourcePath, inputSource, rsOptions);
+}

package/package.json

@@ -1,22 +1,25 @@
 {
   "name": "@stylexswc/webpack-plugin",
   "description": "Stylex webpack plugin with NAPI-RS compiler",
-  "version": "0.4.4",
+  "version": "0.5.0-rc.2",
   "config": {
     "scripty": {
       "path": "../../scripts/packages"
     }
   },
   "dependencies": {
-    "@stylexjs/babel-plugin": "^0.9.3"
+    "@stylexjs/babel-plugin": "^0.9.3",
+    "loader-utils": "^3.3.1"
   },
   "devDependencies": {
     "@babel/types": "^7.23.9",
-    "@stylexswc/eslint-config": "0.4.4",
-    "@stylexswc/rs-compiler": "0.4.4",
-    "@stylexswc/typescript-config": "0.4.4",
+    "@stylexswc/eslint-config": "0.5.0-rc.2",
+    "@stylexswc/rs-compiler": "0.5.0-rc.2",
+    "@stylexswc/typescript-config": "0.5.0-rc.2",
     "@types/babel__core": "^7.20.5",
+    "@types/loader-utils": "^2.0.6",
     "@types/node": "^22.5.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "webpack": "^5.94.0"
   },
   "files": [

package/dist/loader.d.ts

@@ -1,16 +0,0 @@
-import type * as webpack from 'webpack';
-import { type SupplementedLoaderContext } from './constants';
-export type WebpackLoaderOptions = {
-    /**
-     * Please never use this feature, it will be removed without further notice.
-     */
-    stylexPlugin?: {
-        transformCode: (code: string, filePath: string, logger?: ReturnType<webpack.Compiler['getInfrastructureLogger']>) => Promise<{
-            code: string;
-            map: string;
-        }>;
-    };
-};
-declare function stylexLoader(this: SupplementedLoaderContext<WebpackLoaderOptions>, inputCode: string): void;
-export default stylexLoader;
-//# sourceMappingURL=loader.d.ts.map

package/dist/loader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,CAAC;AAExC,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE;QACb,aAAa,EAAE,CACb,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC,KAC7D,OAAO,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC7C,CAAC;CACH,CAAC;AAIF,iBAAS,YAAY,CAAC,IAAI,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,EAAE,SAAS,EAAE,MAAM,QAa7F;AAED,eAAe,YAAY,CAAC"}

package/dist/loader.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const constants_1 = require("./constants");
-function stylexLoader(inputCode) {
-    const callback = this.async();
-    const { stylexPlugin } = this.getOptions();
-    const logger = this._compiler?.getInfrastructureLogger(constants_1.PLUGIN_NAME);
-    stylexPlugin?.transformCode(inputCode, this.resourcePath, logger).then(({ code, map }) => {
-        callback(null, code, map);
-    }, (error) => {
-        callback(error);
-    });
-}
-exports.default = stylexLoader;
-module.exports = stylexLoader;