fix(webpack/css-extract): CSS HMR not working (#456)

<!--
  Thank you for submitting a pull request!

We appreciate the time and effort you have invested in making these
changes. Please ensure that you provide enough information to allow
others to review your pull request.

Upon submission, your pull request will be automatically assigned with
reviewers.

If you want to learn more about contributing to this project, please
visit:
https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md.
-->

## Summary

<!-- Can you explain the reasoning behind implementing this change? What
problem or issue does this pull request resolve? -->

We do not use `chunkLoading: 'require'` in Rspack after #400. So we need
to change the CSS hot update runtime, too.

This patch avoid using the `compilation.hooks.runtimeModule`, but use
the standard `RuntimeModule`.

Also fix CSS HMR not working when using nested entry.

<!-- It would be helpful if you could provide any relevant context, such
as GitHub issues or related discussions. -->

## Checklist

<!--- Check and mark with an "x" -->

- [x] Tests updated (or not required).
- [ ] Documentation updated (or **not required**).

Author: colinaaa

.changeset/slick-wasps-raise.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/css-extract-webpack-plugin": patch
+---
+
+Fix CSS HMR not working with nested entry name.

packages/webpack/css-extract-webpack-plugin/src/CssExtractRspackPlugin.ts

@@ -5,7 +5,7 @@
 import { createRequire } from 'node:module';
 
 import type {
-  Compilation,
+  Chunk,
   Compiler,
   CssExtractRspackPluginOptions as ExternalCssExtractRspackPluginOptions,
 } from '@rspack/core';
@@ -136,10 +136,6 @@ class CssExtractRspackPlugin {
 export { CssExtractRspackPlugin };
 export type { CssExtractRspackPluginOptions };
 
-type RuntimeModule = Parameters<
-  Compilation['hooks']['runtimeModule']['call']
->[0];
-
 class CssExtractRspackPluginImpl {
   name = 'CssExtractRspackPlugin';
   private hash: string | null = null;
@@ -163,54 +159,82 @@ class CssExtractRspackPluginImpl {
         compiler.options.mode === 'development'
         || process.env['NODE_ENV'] === 'development'
       ) {
-        // We require publicPath to get css.hot-update.json
-        compilation.hooks.additionalTreeRuntimeRequirements.tap(
-          this.name,
-          (_, set) => {
-            set.add(compiler.webpack.RuntimeGlobals.publicPath);
-          },
-        );
+        const { RuntimeGlobals, RuntimeModule } = compiler.webpack;
 
-        compilation.hooks.runtimeModule.tap(
-          this.name,
-          (runtimeModule, chunk) => {
-            if (runtimeModule.name === 'require_chunk_loading') {
-              const asyncChunks = Array.from(chunk.getAllAsyncChunks())
-                .map(c => {
-                  const { path } = compilation.getAssetPathWithInfo(
-                    options.chunkFilename ?? '.rspeedy/async/[name]/[name].css',
-                    { chunk: c },
-                  );
-                  return [c.name!, path];
-                });
+        class CSSHotUpdateRuntimeModule extends RuntimeModule {
+          hash: string | null;
 
-              const { path } = compilation.getPathWithInfo(
-                options.filename ?? '[name].css',
-                // Rspack does not pass JsChunk to Rust.
-                // See: https://github.com/web-infra-dev/rspack/blob/73c31abcb78472eb5a3d93e4ece19d9f106727a6/crates/rspack_binding_values/src/path_data.rs#L62
-                { filename: chunk.name! },
-              );
+          constructor(hash: string | null) {
+            super('lynx css hot update');
+            this.hash = hash;
+          }
 
-              const initialChunk = [chunk.name!, path];
+          override generate(): string {
+            const chunk = this.chunk!;
 
-              const cssHotUpdateList = [...asyncChunks, initialChunk].map((
-                [chunkName, cssHotUpdatePath],
-              ) => [
-                chunkName!,
-                cssHotUpdatePath!.replace(
-                  '.css',
-                  `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`,
-                ),
-              ]);
+            const asyncChunks = Array.from(chunk.getAllAsyncChunks())
+              .map(c => {
+                const { path } = compilation.getAssetPathWithInfo(
+                  options.chunkFilename ?? '.rspeedy/async/[name]/[name].css',
+                  { chunk: c },
+                );
+                return [c.name!, path];
+              });
 
-              this.#overrideChunkLoadingRuntimeModule(
-                compiler,
-                runtimeModule,
-                cssHotUpdateList,
-              );
-            }
-          },
-        );
+            const { path } = compilation.getPathWithInfo(
+              options.filename ?? '[name].css',
+              { chunk },
+            );
+
+            const initialChunk = [chunk.name!, path];
+
+            const cssHotUpdateList = [...asyncChunks, initialChunk].map((
+              [chunkName, cssHotUpdatePath],
+            ) => [
+              chunkName!,
+              cssHotUpdatePath!.replace(
+                '.css',
+                `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`,
+              ),
+            ]);
+
+            return `
+${RuntimeGlobals.require}.cssHotUpdateList = ${
+              cssHotUpdateList ? JSON.stringify(cssHotUpdateList) : 'null'
+            };
+`;
+          }
+        }
+
+        const onceForChunkSet = new WeakSet<Chunk>();
+        const handler = (chunk: Chunk, runtimeRequirements: Set<string>) => {
+          if (onceForChunkSet.has(chunk)) return;
+          onceForChunkSet.add(chunk);
+          runtimeRequirements.add(RuntimeGlobals.publicPath);
+          compilation.addRuntimeModule(
+            chunk,
+            new CSSHotUpdateRuntimeModule(this.hash),
+          );
+        };
+
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.ensureChunkHandlers)
+          .tap(this.name, handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
+          .tap(this.name, handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.hmrDownloadManifest)
+          .tap(this.name, handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.baseURI)
+          .tap(this.name, handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.externalInstallChunk)
+          .tap(this.name, handler);
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.onChunksLoaded)
+          .tap(this.name, handler);
 
         compilation.hooks.processAssets.tapPromise(
           {
@@ -301,21 +325,4 @@ class CssExtractRspackPluginImpl {
       }
     });
   }
-
-  #overrideChunkLoadingRuntimeModule(
-    compiler: Compiler,
-    runtimeModule: RuntimeModule,
-    cssHotUpdateList: string[][],
-  ) {
-    const { RuntimeGlobals } = compiler.webpack;
-    runtimeModule.source!.source = Buffer.concat([
-      Buffer.from(runtimeModule.source!.source as Buffer),
-      // cssHotUpdateList
-      Buffer.from(`
-      ${RuntimeGlobals.require}.cssHotUpdateList = ${
-        cssHotUpdateList ? JSON.stringify(cssHotUpdateList) : 'null'
-      };
-    `),
-    ]);
-  }
 }