fix: refactor hot update of style

.changeset/rotten-bikes-beg.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/css-extract-webpack-plugin": minor
+---
+
+**BREAKING CHANGE**: Require `@lynx-js/template-webpack-plugin` 0.10.0.

.changeset/violet-facts-notice.md

@@ -0,0 +1,6 @@
+---
+"@lynx-js/css-extract-webpack-plugin": minor
+"@lynx-js/template-webpack-plugin": minor
+---
+
+Merge all css chunk and generate a `.css.hot-update.json` file for each bundle.

CODEOWNERS

@@ -1,6 +1,6 @@
 packages/web-platform/** @pupiltong
-packages/webpack/** @colinaaa
-packages/rspeedy/** @colinaaa
-packages/react/** @hzy
+packages/webpack/** @colinaaa @upupming
+packages/rspeedy/** @colinaaa @upupming
+packages/react/** @hzy @HuJean
 packages/react/transform/** @gaoachao
-benchmark/react/** @hzy
+benchmark/react/** @hzy @HuJean

packages/webpack/css-extract-webpack-plugin/package.json

@@ -59,7 +59,7 @@
     "webpack": "^5.102.0"
   },
   "peerDependencies": {
-    "@lynx-js/template-webpack-plugin": "^0.9.0"
+    "@lynx-js/template-webpack-plugin": "^0.10.0"
   },
   "engines": {
     "node": ">=18"

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

@@ -125,6 +125,7 @@ export type { CssExtractRspackPluginOptions };
 class CssExtractRspackPluginImpl {
   name = 'CssExtractRspackPlugin';
   private hash: string | null = null;
+  private hotUpdateFiles = new Map<string, string>();
 
   /**
    * Check if Hot Module Replacement (HMR) is enabled
@@ -167,15 +168,18 @@ class CssExtractRspackPluginImpl {
         );
 
         hooks.beforeEmit.tapPromise(this.name, async (args) => {
-          for (
-            const {
-              name: filename,
-              source,
-            } of args.cssChunks
-          ) {
-            const content: string = source.source().toString('utf-8');
+          const cssChunks = args.cssChunks;
+          const content: string[] = cssChunks.map((chunk) =>
+            chunk.source.source().toString('utf-8')
+          );
+          for (const entryName of args.entryNames) {
+            // generate hot update file which is required by cssHotUpdateList
+            const hotUpdateFilePath = this.hotUpdateFiles.get(entryName);
+            if (!hotUpdateFilePath) {
+              continue;
+            }
             const css = LynxTemplatePlugin.convertCSSChunksToMap(
-              [content],
+              content,
               options.cssPlugins,
               Boolean(
                 args.finalEncodeOptions.compilerOptions['enableCSSSelector'],
@@ -219,10 +223,7 @@ class CssExtractRspackPluginImpl {
                 deps: cssDeps,
               };
               compilation.emitAsset(
-                filename.replace(
-                  '.css',
-                  `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`,
-                ),
+                hotUpdateFilePath,
                 new compiler.webpack.sources.RawSource(
                   JSON.stringify(result),
                   true,
@@ -241,18 +242,22 @@ class CssExtractRspackPluginImpl {
             }
           }
           this.hash = compilation.hash;
-
           return args;
         });
 
         const { RuntimeGlobals, RuntimeModule } = compiler.webpack;
 
         class CSSHotUpdateRuntimeModule extends RuntimeModule {
           hash: string | null;
+          hotUpdateFiles: Map<string, string>;
 
-          constructor(hash: string | null) {
+          constructor(
+            hash: string | null,
+            hotUpdateFiles: Map<string, string>,
+          ) {
             super('lynx css hot update');
             this.hash = hash;
+            this.hotUpdateFiles = hotUpdateFiles;
           }
 
           override generate(): string {
@@ -276,13 +281,19 @@ class CssExtractRspackPluginImpl {
 
             const cssHotUpdateList = [...asyncChunks, initialChunk].map((
               [chunkName, cssHotUpdatePath],
-            ) => [
-              chunkName!,
-              cssHotUpdatePath!.replace(
+            ) => {
+              // use hash of previous compilation cause CSSHotUpdateRuntimeModule can not get hash immediately
+              const hotUpdatePath = cssHotUpdatePath!.replace(
                 '.css',
                 `${this.hash ? `.${this.hash}` : ''}.css.hot-update.json`,
-              ),
-            ]);
+              );
+              // save all hot update file info
+              this.hotUpdateFiles.set(chunkName!, hotUpdatePath);
+              return [
+                chunkName!,
+                hotUpdatePath,
+              ];
+            });
 
             return `
 ${RuntimeGlobals.require}.cssHotUpdateList = ${
@@ -299,7 +310,7 @@ ${RuntimeGlobals.require}.cssHotUpdateList = ${
           runtimeRequirements.add(RuntimeGlobals.publicPath);
           compilation.addRuntimeModule(
             chunk,
-            new CSSHotUpdateRuntimeModule(this.hash),
+            new CSSHotUpdateRuntimeModule(this.hash, this.hotUpdateFiles),
           );
         };
 

packages/webpack/css-extract-webpack-plugin/test/hotCases/hot-update-json/bundle-splitting/__snapshot__/rspack/0.snap.txt

@@ -0,0 +1,39 @@
+# Case bundle-splitting - rspack: Step 0
+
+## Changed Files
+
+
+## Asset Files
+- Bundle: async/common.js
+- Bundle: async/lazy.js
+- Bundle: entry.js
+- Manifest: async/common.css.hot-update.json, size: 1064
+- Manifest: async/lazy.css.hot-update.json, size: 1374
+- Manifest: entry.css.hot-update.json, size: 1358
+
+## Manifest
+
+### async/common.css.hot-update.json
+
+```json
+{"content":"eyJjb21waWxlck9wdGlvbnMiOnsiZW5hYmxlRmliZXJBcmNoIjp0cnVlLCJ1c2VMZXB1c05HIjp0cnVlLCJlbmFibGVSZXVzZUNvbnRleHQiOnRydWUsImJ1bmRsZU1vZHVsZU1vZGUiOiJSZXR1cm5CeUZ1bmN0aW9uIiwiZGVidWdJbmZvT3V0c2lkZSI6dHJ1ZSwiZGVmYXVsdERpc3BsYXlMaW5lYXIiOnRydWUsImVuYWJsZUNTU0ludmFsaWRhdGlvbiI6ZmFsc2UsImVuYWJsZUNTU1NlbGVjdG9yIjp0cnVlLCJlbmFibGVMZXB1c0RlYnVnIjp0cnVlLCJlbmFibGVSZW1vdmVDU1NTY29wZSI6ZmFsc2UsInRhcmdldFNka1ZlcnNpb24iOiIzLjIiLCJkZWZhdWx0T3ZlcmZsb3dWaXNpYmxlIjp0cnVlfSwic291cmNlQ29udGVudCI6eyJkc2wiOiJyZWFjdF9ub2RpZmYiLCJhcHBUeXBlIjoiRHluYW1pY0NvbXBvbmVudCIsImNvbmZpZyI6eyJsZXB1c1N0cmljdCI6dHJ1ZSwidXNlTmV3U3dpcGVyIjp0cnVlLCJlbmFibGVOZXdJbnRlcnNlY3Rpb25PYnNlcnZlciI6dHJ1ZSwiZW5hYmxlTmF0aXZlTGlzdCI6dHJ1ZSwiZW5hYmxlQTExeSI6dHJ1ZSwiZW5hYmxlQWNjZXNzaWJpbGl0eUVsZW1lbnQiOmZhbHNlLCJlbmFibGVDU1NJbmhlcml0YW5jZSI6ZmFsc2UsImVuYWJsZU5ld0dlc3R1cmUiOmZhbHNlLCJyZW1vdmVEZXNjZW5kYW50U2VsZWN0b3JTY29wZSI6ZmFsc2V9fSwiY3NzIjp7ImNzc01hcCI6eXsImNzc1NvdXJjZSI6eXsImNvbnRlbnRNYXAiOnt9fSwibGVwdXNDb2RlIjp7ImxlcHVzQ2h1bmsiOnt9fSwibWFuaWZlc3QiOnt9LCJjdXN0b21TZWN0aW9ucyI6e319","deps":{}}
+```
+
+
+
+### async/lazy.css.hot-update.json
+
+```json
+{"content":"eyJjb21waWxlck9wdGlvbnMiOnsiZW5hYmxlRmliZXJBcmNoIjp0cnVlLCJ1c2VMZXB1c05HIjp0cnVlLCJlbmFibGVSZXVzZUNvbnRleHQiOnRydWUsImJ1bmRsZU1vZHVsZU1vZGUiOiJSZXR1cm5CeUZ1bmN0aW9uIiwiZGVidWdJbmZvT3V0c2lkZSI6dHJ1ZSwiZGVmYXVsdERpc3BsYXlMaW5lYXIiOnRydWUsImVuYWJsZUNTU0ludmFsaWRhdGlvbiI6ZmFsc2UsImVuYWJsZUNTU1NlbGVjdG9yIjp0cnVlLCJlbmFibGVMZXB1c0RlYnVnIjp0cnVlLCJlbmFibGVSZW1vdmVDU1NTY29wZSI6ZmFsc2UsInRhcmdldFNka1ZlcnNpb24iOiIzLjIiLCJkZWZhdWx0T3ZlcmZsb3dWaXNpYmxlIjp0cnVlfSwic291cmNlQ29udGVudCI6eyJkc2wiOiJyZWFjdF9ub2RpZmYiLCJhcHBUeXBlIjoiRHluYW1pY0NvbXBvbmVudCIsImNvbmZpZyI6eyJsZXB1c1N0cmljdCI6dHJ1ZSwidXNlTmV3U3dpcGVyIjp0cnVlLCJlbmFibGVOZXdJbnRlcnNlY3Rpb25PYnNlcnZlciI6dHJ1ZSwiZW5hYmxlTmF0aXZlTGlzdCI6dHJ1ZSwiZW5hYmxlQTExeSI6dHJ1ZSwiZW5hYmxlQWNjZXNzaWJpbGl0eUVsZW1lbnQiOmZhbHNlLCJlbmFibGVDU1NJbmhlcml0YW5jZSI6ZmFsc2UsImVuYWJsZU5ld0dlc3R1cmUiOmZhbHNlLCJyZW1vdmVEZXNjZW5kYW50U2VsZWN0b3JTY29wZSI6ZmFsc2V9fSwiY3NzIjp7ImNzc01hcCI6eyIwIjpbeyJ0eXBlIjoiU3R5bGVSdWxlIiwic3R5bGUiOlt7Im5hbWUiOiJjb2xvciIsInZhbHVlIjoiYmx1ZSIsImtleUxvYyI6eyJsaW5lIjoxLCJjb2x1bW4iOjEyfSwidmFsTG9jIjp7ImxpbmUiOjEsImNvbHVtbiI6MTh9fVXsInNlbGVjdG9yVGV4dCI6eyJ2YWx1ZSI6IiXsYXp5IiwibG9jIjp7ImxpbmUiOjEsImNvbHVtbiI6Nn19LCJ2YXJpYWJsZXMiOnt9fV19LCJjc3NTb3VyY2UiOnsiMCI6Ii9jc3NJZC8wLmNzcyJ9LCJjb250ZW50TWFwIjp7fXXsImxlcHVzQ29kZSI6eyJsZXB1c0NodW5rIjp7fXXsIm1hbmlmZXN0Ijp7fSwiY3VzdG9tU2VjdGlvbnMiOnt9fQ==","deps":{"0":[]}}
+```
+
+
+
+### entry.css.hot-update.json
+
+```json
+{"content":"eyJjb21waWxlck9wdGlvbnMiOnsiZW5hYmxlRmliZXJBcmNoIjp0cnVlLCJ1c2VMZXB1c05HIjp0cnVlLCJlbmFibGVSZXVzZUNvbnRleHQiOnRydWUsImJ1bmRsZU1vZHVsZU1vZGUiOiJSZXR1cm5CeUZ1bmN0aW9uIiwiZGVidWdJbmZvT3V0c2lkZSI6dHJ1ZSwiZGVmYXVsdERpc3BsYXlMaW5lYXIiOnRydWUsImVuYWJsZUNTU0ludmFsaWRhdGlvbiI6ZmFsc2UsImVuYWJsZUNTU1NlbGVjdG9yIjp0cnVlLCJlbmFibGVMZXB1c0RlYnVnIjp0cnVlLCJlbmFibGVSZW1vdmVDU1NTY29wZSI6ZmFsc2UsInRhcmdldFNka1ZlcnNpb24iOiIzLjIiLCJkZWZhdWx0T3ZlcmZsb3dWaXNpYmxlIjp0cnVlfSwic291cmNlQ29udGVudCI6eyJkc2wiOiJyZWFjdF9ub2RpZmYiLCJhcHBUeXBlIjoiY2FyZCIsImNvbmZpZyI6eyJsZXB1c1N0cmljdCI6dHJ1ZSwidXNlTmV3U3dpcGVyIjp0cnVlLCJlbmFibGVOZXdJbnRlcnNlY3Rpb25PYnNlcnZlciI6dHJ1ZSwiZW5hYmxlTmF0aXZlTGlzdCI6dHJ1ZSwiZW5hYmxlQTExeSI6dHJ1ZSwiZW5hYmxlQWNjZXNzaWJpbGl0eUVsZW1lbnQiOmZhbHNlLCJlbmFibGVDU1NJbmhlcml0YW5jZSI6ZmFsc2UsImVuYWJsZU5ld0dlc3R1cmUiOmZhbHNlLCJyZW1vdmVEZXNjZW5kYW50U2VsZWN0b3JTY29wZSI6ZmFsc2V9fSwiY3NzIjp7ImNzc01hcCI6eyIwIjpbeyJ0eXBlIjoiU3R5bGVSdWxlIiwic3R5bGUiOlt7Im5hbWUiOiJjb2xvciIsInZhbHVlIjoicmVkIiwia2V5TG9jIjp7ImxpbmUiOjEsImNvbHVtbiI6MTN9LCJ2YWxMb2MiOnsibGluZSI6MSwiYXsdW1uIjoxOH19XSwic2VsZWN0b3JUZXh0Ijp7InZhbHVlIjoiLmVudHJ5IiwibG9jIjp7ImxpbmUiOjEsImNvbHVtbiI6N319LCJ2YXJpYWJsZXMiOnt9fV19LCJjc3NTb3VyY2UiOnsiMCI6Ii9jc3NJZC8wLmNzcyJ9LCJjb250ZW50TWFwIjp7fXXsImxlcHVzQ29kZSI6eyJsZXB1c0NodW5rIjp7fXXsIm1hbmlmZXN0Ijp7fSwiY3VzdG9tU2VjdGlvbnMiOnt9fQ==","deps":{"0":[]}}
+```
+
+
+## Update

packages/webpack/css-extract-webpack-plugin/test/hotCases/hot-update-json/bundle-splitting/__snapshot__/rspack/1.snap.txt

@@ -0,0 +1,108 @@
+# Case bundle-splitting - rspack: Step 1
+
+## Changed Files
+- entry.css
+
+## Asset Files
+- Bundle: async/common.js
+- Bundle: async/lazy.js
+- Bundle: entry.js
+- Manifest: async/common.LAST_HASH.css.hot-update.json, size: 1064
+- Manifest: async/lazy.LAST_HASH.css.hot-update.json, size: 1374
+- Manifest: entry.LAST_HASH.css.hot-update.json, size: 1362
+- Manifest: entry.LAST_HASH.hot-update.json, size: 29
+- Update: entry.LAST_HASH.hot-update.js, size: 1232
+
+## Manifest
+
+### async/common.LAST_HASH.css.hot-update.json
+
+```json
+{"content":"eyJjb21waWxlck9wdGlvbnMiOnsiZW5hYmxlRmliZXJBcmNoIjp0cnVlLCJ1c2VMZXB1c05HIjp0cnVlLCJlbmFibGVSZXVzZUNvbnRleHQiOnRydWUsImJ1bmRsZU1vZHVsZU1vZGUiOiJSZXR1cm5CeUZ1bmN0aW9uIiwiZGVidWdJbmZvT3V0c2lkZSI6dHJ1ZSwiZGVmYXVsdERpc3BsYXlMaW5lYXIiOnRydWUsImVuYWJsZUNTU0ludmFsaWRhdGlvbiI6ZmFsc2UsImVuYWJsZUNTU1NlbGVjdG9yIjp0cnVlLCJlbmFibGVMZXB1c0RlYnVnIjp0cnVlLCJlbmFibGVSZW1vdmVDU1NTY29wZSI6ZmFsc2UsInRhcmdldFNka1ZlcnNpb24iOiIzLjIiLCJkZWZhdWx0T3ZlcmZsb3dWaXNpYmxlIjp0cnVlfSwic291cmNlQ29udGVudCI6eyJkc2wiOiJyZWFjdF9ub2RpZmYiLCJhcHBUeXBlIjoiRHluYW1pY0NvbXBvbmVudCIsImNvbmZpZyI6eyJsZXB1c1N0cmljdCI6dHJ1ZSwidXNlTmV3U3dpcGVyIjp0cnVlLCJlbmFibGVOZXdJbnRlcnNlY3Rpb25PYnNlcnZlciI6dHJ1ZSwiZW5hYmxlTmF0aXZlTGlzdCI6dHJ1ZSwiZW5hYmxlQTExeSI6dHJ1ZSwiZW5hYmxlQWNjZXNzaWJpbGl0eUVsZW1lbnQiOmZhbHNlLCJlbmFibGVDU1NJbmhlcml0YW5jZSI6ZmFsc2UsImVuYWJsZU5ld0dlc3R1cmUiOmZhbHNlLCJyZW1vdmVEZXNjZW5kYW50U2VsZWN0b3JTY29wZSI6ZmFsc2V9fSwiY3NzIjp7ImNzc01hcCI6eXsImNzc1NvdXJjZSI6eXsImNvbnRlbnRNYXAiOnt9fSwibGVwdXNDb2RlIjp7ImxlcHVzQ2h1bmsiOnt9fSwibWFuaWZlc3QiOnt9LCJjdXN0b21TZWN0aW9ucyI6e319","deps":{}}
+```
+
+
+
+### async/lazy.LAST_HASH.css.hot-update.json
+
+```json
+{"content":"eyJjb21waWxlck9wdGlvbnMiOnsiZW5hYmxlRmliZXJBcmNoIjp0cnVlLCJ1c2VMZXB1c05HIjp0cnVlLCJlbmFibGVSZXVzZUNvbnRleHQiOnRydWUsImJ1bmRsZU1vZHVsZU1vZGUiOiJSZXR1cm5CeUZ1bmN0aW9uIiwiZGVidWdJbmZvT3V0c2lkZSI6dHJ1ZSwiZGVmYXVsdERpc3BsYXlMaW5lYXIiOnRydWUsImVuYWJsZUNTU0ludmFsaWRhdGlvbiI6ZmFsc2UsImVuYWJsZUNTU1NlbGVjdG9yIjp0cnVlLCJlbmFibGVMZXB1c0RlYnVnIjp0cnVlLCJlbmFibGVSZW1vdmVDU1NTY29wZSI6ZmFsc2UsInRhcmdldFNka1ZlcnNpb24iOiIzLjIiLCJkZWZhdWx0T3ZlcmZsb3dWaXNpYmxlIjp0cnVlfSwic291cmNlQ29udGVudCI6eyJkc2wiOiJyZWFjdF9ub2RpZmYiLCJhcHBUeXBlIjoiRHluYW1pY0NvbXBvbmVudCIsImNvbmZpZyI6eyJsZXB1c1N0cmljdCI6dHJ1ZSwidXNlTmV3U3dpcGVyIjp0cnVlLCJlbmFibGVOZXdJbnRlcnNlY3Rpb25PYnNlcnZlciI6dHJ1ZSwiZW5hYmxlTmF0aXZlTGlzdCI6dHJ1ZSwiZW5hYmxlQTExeSI6dHJ1ZSwiZW5hYmxlQWNjZXNzaWJpbGl0eUVsZW1lbnQiOmZhbHNlLCJlbmFibGVDU1NJbmhlcml0YW5jZSI6ZmFsc2UsImVuYWJsZU5ld0dlc3R1cmUiOmZhbHNlLCJyZW1vdmVEZXNjZW5kYW50U2VsZWN0b3JTY29wZSI6ZmFsc2V9fSwiY3NzIjp7ImNzc01hcCI6eyIwIjpbeyJ0eXBlIjoiU3R5bGVSdWxlIiwic3R5bGUiOlt7Im5hbWUiOiJjb2xvciIsInZhbHVlIjoiYmx1ZSIsImtleUxvYyI6eyJsaW5lIjoxLCJjb2x1bW4iOjEyfSwidmFsTG9jIjp7ImxpbmUiOjEsImNvbHVtbiI6MTh9fVXsInNlbGVjdG9yVGV4dCI6eyJ2YWx1ZSI6IiXsYXp5IiwibG9jIjp7ImxpbmUiOjEsImNvbHVtbiI6Nn19LCJ2YXJpYWJsZXMiOnt9fV19LCJjc3NTb3VyY2UiOnsiMCI6Ii9jc3NJZC8wLmNzcyJ9LCJjb250ZW50TWFwIjp7fXXsImxlcHVzQ29kZSI6eyJsZXB1c0NodW5rIjp7fXXsIm1hbmlmZXN0Ijp7fSwiY3VzdG9tU2VjdGlvbnMiOnt9fQ==","deps":{"0":[]}}
+```
+
+
+
+### entry.LAST_HASH.css.hot-update.json
+
+```json
+{"content":"eyJjb21waWxlck9wdGlvbnMiOnsiZW5hYmxlRmliZXJBcmNoIjp0cnVlLCJ1c2VMZXB1c05HIjp0cnVlLCJlbmFibGVSZXVzZUNvbnRleHQiOnRydWUsImJ1bmRsZU1vZHVsZU1vZGUiOiJSZXR1cm5CeUZ1bmN0aW9uIiwiZGVidWdJbmZvT3V0c2lkZSI6dHJ1ZSwiZGVmYXVsdERpc3BsYXlMaW5lYXIiOnRydWUsImVuYWJsZUNTU0ludmFsaWRhdGlvbiI6ZmFsc2UsImVuYWJsZUNTU1NlbGVjdG9yIjp0cnVlLCJlbmFibGVMZXB1c0RlYnVnIjp0cnVlLCJlbmFibGVSZW1vdmVDU1NTY29wZSI6ZmFsc2UsInRhcmdldFNka1ZlcnNpb24iOiIzLjIiLCJkZWZhdWx0T3ZlcmZsb3dWaXNpYmxlIjp0cnVlfSwic291cmNlQ29udGVudCI6eyJkc2wiOiJyZWFjdF9ub2RpZmYiLCJhcHBUeXBlIjoiY2FyZCIsImNvbmZpZyI6eyJsZXB1c1N0cmljdCI6dHJ1ZSwidXNlTmV3U3dpcGVyIjp0cnVlLCJlbmFibGVOZXdJbnRlcnNlY3Rpb25PYnNlcnZlciI6dHJ1ZSwiZW5hYmxlTmF0aXZlTGlzdCI6dHJ1ZSwiZW5hYmxlQTExeSI6dHJ1ZSwiZW5hYmxlQWNjZXNzaWJpbGl0eUVsZW1lbnQiOmZhbHNlLCJlbmFibGVDU1NJbmhlcml0YW5jZSI6ZmFsc2UsImVuYWJsZU5ld0dlc3R1cmUiOmZhbHNlLCJyZW1vdmVEZXNjZW5kYW50U2VsZWN0b3JTY29wZSI6ZmFsc2V9fSwiY3NzIjp7ImNzc01hcCI6eyIwIjpbeyJ0eXBlIjoiU3R5bGVSdWxlIiwic3R5bGUiOlt7Im5hbWUiOiJjb2xvciIsInZhbHVlIjoiXCJibHVlXCIiLCJrZXlMb2MiOnsibGluZSI6MSwiYXsdW1uIjoxMXsInZhbExvYyI6eyJsaW5lIjoxLCJjb2x1bW4iOjIxfX1dLCJzZWxlY3RvclRleHQiOnsidmFsdWUiOiIuZW50cnkiLCJsb2MiOnsibGluZSI6MSwiYXsdW1uIjo3fXXsInZhcmlhYmxlcyI6e319XXXsImNzc1NvdXJjZSI6eyIwIjoiL2Nzc0lkLzAuY3NzInXsImNvbnRlbnRNYXAiOnt9fSwibGVwdXNDb2RlIjp7ImxlcHVzQ2h1bmsiOnt9fSwibWFuaWZlc3QiOnt9LCJjdXN0b21TZWN0aW9ucyI6e319","deps":{"0":[]}}
+```
+
+
+
+### entry.LAST_HASH.hot-update.json
+
+```json
+{"c":["entry"],"r":[],"m":[]}
+```
+
+
+## Update
+
+
+### entry.LAST_HASH.hot-update.js
+
+#### Changed Modules
+- ./hot-update-json/bundle-splitting/entry.css
+
+#### Changed Runtime Modules
+- webpack/runtime/get_full_hash
+
+#### Changed Content
+```js
+"use strict";
+exports.ids = ["entry"];
+exports.modules = {
+"./hot-update-json/bundle-splitting/entry.css": (function (module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+  if (true) {
+    (function() {
+      var localsJsonString = undefined;
+      var cssReload = __webpack_require__("../../runtime/hotModuleReplacement.cjs")(module.id, {}, "");
+      // only invalidate when locals change
+      if (
+        module.hot.data &&
+        module.hot.data.value &&
+        module.hot.data.value !== localsJsonString
+      ) {
+        module.hot.invalidate();
+      } else {
+        module.hot.accept();
+      }
+      module.hot.dispose(function(data) {
+        data.value = localsJsonString;
+        cssReload();
+      });
+    })();
+  }
+
+}),
+
+};
+exports.runtime = function(__webpack_require__) {
+// webpack/runtime/get_full_hash
+(() => {
+__webpack_require__.h = () => ("CURRENT_HASH")
+})();
+// webpack/runtime/lynx css hot update
+(() => {
+
+__webpack_require__.cssHotUpdateList = [["lazy","async/lazy.LAST_HASH.css.hot-update.json"],["common","async/common.LAST_HASH.css.hot-update.json"],["entry","entry.LAST_HASH.css.hot-update.json"]];
+
+})();
+
+}
+;
+;
+```

packages/webpack/css-extract-webpack-plugin/test/hotCases/hot-update-json/bundle-splitting/common.js

@@ -0,0 +1,3 @@
+export function minus(a, b) {
+  return a - b;
+}

packages/webpack/css-extract-webpack-plugin/test/hotCases/hot-update-json/bundle-splitting/entry.css

@@ -0,0 +1,7 @@
+.entry {
+  color: red;
+}
+---
+.entry {
+  color: 'blue';
+}

packages/webpack/css-extract-webpack-plugin/test/hotCases/hot-update-json/bundle-splitting/entry.js

@@ -0,0 +1,81 @@
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { update } from '@lynx-js/test-tools/update.js';
+import { createStubLynx } from '../../../helper/stubLynx.js'
+
+import './entry.css';
+
+import(/* webpackChunkName: "lazy" */ './lazy.js').then((res) => {
+  console.log('dynamic import lazy.js', res);
+})
+import(/* webpackChunkName: "common" */ './common.js').then((res) => {
+  console.log('dynamic import common.js', res);
+})
+
+const replaceStyleSheetByIdWithBase64 = vi.fn()
+const lynx = createStubLynx(
+  vi,
+  __non_webpack_require__,
+  replaceStyleSheetByIdWithBase64
+)
+vi.stubGlobal('lynx', lynx)
+__non_webpack_require__(HMR_RUNTIME_LEPUS)
+
+expect.extend({
+  toBeBase64EncodedMatching(receive, expected) {
+    if (typeof receive !== 'string') {
+      return {
+        pass: false,
+        message: () => `expected to be string, got ${typeof receive}`,
+      }
+    }
+
+    const decoded = Buffer.from(receive, 'base64').toString('utf-8')
+    return {
+      pass: decoded.includes(expected),
+      message: () => `${receive} does not contains ${expected}`,
+    }
+  },
+})
+
+it('should has cssHotUpdateList and hot-update.json', () => {
+  new Promise(()=>{
+    function done(error) {
+      if (error) {
+        reject(error)
+      } else {
+        resolve()
+      }
+    }
+    expect(__webpack_require__.cssHotUpdateList).toEqual([
+      ["lazy","async/lazy.css.hot-update.json"],
+      ["common","async/common.css.hot-update.json"],
+      ["entry","entry.css.hot-update.json"]
+    ]);
+
+    __webpack_require__.cssHotUpdateList.forEach(([_, path]) => {
+      expect(existsSync(join(__dirname, path))).toBe(true);
+    });
+
+    const { content: entryContent } = __non_webpack_require__('./entry.css.hot-update.json')
+    expect(entryContent).toBeBase64EncodedMatching('red');
+    const { content: lazyContent } = __non_webpack_require__(`./async/lazy.css.hot-update.json`)
+    expect(lazyContent).toBeBase64EncodedMatching('blue');
+
+    let prevHash = __webpack_hash__
+    NEXT(
+      vi.stubGlobal('lynx', lynx),
+      update(done, true, async () => {
+        const { content: entryContent } = __non_webpack_require__(`./entry.${prevHash}.css.hot-update.json`)
+        expect(entryContent).toBeBase64EncodedMatching('blue');
+        done();
+      })
+    )
+  })
+})

packages/webpack/css-extract-webpack-plugin/test/hotCases/hot-update-json/bundle-splitting/lazy.css

@@ -0,0 +1,3 @@
+.lazy {
+  color: blue;
+}

packages/webpack/css-extract-webpack-plugin/test/hotCases/hot-update-json/bundle-splitting/lazy.js

@@ -0,0 +1,4 @@
+import "./lazy.css";
+export function add(a, b) {
+  return a + b;
+}