@lynx-js/css-extract-webpack-plugin-canary 0.8.0 → 0.9.0-canary-20260715-2b5d83a4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @lynx-js/css-extract-webpack-plugin
 
+## 0.9.0-canary-20260715145040-2b5d83a4b8e3c1f5329de9d9fe7539d38e33e420
+
+### Minor Changes
+
+- Stop injecting `webpackChunkName` into dynamic imports so lazy bundle intermediate files stay inside the output directory. ([#2961](https://github.com/lynx-family/lynx-stack/pull/2961))
+
+  The ReactLynx transform injected `webpackChunkName: "<request>-react__<layer>"`, so a dynamic import resolving above the compiler context (e.g. `import('../../Foo.js')`) leaked `../` into `[name]`/`[id]` and the intermediate js/css/hmr files escaped the output directory. Async chunks now keep rspack's own ids, `__webpack_require__.lynx_aci` maps them by chunk id, and each lazy bundle's intermediate JS and CSS are emitted under `.rspeedy/async/<bundle-name>/<layer>.js` and `<layer>.css` next to its other intermediate outputs (`tasm.json`, `debug-metadata.json`, CSS hot-update files). Explicit `webpackChunkName` comments written by users are still honored and keep the user-controlled `[name]` placement. Main-thread chunks no longer emit CSS hot-update files — CSS only exists on the background thread, and the main-thread HMR runtime receives updates from it.
+
+  These packages release together and must be upgraded together: `@lynx-js/react-webpack-plugin` and `@lynx-js/css-extract-webpack-plugin` require `@lynx-js/template-webpack-plugin` `^0.13.0`, and `@lynx-js/react-rsbuild-plugin` requires `@lynx-js/react` `^0.123.0`.
+
+### Patch Changes
+
+- Widen the `@lynx-js/template-webpack-plugin` peer range to `^0.13.0` to accept the ([#2584](https://github.com/lynx-family/lynx-stack/pull/2584))
+  minor that ships the FetchBundle chunk encoding.
+- Updated dependencies [[`2b5d83a`](https://github.com/lynx-family/lynx-stack/commit/2b5d83a4b8e3c1f5329de9d9fe7539d38e33e420), [`2b5d83a`](https://github.com/lynx-family/lynx-stack/commit/2b5d83a4b8e3c1f5329de9d9fe7539d38e33e420), [`fec4237`](https://github.com/lynx-family/lynx-stack/commit/fec4237b2257455a40a68f33864fb713c147f7d4)]:
+  - @lynx-js/template-webpack-plugin@0.13.0-canary-20260715145040-2b5d83a4b8e3c1f5329de9d9fe7539d38e33e420
+
 ## 0.8.0
 
 ### Minor Changes

package/lib/CssExtractRspackPlugin.js

@@ -96,9 +96,29 @@ class CssExtractRspackPluginImpl {
         this.name = 'CssExtractRspackPlugin';
         this.hash = null;
         this.hotUpdateFiles = new Map();
+        // Route a lazy bundle's CSS chunk to `.rspeedy/async/<name>/<layer>.css`,
+        // co-located with the bundle's other intermediate outputs. Non-lazy
+        // chunks keep the configured template.
+        let currentCompilation;
+        compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
+            currentCompilation = compilation;
+        });
+        const userChunkFilename = options.chunkFilename;
+        const chunkFilename = userChunkFilename === undefined
+            ? ''
+            : (pathData) => {
+                const id = pathData.chunk?.id;
+                if (currentCompilation !== undefined && id !== undefined && id !== null) {
+                    const layoutName = LynxTemplatePlugin.getAsyncChunkLayoutName(currentCompilation, id);
+                    if (layoutName !== undefined) {
+                        return `.rspeedy/async/${layoutName}.css`;
+                    }
+                }
+                return userChunkFilename;
+            };
         new compiler.webpack.CssExtractRspackPlugin({
             filename: options.filename ?? '[name].css',
-            chunkFilename: options.chunkFilename ?? '',
+            chunkFilename,
             ignoreOrder: options.ignoreOrder ?? false,
             insert: options.insert ?? '',
             attributes: options.attributes ?? {},
@@ -108,12 +128,26 @@ class CssExtractRspackPluginImpl {
         compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
             if (this.isHMREnabled(compiler)) {
                 const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
+                const isMainThreadChunk = (chunk) => {
+                    for (const module of compilation.chunkGraph.getChunkModulesIterable(chunk)) {
+                        if (module.layer) {
+                            return String(module.layer).split(':').pop() === 'main-thread';
+                        }
+                    }
+                    return false;
+                };
                 hooks.beforeEmit.tapPromise(this.name, async (args) => {
                     const cssChunks = args.cssChunks;
                     const content = cssChunks.map((chunk) => chunk.source.source().toString('utf-8'));
-                    for (const entryName of args.entryNames) {
+                    // Generate the hot update files of this template's own chunks —
+                    // `entryNames` cannot be used as the key since async lazy bundle
+                    // templates have none.
+                    const chunkKeys = args.chunkGroups
+                        .flatMap(cg => cg.chunks)
+                        .map(chunk => String(chunk.name ?? chunk.id));
+                    for (const chunkKey of chunkKeys) {
                         // generate hot update file which is required by cssHotUpdateList
-                        const hotUpdateFilePath = this.hotUpdateFiles.get(entryName);
+                        const hotUpdateFilePath = this.hotUpdateFiles.get(chunkKey);
                         if (!hotUpdateFilePath) {
                             continue;
                         }
@@ -175,9 +209,18 @@ class CssExtractRspackPluginImpl {
                     generate() {
                         const chunk = this.chunk;
                         const asyncChunks = Array.from(chunk.getAllAsyncChunks())
+                            // CSS only exists on the background thread (main-thread CSS is
+                            // dropped by the ignore-css-loader), so main-thread chunks get
+                            // no CSS hot update.
+                            .filter(c => !isMainThreadChunk(c))
                             .map(c => {
-                            const { path } = compilation.getAssetPathWithInfo(options.chunkFilename ?? '.rspeedy/async/[name]/[name].css', { chunk: c });
-                            return [c.name, path];
+                            const layoutName = c.id !== null && c.id !== undefined
+                                ? LynxTemplatePlugin.getAsyncChunkLayoutName(compilation, c.id)
+                                : undefined;
+                            const path = layoutName === undefined
+                                ? compilation.getAssetPathWithInfo(options.chunkFilename ?? '.rspeedy/async/[name]/[name].css', { chunk: c }).path
+                                : `.rspeedy/async/${layoutName}.css`;
+                            return [String(c.name ?? c.id), path];
                         });
                         const { path } = compilation.getPathWithInfo(options.filename ?? '[name].css', { chunk });
                         const initialChunk = [chunk.name, path];
@@ -201,6 +244,10 @@ ${RuntimeGlobals.require}.cssHotUpdateList = ${cssHotUpdateList ? JSON.stringify
                     if (onceForChunkSet.has(chunk))
                         return;
                     onceForChunkSet.add(chunk);
+                    // The main-thread CSS HMR runtime receives updates from the
+                    // background thread instead of reading `cssHotUpdateList`.
+                    if (isMainThreadChunk(chunk))
+                        return;
                     runtimeRequirements.add(RuntimeGlobals.publicPath);
                     compilation.addRuntimeModule(chunk, new CSSHotUpdateRuntimeModule(this.hash, this.hotUpdateFiles));
                 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/css-extract-webpack-plugin-canary",
-  "version": "0.8.0",
+  "version": "0.9.0-canary-20260715-2b5d83a4",
   "description": "This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.",
   "keywords": [
     "webpack",
@@ -42,13 +42,13 @@
   ],
   "devDependencies": {
     "@microsoft/api-extractor": "7.58.2",
-    "@rspack/core": "2.0.8",
-    "@rstest/core": "0.10.5",
+    "@rspack/core": "2.1.3",
+    "@rstest/core": "0.11.0",
     "css-loader": "^7.1.4",
     "sass-loader": "^16.0.7",
     "@lynx-js/css-serializer": "npm:@lynx-js/css-serializer-canary@0.1.6",
-    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.12.0",
-    "@lynx-js/test-tools": "0.0.0"
+    "@lynx-js/test-tools": "0.0.0",
+    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.13.0-canary-20260715-2b5d83a4"
   },
   "peerDependencies": {
     "@lynx-js/template-webpack-plugin": "*"