stylex-webpack 0.4.1 → 0.4.3

package/dist/index.d.ts

@@ -6,6 +6,7 @@ interface StyleXLoaderOptions {
     stylexImports: string[];
     stylexOption: Partial<Options>;
     nextjsMode: boolean;
+    nextjsAppRouterMode: boolean;
 }
 
 type CSSTransformer = (css: string) => string | Buffer | Promise<string | Buffer>;
@@ -34,6 +35,12 @@ interface StyleXPluginOption {
      * @default false
      */
     nextjsMode?: boolean;
+    /**
+     * Next.js App Router Mode
+     *
+     * @default false
+     */
+    nextjsAppRouterMode?: boolean;
     /**
      * Enable other CSS transformation
      *
@@ -49,7 +56,7 @@ declare class StyleXPlugin {
     loaderOption: StyleXLoaderOptions;
     transformCss: CSSTransformer;
     private readonly _virtualModuleInstance;
-    constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode, transformCss }?: StyleXPluginOption);
+    constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode, nextjsAppRouterMode, transformCss }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }
 

package/dist/index.js

@@ -6,7 +6,7 @@ var process = require('node:process');
 var VirtualModulesPlugin = require('webpack-virtual-modules');
 var identity = require('foxts/identity');
 
-var version = "0.4.1";
+var version = "0.4.3";
 
 const PLUGIN_NAME = 'stylex';
 const VIRTUAL_ENTRYPOINT_CSS_PATH = require.resolve('./stylex.css');
@@ -150,6 +150,13 @@ class StyleXPlugin {
                                 }
                             }
                         }
+                        // 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);
+                            }
+                        }
                     }
                 }
                 const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
@@ -157,7 +164,7 @@ class StyleXPlugin {
                     return;
                 }
                 const finalCss = await this.transformCss(stylexCSS);
-                if (compiler.options.mode === 'development') {
+                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
@@ -165,12 +172,6 @@ class StyleXPlugin {
              */ this._virtualModuleInstance.writeModule(VIRTUAL_ENTRYPOINT_CSS_PATH, finalCss.toString());
                 } else {
                     const stylexChunk = compilation.namedChunks.get(STYLEX_CHUNK_NAME);
-                    console.log({
-                        rulesFrom: Array.from(this.stylexRules.keys()),
-                        mode: compiler.options.mode,
-                        stylexChunk,
-                        asssets: Object.keys(assets)
-                    });
                     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'));
@@ -181,10 +182,6 @@ class StyleXPlugin {
                         console.warn('[stylex-webpack] Multiple CSS assets found for the stylex chunk. This should not happen. Please report this issue.');
                     }
                     const stylexAssetName = stylexChunkCssAssetNames[0];
-                    console.log({
-                        finalCss,
-                        stylexAssetName
-                    });
                     compilation.updateAsset(stylexAssetName, ()=>new RawSource(finalCss), {
                         minimized: false
                     });
@@ -195,7 +192,7 @@ class StyleXPlugin {
     constructor({ stylexImports = [
         'stylex',
         '@stylexjs/stylex'
-    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false, transformCss = identity.identity } = {}){
+    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false, nextjsAppRouterMode = false, transformCss = identity.identity } = {}){
         _define_property(this, "stylexRules", new Map());
         _define_property(this, "useCSSLayers", void 0);
         _define_property(this, "loaderOption", void 0);
@@ -213,7 +210,8 @@ class StyleXPlugin {
                 importSources: stylexImports,
                 ...stylexOption
             },
-            nextjsMode
+            nextjsMode,
+            nextjsAppRouterMode
         };
         this.transformCss = transformCss;
     }

package/dist/next.js

@@ -138,13 +138,13 @@ function withStyleX(pluginOptions) {
                     }));
                 }
                 config.plugins.push(new index.StyleXPlugin({
+                    nextjsMode: true,
+                    nextjsAppRouterMode: true,
                     ...pluginOptions,
                     stylexOption: {
                         ...pluginOptions?.stylexOption,
                         dev: ctx.dev
                     },
-                    // Enforce nextjsMode to true
-                    nextjsMode: true,
                     async transformCss (css) {
                         const { postcssWithPlugins } = await postcss();
                         const result = await postcssWithPlugins.process(css);

package/dist/stylex-loader.js

@@ -17,7 +17,7 @@ function stringifyRequest(loaderContext, request) {
 const PLUGIN_NAME = 'stylex';
 async function stylexLoader(inputCode, inputSourceMap) {
     const callback = this.async();
-    const { stylexImports, stylexOption, nextjsMode } = this.getOptions();
+    const { stylexImports, stylexOption, nextjsMode, nextjsAppRouterMode } = 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);
@@ -54,7 +54,8 @@ async function stylexLoader(inputCode, inputSourceMap) {
         // 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);
-        if (nextjsMode) {
+        // 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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {
@@ -49,39 +49,39 @@
   "author": "Sukka <https://skk.moe>",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-syntax-jsx": "^7.27.1",
     "@babel/plugin-syntax-typescript": "^7.27.1",
     "@types/webpack": "^5.28.5",
-    "foxts": "^3.12.0",
+    "foxts": "^3.13.0",
     "loader-utils": "^3.3.1",
     "ts-dedent": "^2.2.0",
     "webpack-virtual-modules": "^0.6.2"
   },
   "devDependencies": {
-    "@eslint-sukka/node": "^6.23.1",
+    "@eslint-sukka/node": "^7.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@swc-node/register": "^1.11.1",
     "@swc/core": "^1.13.5",
     "@types/babel__core": "^7.20.5",
     "@types/loader-utils": "^3.0.0",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^22.18.1",
-    "browserslist": "^4.25.4",
+    "@types/node": "^22.18.3",
+    "browserslist": "^4.26.0",
     "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",
+    "eslint": "^9.35.0",
+    "eslint-config-sukka": "^7.0.2",
+    "eslint-formatter-sukka": "^7.0.2",
     "expect": "^30.1.2",
-    "memfs": "^4.38.2",
+    "memfs": "^4.39.0",
     "mini-css-extract-plugin": "^2.9.4",
     "mocha": "^11.7.2",
     "mocha-expect-snapshot": "^8.0.0",
-    "next": "^15.5.2",
+    "next": "^15.5.3",
     "postcss": "^8.5.6",
     "rimraf": "^6.0.1",
-    "rollup": "^4.50.0",
+    "rollup": "^4.50.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-swc3": "^0.12.1",
@@ -92,10 +92,13 @@
   "peerDependencies": {
     "@stylexjs/babel-plugin": "*"
   },
-  "packageManager": "pnpm@10.15.1",
+  "packageManager": "pnpm@10.16.0",
   "pnpm": {
     "overrides": {
       "eslint>chalk": "npm:picocolors@^1.1.1"
-    }
+    },
+    "onlyBuiltDependencies": [
+      "oxc-resolver"
+    ]
   }
 }