build: fix CSS source-map for postcss >= 8.4.33 (#7354)

Перенос изменений беты [v5.10.1-beta.1](https://www.npmjs.com/package/@vkontakte/vkui/v/5.10.1-beta.1) (см. [comparing changes](5.10-stable...imirdzhamolov/tech/v5.10.1-beta.1/fix-css-source-map)). > [!NOTE] > > `v5.10.1-beta.1` публиковал из ветки `imirdzhamolov/tech/v5.10.1-beta.1/fix-css-source-map` --- - related to #7034
VKCOM · Aug 9, 2024 · 628bb59 · 628bb59
1 parent 5993a1e
commit 628bb59
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.2",
     "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "cssnano": "^6.0.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.45.0",

diff --git a/packages/vkui/scripts/postcss.js b/packages/vkui/scripts/postcss.js
@@ -11,20 +11,35 @@ const { VKUI_PACKAGE, VKUI_TOKENS_CSS, generateScopedName } = require('../../../
 
 const rootDirectory = path.join(__dirname, '../../..');
 
+function getMinimizerOptions(isVKUIPackageBuild = false) {
+  return {
+    // Отключаем из-за того, что `postcss-calc` меняет порядок операндов при умножении -1 на переменную
+    // Подробности здесь https://github.com/VKCOM/VKUI/issues/2963
+    calc: false,
+    // Включаем если собираем пакет @vkontakte/vkui.
+    // В остальных кейсах пустые CSS блоки удаляются раньше, чем их обработает
+    // `css-loader` с настройками для CSS Modules.
+    // Подробности здесь https://github.com/webpack-contrib/css-loader/issues/266
+    discardEmpty: isVKUIPackageBuild,
+  };
+}
+
 /**
  * Конфигурация postcss плагинов
  * @param {Object} config - Конфигурация.
  * @param {boolean | undefined} config.isVKUIPackageBuild - Сборка пакета.
  * @param {boolean | undefined} config.isProduction - Продакшн сборка.
  * @param {boolean | undefined} config.isCssModulesFile - Сборка module.css файлов.
  * @param {boolean | undefined} config.isESNext - Отдельная сборка cssm.
+ * @param {boolean | undefined} config.disableMinimizer - Отключает cssnano.
  * @returns {import('postcss').Plugin[]}
  */
 function makePostcssPlugins({
   isVKUIPackageBuild = false,
   isProduction = process.env.NODE_ENV === 'production',
   isCssModulesFile = false,
   isESNext = false,
+  disableMinimizer = false,
 } = {}) {
   const plugins = [
     // Обработка css импортов
@@ -72,22 +87,10 @@ function makePostcssPlugins({
   }
 
   // Уменьшение размера для продакшен сборки
-  if (isProduction && !isESNext) {
+  if (!disableMinimizer && isProduction && !isESNext) {
     plugins.push(
       cssnano({
-        preset: [
-          'default',
-          {
-            // Отключаем из-за того, что `postcss-calc` меняет порядок операндов при умножении -1 на переменную
-            // Подробности здесь https://github.com/VKCOM/VKUI/issues/2963
-            calc: false,
-            // Включаем если собираем пакет @vkontakte/vkui.
-            // В остальных кейсах пустые CSS блоки удаляются раньше, чем их обработает
-            // `css-loader` с настройками для CSS Modules.
-            // Подробности здесь https://github.com/webpack-contrib/css-loader/issues/266
-            discardEmpty: isVKUIPackageBuild,
-          },
-        ],
+        preset: ['default', getMinimizerOptions(isVKUIPackageBuild)],
       }),
     );
   }
@@ -96,5 +99,6 @@ function makePostcssPlugins({
 }
 
 module.exports = {
+  getMinimizerOptions,
   makePostcssPlugins,
 };
diff --git a/packages/vkui/webpack.styles.config.js b/packages/vkui/webpack.styles.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { makePostcssPlugins } = require('./scripts/postcss');
+const { getMinimizerOptions, makePostcssPlugins } = require('./scripts/postcss');
 
 /**
  * Конфигурация для css
@@ -20,18 +21,22 @@ function makeCssRuleUse({ isCssModulesFile = false } = {}) {
       loader: 'postcss-loader',
       options: {
         postcssOptions: {
-          plugins: makePostcssPlugins({ isVKUIPackageBuild: true, isCssModulesFile }),
+          plugins: makePostcssPlugins({
+            isVKUIPackageBuild: true,
+            isCssModulesFile,
+            disableMinimizer: true,
+          }),
         },
       },
     },
   ];
 }
 
+/** @type {import('webpack').Configuration} */
 module.exports = {
-  // CSS is optimized via postcss, we dont care about JS
-  mode: 'none',
+  mode: 'production',
   entry: {
-    stable: ['./src/styles/themes.css', './src/index.ts'],
+    vkui: ['./src/styles/themes.css', './src/index.ts'],
     components: './src/index.ts',
   },
   output: {
@@ -41,6 +46,7 @@ module.exports = {
   module: {
     rules: [
       {
+        sideEffects: true,
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         loader: 'swc-loader',
@@ -70,22 +76,20 @@ module.exports = {
       },
     ],
   },
-  optimization: {
-    splitChunks: {
-      chunks: (chunk) => ['stable'].includes(chunk.name),
-      cacheGroups: {
-        // capture all common deps
-        vkui: {
-          name: 'vkui',
-          test: (module, { chunkGraph }) =>
-            chunkGraph.getModuleChunks(module).some((chunk) => chunk.name === 'stable'),
-        },
-      },
-    },
-  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
   },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      '...',
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: ['default', getMinimizerOptions(true)],
+        },
+      }),
+    ],
+  },
   devtool: 'source-map',
   plugins: [new MiniCssExtractPlugin({ filename: '[name].css' })],
   stats: {

diff --git a/yarn.lock b/yarn.lock
@@ -5508,6 +5508,7 @@ __metadata:
     concurrently: ^8.2.2
     cross-env: ^7.0.2
     css-loader: ^6.8.1
+    css-minimizer-webpack-plugin: ^5.0.1
     cssnano: ^6.0.1
     dotenv: ^16.3.1
     eslint: ^8.45.0