chore(deps): update dependency css-loader to v7 (#8024)

* chore(deps): update dependency css-loader to v7 * test: fix failed cases * fix --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: neverland <[email protected]>
web-infra-dev · Dec 28, 2024 · 437c370 · 437c370 · github-actions · Dec 28, 2024
1 parent feee3e1
commit 437c370
Show file tree

Hide file tree

Showing 16 changed files with 80 additions and 35 deletions.
diff --git a/packages/rspack-test-tools/package.json b/packages/rspack-test-tools/package.json
@@ -92,7 +92,7 @@
     "coffeescript": "^2.5.1",
     "copy-webpack-plugin": "5.1.2",
     "core-js": "3.38.1",
-    "css-loader": "^6.11.0",
+    "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
     "html-loader": "^5.0.0",
     "html-webpack-plugin": "^5.5.0",

diff --git a/...ges/rspack-test-tools/tests/configCases/css-loader/css-modules-classname/rspack.config.js b/...ges/rspack-test-tools/tests/configCases/css-loader/css-modules-classname/rspack.config.js
@@ -13,7 +13,9 @@ module.exports = {
 						loader: "css-loader",
 						options: {
 							modules: {
-								localIdentName: "[name]__[local]--[contenthash]"
+								namedExport: false,
+								localIdentName: "[name]__[local]--[contenthash]",
+								exportLocalsConvention: 'camel-case',
 							}
 						}
 					}

diff --git a/packages/rspack-test-tools/tests/hotCases/css/css-extract/rspack.config.js b/packages/rspack-test-tools/tests/hotCases/css/css-extract/rspack.config.js
@@ -17,7 +17,14 @@ module.exports = {
 							esModule: true,
 						}
           },
-          "css-loader",
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                namedExport: false,
+              }
+            }
+          },
 					"./loader.js"
         ]
       },

diff --git a/.../rspack-test-tools/tests/watchCases/build-failed/watch-loader-failed-css/rspack.config.js b/.../rspack-test-tools/tests/watchCases/build-failed/watch-loader-failed-css/rspack.config.js
@@ -15,7 +15,8 @@ module.exports = {
           loader: "css-loader",
           options: {
             modules: {
-              namedExport: true
+              namedExport: true,
+              exportLocalsConvention: 'camel-case-only'
             }
           }
         },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/e2e/package.json b/tests/e2e/package.json
@@ -27,7 +27,7 @@
     "tailwindcss": "^3.3.0",
     "vue": "^3.4.21",
     "vue-loader": "^17.3.1",
-    "css-loader": "^6.11.0",
+    "css-loader": "^7.1.2",
     "webpack-dev-server": "5.0.4",
     "ws": "^8.16.0"
   }

diff --git a/tests/plugin-test/css-extract/cases/es-named-export-output-module/expected/main.mjs b/tests/plugin-test/css-extract/cases/es-named-export-output-module/expected/main.mjs
@@ -2,8 +2,8 @@ var __webpack_modules__ = ({
 "./style.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-  aClass: function() { return _1; },
-  bClass: function() { return _2; },
+  "a-class": function() { return _1; },
+  b__class: function() { return _2; },
   cClass: function() { return _3; }
 });
 // extracted by css-extract-rspack-plugin

diff --git a/tests/plugin-test/css-extract/cases/export-only-locals-and-es-named-export/expected/main.js b/tests/plugin-test/css-extract/cases/export-only-locals-and-es-named-export/expected/main.js
@@ -4,8 +4,8 @@ var __webpack_modules__ = ({
 "./style.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-  aClass: function() { return _1; },
-  bClass: function() { return _2; },
+  "a-class": function() { return _1; },
+  b__class: function() { return _2; },
   cClass: function() { return _3; }
 });
 // extracted by css-extract-rspack-plugin

diff --git a/tests/plugin-test/css-extract/cases/export-only-locals/expected/main.js b/tests/plugin-test/css-extract/cases/export-only-locals/expected/main.js
@@ -3,7 +3,16 @@
 var __webpack_modules__ = ({
 "./style.css": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 __webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+  aClass: function() { return _1; },
+  bClass: function() { return _2; },
+  cClass: function() { return _3; }
+});
 // extracted by css-extract-rspack-plugin
+var _1 = "foo__style__a-class";
+var _2 = "foo__style__b__class";
+var _3 = "foo__style__cClass";
+
 
 
 }),
@@ -34,6 +43,23 @@ return module.exports;
 }
 
 /************************************************************************/
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = function(exports, definition) {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = function (obj, prop) {
+	return Object.prototype.hasOwnProperty.call(obj, prop);
+};
+
+})();
 // webpack/runtime/make_namespace_object
 (() => {
 // define __esModule on exports

diff --git a/tests/plugin-test/css-extract/cases/export-only-locals/webpack.config.js b/tests/plugin-test/css-extract/cases/export-only-locals/webpack.config.js
@@ -16,6 +16,7 @@ module.exports = {
 						options: {
 							modules: {
 								localIdentName: "foo__[name]__[local]",
+								exportLocalsConvention: 'camel-case-only',
 								exportOnlyLocals: true
 							}
 						}

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
@@ -229,10 +229,12 @@ function cssReload(moduleId, options) {
 "./index.css": (function (module, __webpack_exports__, __webpack_require__) {
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-  "default": function() { return __WEBPACK_DEFAULT_EXPORT__; }
+  x: function() { return _1; }
 });
 // extracted by css-extract-rspack-plugin
-/* ESM default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"x":"VoofDB21D_QzDbRdwMiY"});
+var _1 = "VoofDB21D_QzDbRdwMiY";
+
+
     if(true) {
       (function() {
         var localsJsonString = "{\"x\":\"VoofDB21D_QzDbRdwMiY\"}";

diff --git a/tests/plugin-test/css-extract/cases/pathinfo-devtool-source-map/expected/main.css b/tests/plugin-test/css-extract/cases/pathinfo-devtool-source-map/expected/main.css
diff --git a/tests/plugin-test/css-extract/cases/pathinfo/expected/main.css b/tests/plugin-test/css-extract/cases/pathinfo/expected/main.css
@@ -1,19 +1,19 @@
 /*!**********************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../../../../node_modules/.pnpm/css-loader@6.11.0_@rspack+core@[email protected]_@[email protected]_@swc+helpers@0_aku7xtrc3x5l3vpfenkieaz5om/node_modules/css-loader/dist/cjs.js!./style.css ***!
+  !*** css ../../../../../node_modules/.pnpm/css-loader@7.1.2_@rspack+core@[email protected]_@[email protected]_@swc+helpers@0._sroe7k2leveebxngymnh5tghna/node_modules/css-loader/dist/cjs.js!./style.css ***!
   \**********************************************************************************************************************************************************************************************************************/
 body {
   background: red;
 }
 
 /*!**********************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../../../../node_modules/.pnpm/css-loader@6.11.0_@rspack+core@[email protected]_@[email protected]_@swc+helpers@0_aku7xtrc3x5l3vpfenkieaz5om/node_modules/css-loader/dist/cjs.js!./other.css ***!
+  !*** css ../../../../../node_modules/.pnpm/css-loader@7.1.2_@rspack+core@[email protected]_@[email protected]_@swc+helpers@0._sroe7k2leveebxngymnh5tghna/node_modules/css-loader/dist/cjs.js!./other.css ***!
   \**********************************************************************************************************************************************************************************************************************/
 body {
   background: blue;
 }
 
 /*!**********************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../../../../node_modules/.pnpm/css-loader@6.11.0_@rspack+core@[email protected]_@[email protected]_@swc+helpers@0_aku7xtrc3x5l3vpfenkieaz5om/node_modules/css-loader/dist/cjs.js!./extra.css ***!
+  !*** css ../../../../../node_modules/.pnpm/css-loader@7.1.2_@rspack+core@[email protected]_@[email protected]_@swc+helpers@0._sroe7k2leveebxngymnh5tghna/node_modules/css-loader/dist/cjs.js!./extra.css ***!
   \**********************************************************************************************************************************************************************************************************************/
 body {
   background: yellow;

diff --git a/tests/plugin-test/css-extract/emitOption.test.js b/tests/plugin-test/css-extract/emitOption.test.js
@@ -120,7 +120,10 @@ describe("emit option", () => {
 								{
 									loader: "css-loader",
 									options: {
-										modules: true
+										modules: {
+											namedExport: false,
+											exportLocalsConvention: "as-is"
+										}
 									}
 								}
 							]
@@ -190,7 +193,10 @@ describe("emit option", () => {
 							{
 								loader: "css-loader",
 								options: {
-									modules: true
+									modules: {
+										namedExport: false,
+										exportLocalsConvention: "as-is"
+									}
 								}
 							}
 						]

diff --git a/tests/plugin-test/package.json b/tests/plugin-test/package.json
@@ -13,7 +13,7 @@
     "@rspack/core": "workspace:*",
     "@swc/core": "1.10.1",
     "@swc/jest": "^0.2.37",
-    "css-loader": "^6.11.0",
+    "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
     "html-loader": "2.1.1",
     "pug-loader": "2.4.0",

diff --git a/tests/webpack-examples/package.json b/tests/webpack-examples/package.json
@@ -19,7 +19,7 @@
     "coffee-loader": "^1.0.0",
     "coffeescript": "^2.5.1",
     "@babel/preset-react": "^7.22.15",
-    "css-loader": "^6.11.0",
+    "css-loader": "^7.1.2",
     "style-loader": "^4.0.0",
     "wast-loader": "^1.12.1"
   }
Name	Base (2024-12-28 6891072)	Current	Change
10000_big_production-mode_disable-minimize + exec	37.9 s ± 510 ms	38.5 s ± 730 ms	+1.41 %
10000_development-mode + exec	1.89 s ± 26 ms	1.86 s ± 18 ms	-1.84 %
10000_development-mode_hmr + exec	676 ms ± 9 ms	687 ms ± 36 ms	+1.61 %
10000_production-mode + exec	2.52 s ± 26 ms	2.52 s ± 105 ms	+0.12 %
arco-pro_development-mode + exec	1.76 s ± 67 ms	1.78 s ± 80 ms	+0.71 %
arco-pro_development-mode_hmr + exec	376 ms ± 1 ms	377 ms ± 1.5 ms	+0.44 %
arco-pro_production-mode + exec	3.63 s ± 128 ms	3.54 s ± 91 ms	-2.71 %
arco-pro_production-mode_generate-package-json-webpack-plugin + exec	3.65 s ± 101 ms	3.63 s ± 120 ms	-0.57 %
arco-pro_production-mode_traverse-chunk-modules + exec	3.62 s ± 106 ms	3.58 s ± 85 ms	-1.15 %
threejs_development-mode_10x + exec	1.52 s ± 18 ms	1.5 s ± 22 ms	-1.33 %
threejs_development-mode_10x_hmr + exec	790 ms ± 15 ms	774 ms ± 17 ms	-2.12 %
threejs_production-mode_10x + exec	5.37 s ± 79 ms	5.37 s ± 85 ms	-0.07 %
10000_big_production-mode_disable-minimize + rss memory	9559 MiB ± 291 MiB	9714 MiB ± 464 MiB	+1.61 %
10000_development-mode + rss memory	649 MiB ± 14.4 MiB	649 MiB ± 11.2 MiB	+0.05 %
10000_development-mode_hmr + rss memory	1425 MiB ± 367 MiB	1407 MiB ± 403 MiB	-1.24 %
10000_production-mode + rss memory	621 MiB ± 22 MiB	628 MiB ± 15.3 MiB	+1.15 %
arco-pro_development-mode + rss memory	590 MiB ± 24.3 MiB	573 MiB ± 40.2 MiB	-2.87 %
arco-pro_development-mode_hmr + rss memory	641 MiB ± 125 MiB	604 MiB ± 52.5 MiB	-5.88 %
arco-pro_production-mode + rss memory	756 MiB ± 45.1 MiB	709 MiB ± 27.7 MiB	-6.29 %
arco-pro_production-mode_generate-package-json-webpack-plugin + rss memory	781 MiB ± 67.7 MiB	702 MiB ± 45.3 MiB	-10.10 %
arco-pro_production-mode_traverse-chunk-modules + rss memory	763 MiB ± 31.2 MiB	709 MiB ± 50.6 MiB	-7.07 %
threejs_development-mode_10x + rss memory	668 MiB ± 35.2 MiB	563 MiB ± 24.5 MiB	-15.77 %
threejs_development-mode_10x_hmr + rss memory	1181 MiB ± 249 MiB	1118 MiB ± 147 MiB	-5.41 %
threejs_production-mode_10x + rss memory	930 MiB ± 63.6 MiB	851 MiB ± 34 MiB	-8.47 %