@douyinfe/semi-rspack-plugin 0.0.1 → 2.25.0-alpha.0

package/LICENSE

@@ -0,0 +1,83 @@
+MIT License
+
+Copyright (c) 2021 DouyinFE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+The code implementation of the external library is referenced by DouyinFe are:
+
+- animate.css
+
+    The MIT License (MIT)
+
+    Copyright (c) 2020 Daniel Eden
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+
+- Ant Design
+    MIT LICENSE
+
+    Copyright (c) 2015-present Ant UED, https://xtech.antfin.com/
+
+    Permission is hereby granted, free of charge, to any person obtaining
+    a copy of this software and associated documentation files (the
+    "Software"), to deal in the Software without restriction, including
+    without limitation the rights to use, copy, modify, merge, publish,
+    distribute, sublicense, and/or sell copies of the Software, and to
+    permit persons to whom the Software is furnished to do so, subject to
+    the following conditions:
+
+    The above copyright notice and this permission notice shall be
+    included in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+    LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+    OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+    WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+- rc-tree
+
+    MIT LICENSE
+
+    Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,19 +1,19 @@
-> A webpack plugin for Semi Design to custom theme、replace prefix and so on.
+> A rspack plugin for Semi Design to custom theme、replace prefix and so on.
 
 ## Introduction
-The plugin is designed for Semi Design, support webpack4 and webpack5, provides two major abilities:
+The plugin is designed for Semi Design, support rspack, provides two major abilities:
 - Custom theme
 - Replace prefix of CSS selector 
 
 ## Usage 
 
 ### Install 
-Install `@douyinfe/semi-webpack-plugin` as a development dependency:
+Install `@douyinfe/semi-rspack-plugin` as a development dependency:
 
 ``` shell
-npm install --save-dev @douyinfe/semi-webpack-plugin
+npm install --save-dev @douyinfe/semi-rspack-plugin
 # or
-yarn add --dev @douyinfe/semi-webpack-plugin
+yarn add --dev @douyinfe/semi-rspack-plugin
 ```
 
 ### Custom theme
@@ -29,8 +29,8 @@ Priority from low to high.
 In order to use the npm package, you need to customize the theme through [Semi Design System](https://semi.design/dsm/).After finishing the customization, Semi DSM will generate a npm package for you, and then you can use it like this.
 
 ``` js
-// webpack.config.js
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
+// rspack.config.js
+const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
 
 module.exports = {
     // ...
@@ -45,7 +45,7 @@ module.exports = {
 
 #### Through local Scss file
 
-You can check which tokens can be customized on the [Semi WebSite](https://semi.design/zh-CN/basic/tokens).
+You can check which tokens can be customized on the [Semi WebSite](https://semi.design/en-US/basic/tokens).
 
 - step1: add a local file
 ``` scss
@@ -53,11 +53,11 @@ You can check which tokens can be customized on the [Semi WebSite](https://semi.
 $font-size-small: 16px;
 
 ```
-- step2: config webpack
+- step2: config rspack
 ``` js
-// webpack.config.js
+// rspack.config.js
 const path = require('path');
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
+const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
 
 module.exports = {
     // ...
@@ -71,8 +71,8 @@ module.exports = {
 
 #### Through parameters
 ``` js
-// webpack.config.js
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
+// rspack.config.js
+const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
 
 module.exports = {
     // ...
@@ -90,8 +90,8 @@ module.exports = {
 The CSS selectors used by Semi Design is prefixed with semi by default(e.g, `.semi-button`).You can replace the prefix through this plugin.
 
 ``` js
-// webpack.config.js
-const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;
+// rspack.config.js
+const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
 
 module.exports = {
     // ...
@@ -143,21 +143,18 @@ Type: `Boolean`
 
 In the compilation phase, whether to exclude css references.Used to solve the problem that Next.js does not support the global introduction of css in third-party code.See this [discussion](https://github.com/vercel/next.js/discussions/27953).
 
-##### options.webpackContext.NormalModule
-
-Type: `webpack NormalModule`
 
 ##### options.extractCssOptions.loader
 
 Type: `String`
 
-The path of webpack loader that extract css.
+The path of webpack/rspack loader that extract css.
 
 ##### options.extractCssOptions.loaderOptions
 
 Type: `Object`
 
-The options of webpack loader that extract css.
+The options of webpack/rspack loader that extract css.
 
 #### options.overrideStylesheetLoaders
 

package/lib/componentName.d.ts

@@ -0,0 +1,2 @@
+declare const componentVariablePathList: string[];
+export default componentVariablePathList;

package/lib/componentName.js

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

package/lib/loaders/semi-theme-loader.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const enhanced_resolve_1 = __importDefault(require("enhanced-resolve"));
+const componentName_1 = __importDefault(require("../componentName"));
 function SemiThemeLoader(source) {
     const query = this.getOptions();
     const theme = query.name || '@douyinfe/semi-theme-default';
@@ -50,7 +51,26 @@ function SemiThemeLoader(source) {
     const prefixCls = query.prefixCls || 'semi';
     const prefixClsStr = `$prefix: '${prefixCls}';\n`;
     if (shouldInject) {
-        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
+        const customStr = (() => {
+            let customStr = '';
+            try {
+                const collectAllVariablesPath = [
+                    ...componentName_1.default,
+                ];
+                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}`;

package/lib/rule.js

@@ -18,7 +18,12 @@ function createThemeLoaderRule(opts) {
     else {
         themeOptions.name = opts.theme;
     }
-    const options = Object.assign(Object.assign({}, themeOptions), { prefixCls: opts.prefixCls, variables: (0, utils_1.stringifyVariableRecord)(opts.variables), include: opts.include });
+    const options = {
+        ...themeOptions,
+        prefixCls: opts.prefixCls,
+        variables: (0, utils_1.stringifyVariableRecord)(opts.variables),
+        include: opts.include,
+    };
     return {
         test: /@douyinfe\/semi-(ui|icons|foundation)\/lib\/.+\.scss$/,
         use: [{ loader: constants_1.THEME_LOADER, options }],

package/package.json

@@ -1,8 +1,7 @@
 {
     "name": "@douyinfe/semi-rspack-plugin",
-    "version": "0.0.1",
+    "version": "2.25.0-alpha.0",
     "description": "",
-    "author": "伍浩威 <wuhaowei.whw@bytedance.com>",
     "homepage": "",
     "license": "MIT",
     "main": "lib/index.js",
@@ -15,7 +14,8 @@
     ],
     "scripts": {
         "build:lib": "rimraf lib && tsc",
-        "dev": "tsc -w --sourceMap"
+        "dev": "tsc -w --sourceMap",
+        "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
         "@babel/core": "^7.15.4",
@@ -30,5 +30,5 @@
         "typescript": "^4",
         "webpack": "^5.77.0"
     },
-    "gitHead": "3ac52f8f6f711d525534036ec9be58e81a8eeebd"
-}
+    "gitHead": "a2d9b9c6d2bf2464f8bccdbfa56e2e07429013cf"
+}