stylex-webpack 0.2.1-beta.5 → 0.2.1-beta.7

package/dist/index.js

@@ -66,7 +66,7 @@ class StyleXPlugin {
             });
         });
         const { Compilation, NormalModule, sources } = compiler.webpack;
-        const { RawSource } = sources;
+        const { RawSource, ConcatSource } = sources;
         // Apply loader to JS modules
         compiler.hooks.make.tap(PLUGIN_NAME, (compilation)=>{
             NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, mod)=>{
@@ -119,12 +119,16 @@ class StyleXPlugin {
                             if (!stringifiedStylexRule) {
                                 continue;
                             }
-                            this.stylexRules.set(cssModule.identifier(), JSON.parse(decodeURIComponent(stringifiedStylexRule)));
+                            const params = new URLSearchParams(stringifiedStylexRule);
+                            const stylex = params.get('stylex');
+                            if (stylex != null) {
+                                this.stylexRules.set(cssModule.identifier(), JSON.parse(stylex));
+                            }
                         }
                     }
                 }
                 // Let's find the css file that belongs to the stylex chunk
-                const cssAssetDetails = Object.entries(assets).find(([assetName])=>stylexChunk.files.has(assetName));
+                const cssAssetDetails = Object.entries(assets).find(([assetName])=>stylexChunk.files.has(assetName) && assetName.includes(STYLEX_CHUNK_NAME));
                 if (!cssAssetDetails) {
                     return;
                 }
@@ -132,7 +136,8 @@ class StyleXPlugin {
                 if (stylexCSS == null) {
                     return;
                 }
-                compilation.updateAsset(cssAssetDetails[0], new RawSource(await this.transformCss(stylexCSS)));
+                const finalCss = await this.transformCss(stylexCSS);
+                compilation.updateAsset(cssAssetDetails[0], (source)=>new ConcatSource(source, new RawSource(finalCss)));
             });
         });
     }

package/dist/next.js

@@ -29,7 +29,7 @@ const getNextMiniCssExtractPlugin = (isDev)=>{
     if (isDev) {
         try {
             // Check if hotModuleReplacement exists
-            require('next/dist/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement');
+            require.resolve('next/dist/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement');
             return NextMiniCssExtractPlugin;
         } catch  {
             log.warn('Next.js built-in mini-css-extract-plugin is broken, will fallback to "mini-css-extract-plugin"');
@@ -51,7 +51,7 @@ function getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss) {
         loaders.push({
             loader: MiniCssExtractPlugin.loader,
             options: {
-                publicPath: `${ctx.assetPrefix}/_next/`,
+                publicPath: `${ctx.config.assetPrefix}/_next/`,
                 esModule: false
             }
         });

package/dist/stylex-loader.js

@@ -55,20 +55,24 @@ async function stylexLoader(inputCode, inputSourceMap) {
         // 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 = encodeURIComponent(JSON.stringify(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 = loaderUtils.interpolateName(this, '[path][name].[hash:base64:8].stylex.virtual.css', {
                 content: serializedStyleXRules
             });
-            const virtualCssRequest = stringifyRequest(this, `${virtualFileName}!=!${VIRTUAL_CSS_PATH}?${serializedStyleXRules}`);
+            const virtualCssRequest = stringifyRequest(this, `${virtualFileName}!=!${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 = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${serializedStyleXRules}`);
+        const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
         const postfix = `\nimport ${virtualCssRequest};`;
         return callback(null, code + postfix, map ?? undefined);
     } catch (error) {

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

@@ -3,18 +3,28 @@
 var loaderUtils = require('loader-utils');
 
 // prefer loader-utils over self-implemented hash function to utilize caching + bulk hashing
-function stylexVirtualCssLoader() {
+function stylexVirtualCssLoader(inputCode, inputSourceMap) {
     const callback = this.async();
-    const data = decodeURIComponent(this.resourceQuery.slice(1));
+    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(data, 'xxhash64', 'base62', 32);
+        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: ${data}
+     * stylex rules: ${stylex}
      */
     .__stylex_dummy_${hash} {}`;
         callback(null, css);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.2.1-beta.5",
+  "version": "0.2.1-beta.7",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {
@@ -38,43 +38,43 @@
   "author": "Sukka <https://skk.moe>",
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-syntax-jsx": "^7.23.3",
-    "@babel/plugin-syntax-typescript": "^7.23.3",
+    "@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"
   },
   "devDependencies": {
-    "@eslint-sukka/node": "^5.1.0",
-    "@eslint-sukka/ts": "^5.1.0",
-    "@swc-node/register": "^1.8.0",
-    "@swc/core": "^1.4.1",
+    "@eslint-sukka/node": "^5.1.2",
+    "@eslint-sukka/ts": "^5.1.2",
+    "@swc-node/register": "^1.9.0",
+    "@swc/core": "^1.4.12",
     "@types/babel__core": "^7.20.5",
-    "@types/chai": "^4.3.11",
+    "@types/chai": "^4.3.14",
     "@types/loader-utils": "^2.0.6",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^20.11.17",
+    "@types/node": "^20.12.4",
     "browserslist": "^4.23.0",
     "bumpp": "^9.3.0",
     "chai": "^4.4.1",
     "css-loader": "^6.10.0",
-    "eslint": "^8.56.0",
-    "eslint-config-sukka": "^5.1.0",
-    "eslint-formatter-sukka": "^5.1.0",
-    "memfs": "^4.7.0",
-    "mini-css-extract-plugin": "^2.8.0",
-    "mocha": "^10.3.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.0",
-    "postcss": "^8.4.35",
+    "next": "^14.1.4",
+    "postcss": "^8.4.38",
     "rimraf": "^5.0.5",
-    "rollup": "^4.10.0",
+    "rollup": "^4.14.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-swc3": "^0.11.0",
     "swc-loader": "^0.2.6",
-    "typescript": "^5.3.3",
-    "webpack": "^5.90.1"
+    "typescript": "^5.4.4",
+    "webpack": "^5.91.0"
   },
   "peerDependencies": {
     "@stylexjs/stylex": "*"