feat: use rspack

VKCOM · Jul 28, 2024 · 6bfb0d0 · 6bfb0d0
1 parent 08c49b6
commit 6bfb0d0
Show file tree

Hide file tree

Showing 6 changed files with 674 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "@csstools/postcss-global-data": "2.1.1",
     "@playwright/experimental-ct-react": "1.45.1",
     "@playwright/test": "1.45.1",
+    "@rspack/cli": "^v1.0.0-beta.0",
+    "@rspack/core": "^v1.0.0-beta.0",
     "@size-limit/file": "^11.1.4",
     "@size-limit/webpack": "^11.1.4",
     "@size-limit/webpack-css": "^11.1.4",
@@ -35,6 +37,7 @@
     "@vkontakte/stylelint-config": "^4.1.0",
     "@vkontakte/vkui-tokens": "4.49.0",
     "autoprefixer": "^10.4.19",
+    "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.10.0",

diff --git a/packages/vkui/package.json b/packages/vkui/package.json
@@ -41,7 +41,7 @@
     "clear": "yarn run -T shx rm -rf dist/*",
     "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",
@@ -74,7 +74,8 @@
     "mitt": "^3.0.1"
   },
   "devDependencies": {
-    "storybook": "8.2.5"
+    "storybook": "8.2.5",
+    "ts-node": "^10.9.2"
   },
   "size-limit": [
     {

diff --git a/packages/vkui/webpack.styles.config.js → packages/vkui/rspack.styles.config.ts b/packages/vkui/webpack.styles.config.js → packages/vkui/rspack.styles.config.ts
@@ -1,16 +1,21 @@
-const path = require('path');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { getMinimizerOptions, makePostcssPlugins } = require('./scripts/postcss');
+import path from 'node:path';
+import rspack, { type Configuration, type RspackPluginInstance } from '@rspack/core';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import { makePostcssPlugins } from './scripts/postcss';
+
+interface MakeCssRuleUseOptions {
+  /**
+   * Флаг для определения сборки css модулей
+   */
+  isCssModulesFile?: boolean;
+}
 
 /**
  * Конфигурация для css
- * @param {Object} config - Конфигурация.
- * @param {boolean | undefined} config.isCssModulesFile - Сборка module.css файлов.
  */
-function makeCssRuleUse({ isCssModulesFile = false } = {}) {
+function makeCssRuleUse({ isCssModulesFile = false }: MakeCssRuleUseOptions = {}) {
   return [
-    MiniCssExtractPlugin.loader,
+    rspack.CssExtractRspackPlugin.loader,
     {
       loader: 'css-loader',
       options: {
@@ -28,8 +33,7 @@ function makeCssRuleUse({ isCssModulesFile = false } = {}) {
   ];
 }
 
-/** @type {import('webpack').Configuration} */
-module.exports = {
+const config: Configuration = {
   mode: 'production',
   entry: {
     vkui: ['./src/styles/themes.css', './src/index.ts'],
@@ -45,7 +49,7 @@ module.exports = {
         sideEffects: true,
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
-        loader: 'swc-loader',
+        loader: 'builtin:swc-loader',
         options: {
           jsc: {
             experimental: {
@@ -65,26 +69,40 @@ module.exports = {
         test: /\.css$/,
         exclude: /\.module\.css$/,
         use: makeCssRuleUse(),
+        type: 'javascript/auto',
       },
       {
         test: /\.module\.css$/,
         use: makeCssRuleUse({ isCssModulesFile: true }),
+        type: 'javascript/auto',
       },
     ],
   },
   optimization: {
     minimize: true,
-    minimizer: ['...', new CssMinimizerPlugin({ minimizerOptions: getMinimizerOptions(true) })],
+    minimizer: ['...', new rspack.SwcCssMinimizerRspackPlugin()],
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
   },
   devtool: 'source-map',
-  plugins: [new MiniCssExtractPlugin({ filename: '[name].css' })],
+  plugins: [
+    new rspack.CssExtractRspackPlugin({ filename: '[name].css' }),
+    new CleanWebpackPlugin({
+      protectWebpackAssets: false,
+      cleanAfterEveryBuildPatterns: ['*.tmp', '*.tmp.*'],
+    }) as unknown as RspackPluginInstance,
+  ],
   stats: {
     all: false,
     assets: true,
     errors: true,
     warnings: true,
   },
+  experiments: {
+    css: false,
+  },
 };
+
+// eslint-disable-next-line import/no-default-export -- rspack-у нужен дефолтный экспорт
+export default config;
diff --git a/packages/vkui/scripts/postcss.d.ts b/packages/vkui/scripts/postcss.d.ts
@@ -1,12 +1,12 @@
 import 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[];
diff --git a/packages/vkui/tsconfig.json b/packages/vkui/tsconfig.json
@@ -31,7 +31,8 @@
     "playwright/index.tsx",
     "scripts/*.js",
     "scripts/*.mjs",
-    "./jest.setup.ts"
+    "./jest.setup.ts",
+    "*.config.ts"
   ],
   "files": ["./global.d.ts", "types/env.d.ts"]
 }