From e99709d1af9d96e852a63b9028f15428cebf42cb Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Fri, 27 Sep 2024 13:16:42 +0300
Subject: [PATCH] build(dev-deps): Bump css-loader from 6.10.0 to 7.1.2 (#7668)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- [x] Тест
  - [x] Сравнил `packages/vkui/dist/` в `master` и в `imirdzhamolov/issue6805/tech/css-loader-v7` – без изменений
  - [x] Локально проверил0 документации **Styleguide** и **Storybook** – стили не поехали

h2. Описание

С `v7.0.0` по умолчанию используется именованный экспорт CSS-модулей, поэтому отключил это поведение через опцию `namedExport: false` (см. подробнее в релиз ноуте https://github.com/webpack-contrib/css-loader/blob/v7.1.0/CHANGELOG.md). Расширил документацию `styleguide/pages/css_modules.md` на эту тему.

Также, для подстраховки, явно выставил `modules: false` там, где не нужны CSS-модули.

h2. Release notes

h2. Документация

- Раздел **CSS Modules** дополнен информацией про использование пакета с `'css-loader' >= 7.0.0`.
---
 benchmark/runtime/webpack.config.mjs | 4 ++--
 package.json                         | 2 +-
 styleguide/pages/css_modules.md      | 9 ++++++++-
 webpack.common.config.js             | 6 +++++-
 yarn.lock                            | 2 +-
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/benchmark/runtime/webpack.config.mjs b/benchmark/runtime/webpack.config.mjs
index a545fd5ed0..442e1dd2d6 100644
--- a/benchmark/runtime/webpack.config.mjs
+++ b/benchmark/runtime/webpack.config.mjs
@@ -77,7 +77,7 @@ const webpackConfig = {
       {
         test: /\.css$/i,
         exclude: /node_modules/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: false } }],
       },
       {
         test: /\.module.css$/,
@@ -86,7 +86,7 @@ const webpackConfig = {
           MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
-            options: { importLoaders: 1 },
+            options: { modules: false, importLoaders: 1 },
           },
           {
             loader: 'postcss-loader',
diff --git a/package.json b/package.json
index 5187eab340..3a377164b9 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "autoprefixer": "^10.4.20",
     "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.10.0",
+    "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "cssnano": "^7.0.6",
     "dotenv": "^16.4.5",
diff --git a/styleguide/pages/css_modules.md b/styleguide/pages/css_modules.md
index 931f6bab2c..41828ff0cb 100644
--- a/styleguide/pages/css_modules.md
+++ b/styleguide/pages/css_modules.md
@@ -83,7 +83,14 @@ module.exports = {
       {
         test: /\.css$/,
         include: /node_modules\/@vkontakte\/vkui/,
-        use: ['css-loader'],
+        use: [{
+          loader: 'css-loader',
+          /* Используем следующие опции в случае использования `css-loader >= 7.0.0` (см. https://github.com/webpack-contrib/css-loader/blob/v7.1.0/CHANGELOG.md) */
+          // options: {
+          //   namedExport: false,
+          //   exportLocalsConvention: 'as-is',
+          // }
+        ],
       },
     ],
   },
diff --git a/webpack.common.config.js b/webpack.common.config.js
index 64f106691d..c657b39bd0 100644
--- a/webpack.common.config.js
+++ b/webpack.common.config.js
@@ -49,7 +49,7 @@ const rules = [
     exclude: sandbox ? new RegExp(`${sandbox}|\\.module\\.css$`) : /\.module\.css$/,
     use: [
       styleLoader,
-      'css-loader',
+      { loader: 'css-loader', options: { modules: false } },
       {
         loader: 'postcss-loader',
         options: {
@@ -69,6 +69,9 @@ const rules = [
         loader: 'css-loader',
         options: {
           modules: {
+            // см. https://github.com/webpack-contrib/css-loader/blob/v7.1.0/CHANGELOG.md
+            namedExport: false,
+            exportLocalsConvention: 'as-is',
             localIdentName: '[folder]__[local]--[hash:base64:5]',
           },
         },
@@ -94,6 +97,7 @@ if (sandbox) {
       {
         loader: 'css-loader',
         options: {
+          modules: false,
           importLoaders: 1,
         },
       },
diff --git a/yarn.lock b/yarn.lock
index 035a03b364..3e419bef68 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3783,7 +3783,7 @@ __metadata:
     autoprefixer: "npm:^10.4.20"
     concurrently: "npm:^9.0.1"
     cross-env: "npm:^7.0.3"
-    css-loader: "npm:^6.10.0"
+    css-loader: "npm:^7.1.2"
     css-minimizer-webpack-plugin: "npm:^7.0.0"
     cssnano: "npm:^7.0.6"
     dotenv: "npm:^16.4.5"