Merge branch 'release'

content/start/changelog/index-en-US.md

@@ -15,6 +15,14 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 -   **Patch version**: Only include bug fix, the release time is not limited
 
 ---
+#### 🎉 2.55.0-beta.0 (2024-03-18)
+- 【Fix】
+    - fix TabBar rendering as empty in SSR [@nekocode](https://github.com/nekocode)
+    - Fixed the problem that Transfer failed to drag during fast drag due to Sortable's default drag sensing delay time being too long.
+    - Fixed the problem of openKeys not saving the last state after Nav changed selectedKeys (Affects v2.54.1)  [#2115](https://github.com/DouyinFE/semi-design/issues/2115)
+- 【Chore】
+    - Upgraded webpack and rspack build plug-ins to support consuming custom css configuration configured in Semi DSM, which can be used to aggregate overridden CSS or any css unrelated to Semi components into theme package styles
+  
 #### 🎉 2.54.1 (2024-03-11)
 - 【Fix】
     - fixed Navigation component selectedKeys bug in react 17

content/start/changelog/index.md

@@ -13,6 +13,15 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   修订版本号（patch）：仅会进行 bugfix，发布时间不限
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
+
+#### 🎉 2.55.0-beta.0 (2024-03-18)
+- 【Fix】
+    - 修复 TabBar 在 SSR 时渲染为空 [@nekocode](https://github.com/nekocode)
+    - 修复由于 Sortable 的默认拖拽感应延迟时间过长导致 Transfer 在快速拖动时拖拽不成功问题
+    - 修复 Nav 在 selectedKeys 变化后 openKeys 未保存上一次状态问题（影响 v2.54.1）[#2115](https://github.com/DouyinFE/semi-design/issues/2115)
+- 【Chore】
+    - 升级 webpack、rspack构建插件，支持消费在 Semi DSM 中配置的自定义 css 配置，可用于将覆写的 CSS 或任意与 Semi 组件无关的 css 聚进主题包样式
+
 #### 🎉 2.54.1 (2024-03-11)
 - 【Fix】
     - 修复 Navigation 组件在 react 17 下 selectedKeys 未生效问题

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.54.1"
+    "version": "2.55.0-beta.0"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-react",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "motion library for semi-ui-react",
     "keywords": [
         "motion",
@@ -25,8 +25,8 @@
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.54.1",
-        "@douyinfe/semi-animation-styled": "2.54.1",
+        "@douyinfe/semi-animation": "2.55.0-beta.0",
+        "@douyinfe/semi-animation-styled": "2.55.0-beta.0",
         "classnames": "^2.2.6"
     },
     "devDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-styled",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "semi styled animation",
     "keywords": [
         "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "animation base library for semi-ui",
     "keywords": [
         "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-semi-design",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-foundation/descriptions/foundation.ts

@@ -1,6 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 
-export interface DescriptionsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {}
+export interface DescriptionsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getColumns: () => any[]
+}
 
 export default class DescriptionsFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<DescriptionsAdapter<P, S>, P, S> {
     constructor(adapter: DescriptionsAdapter<P, S>) {
@@ -9,16 +11,7 @@ export default class DescriptionsFoundation<P = Record<string, any>, S = Record<
 
     getHorizontalList() {
         const { column, data, children } = this.getProps();
-        let columns;
-        if (data?.length) {
-            columns = data || [];
-        } else {
-            columns =
-                children?.map(item => ({
-                    value: item.props.children,
-                    ...item.props,
-                })) || [];
-        }
+        const columns = this._adapter.getColumns();
         const horizontalList = [];
         const curSpan = { totalSpan: 0, itemList: [] };
         for (const item of columns) {
@@ -30,7 +23,19 @@ export default class DescriptionsFoundation<P = Record<string, any>, S = Record<
                 curSpan.totalSpan = 0;
             }
         }
-        if (curSpan.itemList.length != 0) horizontalList.push(curSpan.itemList);
+        if (curSpan.itemList.length != 0) {
+            const lastSpan = curSpan.itemList[curSpan.itemList.length - 1];
+            if (isNaN(lastSpan.span)) {
+                let total = 0;
+                curSpan.itemList.forEach(item=>{
+                    return total += !isNaN(item.span)?item.span:1;
+                });
+                if (total < column) {
+                    lastSpan.span = column - total + 1;
+                }
+            }
+            horizontalList.push(curSpan.itemList);
+        }
         return horizontalList;
     }
 }

packages/semi-foundation/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.54.1",
+        "@douyinfe/semi-animation": "2.55.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",

packages/semi-icons-lab/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons-lab",
-  "version": "2.54.1",
+  "version": "2.55.0-beta.0",
   "description": "semi icons lab",
   "keywords": [
     "semi",

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-icons",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "semi icons",
     "keywords": [
         "semi",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-illustrations",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "semi illustrations",
     "keywords": [
         "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.54.1"
+        "@douyinfe/semi-webpack-plugin": "2.55.0-beta.0"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-rspack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-rspack-plugin",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "",
     "homepage": "",
     "license": "MIT",

packages/semi-rspack/src/componentName.ts

@@ -0,0 +1,62 @@
+const componentVariablePathList: string[] = [
+    '@douyinfe/semi-foundation/tooltip/variables.scss',
+    '@douyinfe/semi-foundation/anchor/variables.scss',
+    '@douyinfe/semi-foundation/autoComplete/variables.scss',
+    '@douyinfe/semi-foundation/avatar/variables.scss',
+    '@douyinfe/semi-foundation/backtop/variables.scss',
+    '@douyinfe/semi-foundation/badge/variables.scss',
+    '@douyinfe/semi-foundation/banner/variables.scss',
+    '@douyinfe/semi-foundation/breadcrumb/variables.scss',
+    '@douyinfe/semi-foundation/button/variables.scss',
+    '@douyinfe/semi-foundation/calendar/variables.scss',
+    '@douyinfe/semi-foundation/card/variables.scss',
+    '@douyinfe/semi-foundation/carousel/variables.scss',
+    '@douyinfe/semi-foundation/cascader/variables.scss',
+    '@douyinfe/semi-foundation/checkbox/variables.scss',
+    '@douyinfe/semi-foundation/collapse/variables.scss',
+    '@douyinfe/semi-foundation/collapsible/variables.scss',
+    '@douyinfe/semi-foundation/datePicker/variables.scss',
+    '@douyinfe/semi-foundation/descriptions/variables.scss',
+    '@douyinfe/semi-foundation/divider/variables.scss',
+    '@douyinfe/semi-foundation/dropdown/variables.scss',
+    '@douyinfe/semi-foundation/empty/variables.scss',
+    '@douyinfe/semi-foundation/form/variables.scss',
+    '@douyinfe/semi-foundation/grid/variables.scss',
+    '@douyinfe/semi-foundation/highlight/variables.scss',
+    '@douyinfe/semi-foundation/image/variables.scss',
+    '@douyinfe/semi-foundation/input/variables.scss',
+    '@douyinfe/semi-foundation/inputNumber/variables.scss',
+    '@douyinfe/semi-foundation/list/variables.scss',
+    '@douyinfe/semi-foundation/modal/variables.scss',
+    '@douyinfe/semi-foundation/navigation/variables.scss',
+    '@douyinfe/semi-foundation/notification/variables.scss',
+    '@douyinfe/semi-foundation/pagination/variables.scss',
+    '@douyinfe/semi-foundation/popconfirm/variables.scss',
+    '@douyinfe/semi-foundation/popover/variables.scss',
+    '@douyinfe/semi-foundation/progress/variables.scss',
+    '@douyinfe/semi-foundation/radio/variables.scss',
+    '@douyinfe/semi-foundation/rating/variables.scss',
+    '@douyinfe/semi-foundation/scrollList/variables.scss',
+    '@douyinfe/semi-foundation/select/variables.scss',
+    '@douyinfe/semi-foundation/sideSheet/variables.scss',
+    '@douyinfe/semi-foundation/skeleton/variables.scss',
+    '@douyinfe/semi-foundation/slider/variables.scss',
+    '@douyinfe/semi-foundation/space/variables.scss',
+    '@douyinfe/semi-foundation/spin/variables.scss',
+    '@douyinfe/semi-foundation/steps/variables.scss',
+    '@douyinfe/semi-foundation/switch/variables.scss',
+    '@douyinfe/semi-foundation/table/variables.scss',
+    '@douyinfe/semi-foundation/tabs/variables.scss',
+    '@douyinfe/semi-foundation/tag/variables.scss',
+    '@douyinfe/semi-foundation/tagInput/variables.scss',
+    '@douyinfe/semi-foundation/timePicker/variables.scss',
+    '@douyinfe/semi-foundation/timeline/variables.scss',
+    '@douyinfe/semi-foundation/toast/variables.scss',
+    '@douyinfe/semi-foundation/transfer/variables.scss',
+    '@douyinfe/semi-foundation/tree/variables.scss',
+    '@douyinfe/semi-foundation/treeSelect/variables.scss',
+    '@douyinfe/semi-foundation/typography/variables.scss',
+    '@douyinfe/semi-foundation/upload/variables.scss'
+];
+
+export default componentVariablePathList;

packages/semi-rspack/src/loaders/semi-theme-loader.ts

@@ -1,5 +1,6 @@
 import { LoaderContext } from 'webpack';
 import resolve from 'enhanced-resolve';
+import componentVariablePathList from '../componentName';
 
 export interface SemiThemeLoaderOptions {
     prefixCls: string;
@@ -59,7 +60,31 @@ export default function SemiThemeLoader(this: LoaderContext<SemiThemeLoaderOptio
     const prefixClsStr = `$prefix: '${prefixCls}';\n`;
 
     if (shouldInject) {
-        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
+
+        const customStr = (() => {
+            let customStr = '';
+            try {
+                if (!resolve.sync(this.context, `${theme}/scss/custom.scss`)) {
+                    return '';
+                }
+                const collectAllVariablesPath: string[] = [
+                    ...componentVariablePathList,
+                ];
+                if (componentVariables) {
+                    collectAllVariablesPath.push(`${theme}/scss/local.scss`);
+                }
+                collectAllVariablesPath.push(`${theme}/scss/custom.scss`);
+                customStr = collectAllVariablesPath.map(p => {
+                    return `@import "~${p}";`;
+                }).join('\n') + '\n' + customStr;
+
+            } catch (e) {
+                customStr = ''; // fallback to empty string
+            }
+            return `body:not(:not(body)){${customStr}};`;
+        })();
+
+        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}${customStr}`;
     } else {
         return `${scssVarStr}${prefixClsStr}${fileStr}`;
     }

packages/semi-rspack/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es6",
+        "target": "es2020",
         "baseUrl": "./",
         "outDir": "lib",
         "sourceMap": false,

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "compile semi scss to css",
     "author": "[email protected]",
     "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/descriptions/__test__/descriptions.test.js

@@ -194,7 +194,7 @@ describe('Descriptions', () => {
 
     it('Descriptions layout horizontal', () => {
         const desc = mount(
-            <Descriptions layout='horizontal' align='left'>
+            <Descriptions layout='horizontal' align='left' column={4}>
                 <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
                 <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
                 <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
@@ -222,6 +222,12 @@ describe('Descriptions', () => {
                 .getDOMNode()
                 .textContent
         ).toEqual('1,480,000');
+
+        let totalSpan = ths.length
+        tds.forEach(item=>{
+            totalSpan += +item.getAttribute('colspan')
+        })
+        expect(totalSpan).toEqual(8);
         desc.unmount();
     });
-})
+})

packages/semi-ui/descriptions/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/descriptions/constants';
@@ -72,7 +72,23 @@ class Descriptions extends BaseComponent<DescriptionsProps> {
     }
 
     get adapter(): DescriptionsAdapter<DescriptionsProps> {
-        return { ...super.adapter };
+        return {
+            ...super.adapter,
+            getColumns: ()=>{
+                if (this.props.data?.length) {
+                    return this.props.data;
+                }
+                if (this.props.children) {
+                    return React.Children.toArray(this.props.children)?.map(item => {
+                        return isValidElement(item)?({
+                            value: item.props.children,
+                            ...item.props,
+                        }):[];
+                    });
+                }
+                return [];
+            }
+        };
     }
 
     renderChildrenList = () => {
@@ -119,4 +135,4 @@ class Descriptions extends BaseComponent<DescriptionsProps> {
     }
 }
 
-export default Descriptions;
+export default Descriptions;

packages/semi-ui/descriptions/item.tsx

@@ -50,7 +50,7 @@ export default class Item extends PureComponent<DescriptionsItemProps> {
                     {itemKey}
                 </span>
             </th>
-            <td className={`${prefixCls}-item ${prefixCls}-item-td`} colSpan={span || 1}>
+            <td className={`${prefixCls}-item ${prefixCls}-item-td`} colSpan={span? ((span * 2) - 1) : 1}>
                 <span className={valCls}>
                     {typeof children === 'function' ? children() : children}
                 </span>

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.54.1",
-        "@douyinfe/semi-animation-react": "2.54.1",
-        "@douyinfe/semi-foundation": "2.54.1",
-        "@douyinfe/semi-icons": "2.54.1",
-        "@douyinfe/semi-illustrations": "2.54.1",
-        "@douyinfe/semi-theme-default": "2.54.1",
+        "@douyinfe/semi-animation": "2.55.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.55.0-beta.0",
+        "@douyinfe/semi-foundation": "2.55.0-beta.0",
+        "@douyinfe/semi-icons": "2.55.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.55.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.55.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.54.1",
+    "version": "2.55.0-beta.0",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

packages/semi-webpack/src/componentName.ts

@@ -0,0 +1,62 @@
+const componentVariablePathList: string[] = [
+    '@douyinfe/semi-foundation/tooltip/variables.scss',
+    '@douyinfe/semi-foundation/anchor/variables.scss',
+    '@douyinfe/semi-foundation/autoComplete/variables.scss',
+    '@douyinfe/semi-foundation/avatar/variables.scss',
+    '@douyinfe/semi-foundation/backtop/variables.scss',
+    '@douyinfe/semi-foundation/badge/variables.scss',
+    '@douyinfe/semi-foundation/banner/variables.scss',
+    '@douyinfe/semi-foundation/breadcrumb/variables.scss',
+    '@douyinfe/semi-foundation/button/variables.scss',
+    '@douyinfe/semi-foundation/calendar/variables.scss',
+    '@douyinfe/semi-foundation/card/variables.scss',
+    '@douyinfe/semi-foundation/carousel/variables.scss',
+    '@douyinfe/semi-foundation/cascader/variables.scss',
+    '@douyinfe/semi-foundation/checkbox/variables.scss',
+    '@douyinfe/semi-foundation/collapse/variables.scss',
+    '@douyinfe/semi-foundation/collapsible/variables.scss',
+    '@douyinfe/semi-foundation/datePicker/variables.scss',
+    '@douyinfe/semi-foundation/descriptions/variables.scss',
+    '@douyinfe/semi-foundation/divider/variables.scss',
+    '@douyinfe/semi-foundation/dropdown/variables.scss',
+    '@douyinfe/semi-foundation/empty/variables.scss',
+    '@douyinfe/semi-foundation/form/variables.scss',
+    '@douyinfe/semi-foundation/grid/variables.scss',
+    '@douyinfe/semi-foundation/highlight/variables.scss',
+    '@douyinfe/semi-foundation/image/variables.scss',
+    '@douyinfe/semi-foundation/input/variables.scss',
+    '@douyinfe/semi-foundation/inputNumber/variables.scss',
+    '@douyinfe/semi-foundation/list/variables.scss',
+    '@douyinfe/semi-foundation/modal/variables.scss',
+    '@douyinfe/semi-foundation/navigation/variables.scss',
+    '@douyinfe/semi-foundation/notification/variables.scss',
+    '@douyinfe/semi-foundation/pagination/variables.scss',
+    '@douyinfe/semi-foundation/popconfirm/variables.scss',
+    '@douyinfe/semi-foundation/popover/variables.scss',
+    '@douyinfe/semi-foundation/progress/variables.scss',
+    '@douyinfe/semi-foundation/radio/variables.scss',
+    '@douyinfe/semi-foundation/rating/variables.scss',
+    '@douyinfe/semi-foundation/scrollList/variables.scss',
+    '@douyinfe/semi-foundation/select/variables.scss',
+    '@douyinfe/semi-foundation/sideSheet/variables.scss',
+    '@douyinfe/semi-foundation/skeleton/variables.scss',
+    '@douyinfe/semi-foundation/slider/variables.scss',
+    '@douyinfe/semi-foundation/space/variables.scss',
+    '@douyinfe/semi-foundation/spin/variables.scss',
+    '@douyinfe/semi-foundation/steps/variables.scss',
+    '@douyinfe/semi-foundation/switch/variables.scss',
+    '@douyinfe/semi-foundation/table/variables.scss',
+    '@douyinfe/semi-foundation/tabs/variables.scss',
+    '@douyinfe/semi-foundation/tag/variables.scss',
+    '@douyinfe/semi-foundation/tagInput/variables.scss',
+    '@douyinfe/semi-foundation/timePicker/variables.scss',
+    '@douyinfe/semi-foundation/timeline/variables.scss',
+    '@douyinfe/semi-foundation/toast/variables.scss',
+    '@douyinfe/semi-foundation/transfer/variables.scss',
+    '@douyinfe/semi-foundation/tree/variables.scss',
+    '@douyinfe/semi-foundation/treeSelect/variables.scss',
+    '@douyinfe/semi-foundation/typography/variables.scss',
+    '@douyinfe/semi-foundation/upload/variables.scss'
+];
+
+export default componentVariablePathList;

packages/semi-webpack/src/semi-theme-loader.ts

@@ -1,5 +1,6 @@
 import loaderUtils from 'loader-utils';
 import resolve from 'enhanced-resolve';
+import componentVariablePathList from './componentName';
 
 export default function SemiThemeLoader(source: string) {
     const query = loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query);
@@ -13,7 +14,7 @@ export default function SemiThemeLoader(source: string) {
     try {
         resolve.sync(this.context, `${theme}/scss/animation.scss`);
     } catch (e) {
-        animationStr = ""; // fallback to empty string
+        animationStr = ''; // fallback to empty string
     }
 
 
@@ -47,15 +48,41 @@ export default function SemiThemeLoader(source: string) {
             }
         } catch (error) {
         }
+
     }
 
+
     // inject prefix
     const prefixCls = query.prefixCls || 'semi';
 
     const prefixClsStr = `$prefix: '${prefixCls}';\n`;
 
     if (shouldInject) {
-        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
+
+        const customStr = (() => {
+            let customStr = '';
+            try {
+                if (!resolve.sync(this.context, `${theme}/scss/custom.scss`)) {
+                    return '';
+                }
+                const collectAllVariablesPath: string[] = [
+                    ...componentVariablePathList,
+                ];
+                if (componentVariables) {
+                    collectAllVariablesPath.push(`${theme}/scss/local.scss`);
+                }
+                collectAllVariablesPath.push(`${theme}/scss/custom.scss`);
+                customStr = collectAllVariablesPath.map(p => {
+                    return `@import "~${p}";`;
+                }).join('\n') + '\n' + customStr;
+
+            } catch (e) {
+                customStr = ''; // fallback to empty string
+            }
+            return `body:not(:not(body)){${customStr}};`;
+        })();
+
+        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}${customStr}`;
     } else {
         return `${scssVarStr}${prefixClsStr}${fileStr}`;
     }

packages/semi-webpack/tsconfig.json

@@ -6,7 +6,7 @@
         "sourceMap": true,
         "allowJs": true,
         "module": "commonjs",
-        "lib": ["es7", "dom"],
+        "lib": ["es2020", "dom"],
         "moduleResolution": "node",
         "declaration": true,
         "noImplicitAny": true,