chore: update webpack and rspack build plug-ins to support consuming custom css (#2113)

* feat: webpack plugin add custom.scss feature

* feat: rspack plugin add custom.scss feature

---------

Co-authored-by: pointhalo <[email protected]>

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-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,