build(css): fix source-map generated by webpack

package.json

@@ -38,6 +38,7 @@
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "cssnano": "^7.0.2",
     "dotenv": "^16.4.5",
     "eslint": "^8.56.0",

packages/vkui/scripts/postcss.js

@@ -12,13 +12,32 @@ const { VKUI_PACKAGE, VKUI_TOKENS_CSS, generateScopedName } = require('../../../
 
 const rootDirectory = path.join(__dirname, '../../..');
 
+function getMinimizerOptions(isVKUIPackageBuild = false) {
+  return {
+    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,
+      },
+    ],
+  };
+}
+
 /**
  * Конфигурация 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({
@@ -27,6 +46,7 @@ function makePostcssPlugins({
   isCssModulesFile = false,
   isESNext = false,
   isStorybook = process.env.SANDBOX === '.storybook',
+  disableMinimizer = false,
 } = {}) {
   const plugins = [
     // Обработка css импортов
@@ -78,29 +98,14 @@ function makePostcssPlugins({
   }
 
   // Уменьшение размера для продакшен сборки
-  if (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,
-          },
-        ],
-      }),
-    );
+  if (!disableMinimizer && isProduction && !isESNext) {
+    plugins.push(cssnano(getMinimizerOptions(isVKUIPackageBuild)));
   }
 
   return plugins;
 }
 
 module.exports = {
+  getMinimizerOptions,
   makePostcssPlugins,
 };

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
@@ -27,11 +28,11 @@ function makeCssRuleUse({ isCssModulesFile = false } = {}) {
   ];
 }
 
+/** @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 +42,7 @@ module.exports = {
   module: {
     rules: [
       {
+        sideEffects: true,
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         loader: 'swc-loader',
@@ -71,17 +73,8 @@ 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'),
-        },
-      },
-    },
+    minimize: true,
+    minimizer: ['...', new CssMinimizerPlugin({ minimizerOptions: getMinimizerOptions(true) })],
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],

yarn.lock

@@ -5336,6 +5336,7 @@ __metadata:
     concurrently: ^8.2.2
     cross-env: ^7.0.3
     css-loader: ^6.10.0
+    css-minimizer-webpack-plugin: ^7.0.0
     cssnano: ^7.0.2
     dotenv: ^16.4.5
     eslint: ^8.56.0