chore: polish CSS HMR logs and correct the case (#8083)

* chore: polish CSS HMR logs and correct the case * test: fix snapshot
web-infra-dev · Oct 11, 2024 · 5b6d1e0 · 5b6d1e0 · rspack-bot · Oct 11, 2024
1 parent 0683b3e
commit 5b6d1e0
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 32 deletions.
diff --git a/crates/rspack_plugin_css/webpack_css_cases_to_be_migrated/hmr/expected/main.js b/crates/rspack_plugin_css/webpack_css_cases_to_be_migrated/hmr/expected/main.js
@@ -262,7 +262,7 @@ function isUrlRequest(url) {
  */
 module.exports = function (moduleId, options) {
   if (noDocument) {
-    console.log("no window.document found, will not HMR CSS");
+    console.log("[HMR] No `window.document` found, CSS HMR disabled");
 
     return noop;
   }
@@ -274,17 +274,17 @@ module.exports = function (moduleId, options) {
     const reloaded = reloadStyle(src);
 
     if (options.locals) {
-      console.log("[HMR] Detected local css modules. Reload all css");
+      console.log("[HMR] Detected local CSS Modules. Reload all CSS");
 
       reloadAll();
 
       return;
     }
 
     if (reloaded) {
-      console.log("[HMR] css reload %s", src.join(" "));
+      console.log("[HMR] CSS reload %s", src.join(" "));
     } else {
-      console.log("[HMR] Reload all css");
+      console.log("[HMR] Reload all CSS");
 
       reloadAll();
     }

diff --git a/packages/rspack-test-tools/tests/hotCases/css/recovery/__snapshots__/web/2.snap.txt b/packages/rspack-test-tools/tests/hotCases/css/recovery/__snapshots__/web/2.snap.txt
@@ -6,7 +6,7 @@
 ## Asset Files
 - Bundle: bundle.js
 - Manifest: main.LAST_HASH.hot-update.json, size: 28
-- Update: main.LAST_HASH.hot-update.js, size: 7627
+- Update: main.LAST_HASH.hot-update.js, size: 7635
 
 ## Manifest
 
@@ -193,24 +193,24 @@ function isUrlRequest(url) {
 }
 function cssReload(moduleId, options) {
     if (noDocument) {
-        console.log("no window.document found, will not HMR CSS");
+        console.log("[HMR] No `window.document` found, CSS HMR disabled");
         return noop;
     }
     const getScriptSrc = getCurrentScriptUrl(moduleId);
     function update() {
         const src = getScriptSrc(options.filename);
         const reloaded = reloadStyle(src);
         if (options.locals) {
-            console.log("[HMR] Detected local css modules. Reload all css");
+            console.log("[HMR] Detected local CSS Modules. Reload all CSS");
             reloadAll();
             return;
         }
         if (reloaded) {
             // biome-ignore lint/complexity/useOptionalChain: not use optionalChain to support legacy browser
-            console.log("[HMR] css reload %s", src && src.join(" "));
+            console.log("[HMR] CSS reload %s", src && src.join(" "));
         }
         else {
-            console.log("[HMR] Reload all css");
+            console.log("[HMR] Reload all CSS");
             reloadAll();
         }
     }

diff --git a/packages/rspack/src/builtin-plugin/css-extract/hmr/hotModuleReplacement.ts b/packages/rspack/src/builtin-plugin/css-extract/hmr/hotModuleReplacement.ts
@@ -214,7 +214,7 @@ function isUrlRequest(url: string): boolean {
 
 function cssReload(moduleId: string, options: Record<string, any>) {
 	if (noDocument) {
-		console.log("no window.document found, will not HMR CSS");
+		console.log("[HMR] No `window.document` found, CSS HMR disabled");
 
 		return noop;
 	}
@@ -226,7 +226,7 @@ function cssReload(moduleId: string, options: Record<string, any>) {
 		const reloaded = reloadStyle(src);
 
 		if (options.locals) {
-			console.log("[HMR] Detected local css modules. Reload all css");
+			console.log("[HMR] Detected local CSS Modules. Reload all CSS");
 
 			reloadAll();
 
@@ -235,9 +235,9 @@ function cssReload(moduleId: string, options: Record<string, any>) {
 
 		if (reloaded) {
 			// biome-ignore lint/complexity/useOptionalChain: not use optionalChain to support legacy browser
-			console.log("[HMR] css reload %s", src && src.join(" "));
+			console.log("[HMR] CSS reload %s", src && src.join(" "));
 		} else {
-			console.log("[HMR] Reload all css");
+			console.log("[HMR] Reload all CSS");
 
 			reloadAll();
 		}

diff --git a/tests/plugin-test/css-extract/__snapshots__/HMR.test.js.snap b/tests/plugin-test/css-extract/__snapshots__/HMR.test.js.snap
@@ -52,47 +52,47 @@ exports[`HMR hotLoader works for non-locals 1`] = `
   "
 `;
 
-exports[`HMR should handle error event 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should handle error event 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should handle error event 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
-exports[`HMR should reloads with # link href 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should reloads with # link href 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should reloads with # link href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\" href=\\"#href\\">"`;
 
-exports[`HMR should reloads with absolute remove url 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should reloads with absolute remove url 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should reloads with absolute remove url 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"stylesheet\\" href=\\"http://dev.com/dist/main.css\\">"`;
 
-exports[`HMR should reloads with browser extension protocol 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should reloads with browser extension protocol 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should reloads with browser extension protocol 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"stylesheet\\" href=\\"chrome-extension://main.css\\">"`;
 
-exports[`HMR should reloads with link without href 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should reloads with link without href 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should reloads with link without href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\">"`;
 
-exports[`HMR should reloads with locals 1`] = `"[HMR] Detected local css modules. Reload all css"`;
+exports[`HMR should reloads with locals 1`] = `"[HMR] Detected local CSS Modules. Reload all CSS"`;
 
 exports[`HMR should reloads with locals 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
-exports[`HMR should reloads with non http/https link href 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should reloads with non http/https link href 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should reloads with non http/https link href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\" href=\\"data:;base64,=\\">"`;
 
-exports[`HMR should reloads with non-file script in the end of page 1`] = `"[HMR] Reload all css"`;
+exports[`HMR should reloads with non-file script in the end of page 1`] = `"[HMR] Reload all CSS"`;
 
 exports[`HMR should reloads with non-file script in the end of page 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
-exports[`HMR should work reload all css 1`] = `"[HMR] Reload all css"`;
+exports[`HMR should work reload all css 1`] = `"[HMR] Reload all CSS"`;
 
 exports[`HMR should work reload all css 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
-exports[`HMR should works 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should works 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should works 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 
-exports[`HMR should works with multiple updates 1`] = `"[HMR] css reload %s"`;
+exports[`HMR should works with multiple updates 1`] = `"[HMR] CSS reload %s"`;
 
 exports[`HMR should works with multiple updates 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
 

diff --git a/tests/plugin-test/css-extract/cases/hmr-locals/expected/main.js b/tests/plugin-test/css-extract/cases/hmr-locals/expected/main.js
@@ -160,24 +160,24 @@ function isUrlRequest(url) {
 }
 function cssReload(moduleId, options) {
     if (noDocument) {
-        console.log("no window.document found, will not HMR CSS");
+        console.log("[HMR] No `window.document` found, CSS HMR disabled");
         return noop;
     }
     const getScriptSrc = getCurrentScriptUrl(moduleId);
     function update() {
         const src = getScriptSrc(options.filename);
         const reloaded = reloadStyle(src);
         if (options.locals) {
-            console.log("[HMR] Detected local css modules. Reload all css");
+            console.log("[HMR] Detected local CSS Modules. Reload all CSS");
             reloadAll();
             return;
         }
         if (reloaded) {
             // biome-ignore lint/complexity/useOptionalChain: not use optionalChain to support legacy browser
-            console.log("[HMR] css reload %s", src && src.join(" "));
+            console.log("[HMR] CSS reload %s", src && src.join(" "));
         }
         else {
-            console.log("[HMR] Reload all css");
+            console.log("[HMR] Reload all CSS");
             reloadAll();
         }
     }

diff --git a/tests/plugin-test/css-extract/cases/hmr/expected/main.js b/tests/plugin-test/css-extract/cases/hmr/expected/main.js
@@ -160,24 +160,24 @@ function isUrlRequest(url) {
 }
 function cssReload(moduleId, options) {
     if (noDocument) {
-        console.log("no window.document found, will not HMR CSS");
+        console.log("[HMR] No `window.document` found, CSS HMR disabled");
         return noop;
     }
     const getScriptSrc = getCurrentScriptUrl(moduleId);
     function update() {
         const src = getScriptSrc(options.filename);
         const reloaded = reloadStyle(src);
         if (options.locals) {
-            console.log("[HMR] Detected local css modules. Reload all css");
+            console.log("[HMR] Detected local CSS Modules. Reload all CSS");
             reloadAll();
             return;
         }
         if (reloaded) {
             // biome-ignore lint/complexity/useOptionalChain: not use optionalChain to support legacy browser
-            console.log("[HMR] css reload %s", src && src.join(" "));
+            console.log("[HMR] CSS reload %s", src && src.join(" "));
         }
         else {
-            console.log("[HMR] Reload all css");
+            console.log("[HMR] Reload all CSS");
             reloadAll();
         }
     }
suite	result
modernjs	❌ failure
_selftest	✅ success
rspress	✅ success
rslib	✅ success
rsbuild	✅ success
examples	✅ success
devserver	✅ success
Name	Base (2024-10-11 598d44e)	Current	Change
10000_development-mode + exec	2.16 s ± 42 ms	2.17 s ± 38 ms	+0.32 %
10000_development-mode_hmr + exec	682 ms ± 13 ms	682 ms ± 11 ms	+0.03 %
10000_production-mode + exec	2.74 s ± 39 ms	2.75 s ± 36 ms	+0.48 %
arco-pro_development-mode + exec	1.84 s ± 93 ms	1.85 s ± 82 ms	+0.72 %
arco-pro_development-mode_hmr + exec	436 ms ± 6.2 ms	434 ms ± 4.6 ms	-0.38 %
arco-pro_production-mode + exec	3.14 s ± 85 ms	3.12 s ± 79 ms	-0.51 %
arco-pro_production-mode_generate-package-json-webpack-plugin + exec	3.13 s ± 85 ms	3.14 s ± 57 ms	+0.32 %
threejs_development-mode_10x + exec	1.7 s ± 16 ms	1.69 s ± 22 ms	-0.31 %
threejs_development-mode_10x_hmr + exec	802 ms ± 9 ms	803 ms ± 9.3 ms	+0.07 %
threejs_production-mode_10x + exec	5.04 s ± 24 ms	5.04 s ± 23 ms	+0.10 %