feat: use rspack (#7249)

package.json

@@ -13,6 +13,8 @@
     "@csstools/postcss-global-data": "3.0.0",
     "@playwright/experimental-ct-react": "1.48.1",
     "@playwright/test": "1.48.1",
+    "@rspack/cli": "^v1.0.11",
+    "@rspack/core": "^v1.0.11",
     "@size-limit/file": "^11.1.6",
     "@size-limit/webpack": "^11.1.6",
     "@size-limit/webpack-css": "^11.1.6",
@@ -36,6 +38,7 @@
     "@vkontakte/stylelint-config": "^4.1.0",
     "@vkontakte/vkui-tokens": "4.55.0",
     "autoprefixer": "^10.4.20",
+    "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^9.0.1",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",

packages/vkui/package.json

@@ -54,7 +54,7 @@
     "clear": "yarn run -T shx rm -rf dist/* || yarn run -T shx true",
     "docker:clear-playwright-cache": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm vkui_package_vkui_playwright_cache",
     "postcss": "yarn run -T cross-env NODE_ENV=production concurrently 'yarn:postcss:*'",
-    "postcss:bundle": "yarn run -T webpack --config webpack.styles.config.js",
+    "postcss:bundle": "yarn run -T rspack --config rspack.styles.config.ts",
     "postcss:modules": "yarn run -T postcss './src/**/*.css' --base ./src --dir ./dist/cssm --config ./cssm",
     "swc-base": "yarn run -T cross-env NODE_ENV=production swc src/ --config-file package.swcrc --extensions .tsx,.jsx,.ts,.js --strip-leading-paths",
     "swc:es6": "yarn swc-base -d dist -s",
@@ -85,6 +85,7 @@
   "devDependencies": {
     "@storybook/react": "8.3.6",
     "@storybook/react-webpack5": "8.3.6",
+    "@types/node": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "8.3.6",

packages/vkui/rspack.styles.config.ts

@@ -0,0 +1,113 @@
+import path from 'node:path';
+import rspack, { type Configuration, type RspackPluginInstance } from '@rspack/core';
+import browserslist from 'browserslist';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import { makePostcssPlugins } from './scripts/postcss';
+
+const rootDirectory = path.join(__dirname, '../../');
+const browser = browserslist.readConfig(path.join(rootDirectory, '.browserslistrc'));
+
+interface MakeCssRuleUseOptions {
+  /**
+   * Флаг для определения сборки css модулей
+   */
+  isCssModulesFile?: boolean;
+}
+
+/**
+ * Конфигурация для css
+ */
+function makeCssRuleUse({ isCssModulesFile = false }: MakeCssRuleUseOptions = {}) {
+  return [
+    {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          plugins: makePostcssPlugins({ isVKUIPackageBuild: true, isCssModulesFile }),
+        },
+      },
+    },
+  ];
+}
+
+const config: Configuration = {
+  mode: 'production',
+  entry: {
+    vkui: ['./src/styles/themes.css', './src/index.ts'],
+    components: './src/index.ts',
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js.tmp',
+    cssFilename: '[name].css',
+  },
+  module: {
+    rules: [
+      {
+        sideEffects: true,
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            experimental: {
+              plugins: [
+                [
+                  'swc-plugin-css-modules',
+                  {
+                    generate_scoped_name: 'vkui[folder]_[local]',
+                  },
+                ],
+              ],
+            },
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: makeCssRuleUse(),
+        type: 'css',
+      },
+      {
+        test: /\.module\.css$/,
+        use: makeCssRuleUse({ isCssModulesFile: true }),
+        type: 'css',
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new rspack.LightningCssMinimizerRspackPlugin({
+        minimizerOptions: {
+          targets: browser.defaults,
+        },
+      }),
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
+  },
+  devtool: 'source-map',
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanStaleWebpackAssets: false,
+      protectWebpackAssets: false,
+      cleanOnceBeforeBuildPatterns: [],
+      cleanAfterEveryBuildPatterns: ['*.tmp', '*.tmp.*'],
+    }) as unknown as RspackPluginInstance,
+  ],
+  stats: {
+    all: false,
+    assets: true,
+    errors: true,
+    warnings: true,
+  },
+  experiments: {
+    css: true,
+  },
+};
+
+// eslint-disable-next-line import/no-default-export -- rspack-у нужен дефолтный экспорт
+export default config;

packages/vkui/scripts/postcss.d.ts

@@ -1,12 +1,12 @@
 import type postcss from 'postcss';
 
 interface MakePostcssPluginsOptions {
-  isVKUIPackageBuild: boolean;
-  isProduction: boolean;
-  isCssModulesFile: boolean;
-  isESNext: boolean;
-  isStorybook: boolean;
-  disableMinimizer: boolean;
+  isVKUIPackageBuild?: boolean;
+  isProduction?: boolean;
+  isCssModulesFile?: boolean;
+  isESNext?: boolean;
+  isStorybook?: boolean;
+  disableMinimizer?: boolean;
 }
 
 export function makePostcssPlugins(options?: MakePostcssPluginsOptions): postcss.AcceptedPlugin[];

packages/vkui/tsconfig.json

@@ -31,7 +31,8 @@
     "playwright/index.tsx",
     "scripts/*.js",
     "scripts/*.mjs",
-    "./jest.*.ts"
+    "./jest.*.ts",
+    "*.config.ts"
   ],
   "files": ["./global.d.ts", "types/env.d.ts"]
 }