@douyinfe/semi-rspack-plugin 2.38.3-alpha.3-patch-fix-2932 → 2.38.4-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +18 -18
  2. package/lib/componentDependentTree.d.ts +84 -0
  3. package/lib/componentDependentTree.js +86 -0
  4. package/lib/componentName.d.ts +2 -0
  5. package/lib/componentName.js +63 -0
  6. package/lib/constants.d.ts +2 -0
  7. package/lib/constants.js +3 -1
  8. package/lib/index.d.ts +2 -0
  9. package/lib/index.js +5 -1
  10. package/lib/loaders/semi-extract-css-content-loader.d.ts +12 -0
  11. package/lib/loaders/semi-extract-css-content-loader.js +28 -0
  12. package/lib/loaders/semi-theme-loader.d.ts +1 -0
  13. package/lib/loaders/semi-theme-loader.js +31 -2
  14. package/lib/loaders/semi-web-component-loader.d.ts +2 -0
  15. package/lib/loaders/semi-web-component-loader.js +125 -0
  16. package/lib/rule.d.ts +9 -0
  17. package/lib/rule.js +44 -8
  18. package/lib/types.d.ts +2 -0
  19. package/package.json +6 -3
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
- > A repack plugin for Semi Design to custom theme、replace prefix and so on.
1
+ > A rspack plugin for Semi Design to custom theme、replace prefix and so on.
2
2
 
3
3
  ## Introduction
4
- The plugin is designed for Semi Design, support webpack4 and webpack5, provides two major abilities:
4
+ The plugin is designed for Semi Design, support rspack, provides two major abilities:
5
5
  - Custom theme
6
6
  - Replace prefix of CSS selector
7
7
 
@@ -29,13 +29,13 @@ Priority from low to high.
29
29
  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.
30
30
 
31
31
  ``` js
32
- // webpack.config.js
33
- const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
32
+ // rspack.config.js
33
+ const {SemiRspackPlugin} = require('@douyinfe/semi-rspack-plugin');
34
34
 
35
35
  module.exports = {
36
36
  // ...
37
37
  plugins: [
38
- new SemiPlugin({
38
+ new SemiRspackPlugin({
39
39
  theme: '@douyinfe/semi-theme-default'
40
40
  })
41
41
  ]
@@ -53,16 +53,16 @@ You can check which tokens can be customized on the [Semi WebSite](https://semi.
53
53
  $font-size-small: 16px;
54
54
 
55
55
  ```
56
- - step2: config webpack
56
+ - step2: config rspack
57
57
  ``` js
58
- // webpack.config.js
58
+ // rspack.config.js
59
59
  const path = require('path');
60
- const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
60
+ const {SemiRspackPlugin} = require('@douyinfe/semi-rspack-plugin');
61
61
 
62
62
  module.exports = {
63
63
  // ...
64
64
  plugins: [
65
- new SemiPlugin({
65
+ new SemiRspackPlugin({
66
66
  include: path.join(__dirname, 'local.scss')
67
67
  })
68
68
  ]
@@ -71,13 +71,13 @@ module.exports = {
71
71
 
72
72
  #### Through parameters
73
73
  ``` js
74
- // webpack.config.js
75
- const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
74
+ // rspack.config.js
75
+ const {SemiRspackPlugin} = require('@douyinfe/semi-rspack-plugin');
76
76
 
77
77
  module.exports = {
78
78
  // ...
79
79
  plugins: [
80
- new SemiPlugin({
80
+ new SemiRspackPlugin({
81
81
  variables: {
82
82
  "$font-size-small": '16px'
83
83
  }
@@ -90,13 +90,13 @@ module.exports = {
90
90
  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.
91
91
 
92
92
  ``` js
93
- // webpack.config.js
94
- const SemiPlugin = require('@douyinfe/semi-rspack-plugin').default;
93
+ // rspack.config.js
94
+ const {SemiRspackPlugin} = require('@douyinfe/semi-rspack-plugin');
95
95
 
96
96
  module.exports = {
97
97
  // ...
98
98
  plugins: [
99
- new SemiPlugin({
99
+ new SemiRspackPlugin({
100
100
  prefixCls: 'custom'
101
101
  })
102
102
  ]
@@ -148,13 +148,13 @@ In the compilation phase, whether to exclude css references.Used to solve the pr
148
148
 
149
149
  Type: `String`
150
150
 
151
- The path of webpack loader that extract css.
151
+ The path of webpack/rspack loader that extract css.
152
152
 
153
153
  ##### options.extractCssOptions.loaderOptions
154
154
 
155
155
  Type: `Object`
156
156
 
157
- The options of webpack loader that extract css.
157
+ The options of webpack/rspack loader that extract css.
158
158
 
159
159
  #### options.overrideStylesheetLoaders
160
160
 
@@ -163,4 +163,4 @@ Type: `(loaderList:any[])=>any[]`
163
163
  You can customize how webpack process semi related styles by override the loader with this option. The function will receive the loader list of default loaders(include options.extractCssOptions) and you should return your new loader list. The best practice is just only add your loader to the list rather than delete or change the default loaders since some core logic is in there.
164
164
 
165
165
 
166
- In webpack@5, some hooks need to be obtained through api `NormalModule.getCompilationHooks`. But in some scenarios, webpack will not be installed, such as Next.js. Therefore, the user is required to pass in NormalModule as a parameter.
166
+ In webpack@5, some hooks need to be obtained through api `NormalModule.getCompilationHooks`. But in some scenarios, webpack will not be installed, such as Next.js. Therefore, the user is required to pass in NormalModule as a parameter.
package/lib/componentDependentTree.d.ts ADDED
@@ -0,0 +1,84 @@
1
+ declare const dependentTree: {
2
+ Anchor: string[];
3
+ AudioPlayer: string[];
4
+ AutoComplete: string[];
5
+ Avatar: any;
6
+ AvatarGroup: any;
7
+ BackTop: string[];
8
+ Badge: any;
9
+ Banner: string[];
10
+ Breadcrumb: string[];
11
+ Button: string[];
12
+ ButtonGroup: string[];
13
+ SplitButtonGroup: string[];
14
+ Calendar: string[];
15
+ Card: string[];
16
+ Carousel: string[];
17
+ Cascader: string[];
18
+ Chat: string[];
19
+ Checkbox: string[];
20
+ CodeHighlight: any;
21
+ CheckboxGroup: string[];
22
+ Collapse: string[];
23
+ Collapsible: any;
24
+ ColorPicker: string[];
25
+ Cropper: any;
26
+ DatePicker: string[];
27
+ Descriptions: any;
28
+ Divider: any;
29
+ Dropdown: string[];
30
+ Empty: string[];
31
+ Form: string[];
32
+ Row: any;
33
+ Col: any;
34
+ Highlight: any;
35
+ HotKeys: any;
36
+ IconButton: string[];
37
+ Image: string[];
38
+ Input: string[];
39
+ InputGroup: string[];
40
+ TextArea: string[];
41
+ InputNumber: string[];
42
+ JsonViewer: string[];
43
+ Layout: any;
44
+ List: string[];
45
+ MarkdownRender: string[];
46
+ Modal: string[];
47
+ Navigation: string[];
48
+ Notification: string[];
49
+ OverflowList: any;
50
+ Pagination: string[];
51
+ PinCode: string[];
52
+ Popconfirm: string[];
53
+ Popover: string[];
54
+ Portal: any;
55
+ Progress: any;
56
+ Radio: string[];
57
+ Rating: string[];
58
+ Resizable: string[];
59
+ ScrollList: any;
60
+ Select: string[];
61
+ SideSheet: string[];
62
+ Skeleton: any;
63
+ Slider: string[];
64
+ Space: any;
65
+ Spin: any;
66
+ Steps: string[];
67
+ Switch: string[];
68
+ Table: string[];
69
+ Tabs: string[];
70
+ Tag: string[];
71
+ TagGroup: string[];
72
+ TagInput: string[];
73
+ Timeline: any;
74
+ TimePicker: string[];
75
+ Toast: string[];
76
+ Tooltip: string[];
77
+ Transfer: string[];
78
+ Tree: string[];
79
+ TreeSelect: string[];
80
+ Typography: string[];
81
+ Upload: string[];
82
+ UserGuide: string[];
83
+ };
84
+ export default dependentTree;
package/lib/componentDependentTree.js ADDED
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const dependentTree = {
4
+ "Anchor": ["Typography"],
5
+ "AudioPlayer": ["Button", "Dropdown", "Image", "Tooltip", "Popover", "Icon"],
6
+ "AutoComplete": ["Spin", "Popover", "Input", "Icon"],
7
+ "Avatar": [],
8
+ "AvatarGroup": [],
9
+ "BackTop": ["Icon"],
10
+ "Badge": [],
11
+ "Banner": ["IconButton", "Typography", "Icon"],
12
+ "Breadcrumb": ["Popover", "Typography", "Icon"],
13
+ "Button": ["Icon"],
14
+ "ButtonGroup": ["Button"],
15
+ "SplitButtonGroup": ["Button"],
16
+ "Calendar": ["Popover", "Button", "Icon"],
17
+ "Card": ["Space", "Skeleton", "Typography"],
18
+ "Carousel": ["Icon"],
19
+ "Cascader": ["Input", "Popover", "Tag", "TagInput", "Spin", "Checkbox", "Icon"],
20
+ "Chat": ["TextArea", "Button", "Upload", "Toast", "Progress", "Image", "Avatar", "Icon", "MarkdownRender", "Typography", "Tooltip", "Divider", "Popconfirm", "BackTop"],
21
+ "Checkbox": ["Icon"],
22
+ "CodeHighlight": [],
23
+ "CheckboxGroup": ["Icon"],
24
+ "Collapse": ["Collapsible", "Icon"],
25
+ "Collapsible": [],
26
+ "ColorPicker": ["Popover", "Input", "InputGroup", "InputNumber", "Select", "Button"],
27
+ "Cropper": [],
28
+ "DatePicker": ["Button", "Input", "IconButton", "Icon", "Typography", "ScrollList", "Icon"],
29
+ "Descriptions": [],
30
+ "Divider": [],
31
+ "Dropdown": ["Tooltip", "Icon"],
32
+ "Empty": ["Typography"],
33
+ "Form": ["Row", "Col", "Icon"],
34
+ "Row": [],
35
+ "Col": [],
36
+ "Highlight": [],
37
+ "HotKeys": [],
38
+ "IconButton": ["Button", "Spin", "Icon"],
39
+ "Image": ["Skeleton", "Divider", "Tooltip", "Slider", "Spin", "Portal", "Icon"],
40
+ "Input": ["Icon"],
41
+ "InputGroup": ["Form"],
42
+ "TextArea": ["Icon"],
43
+ "InputNumber": ["Input", "Icon"],
44
+ "JsonViewer": ["Button", "Input", "Icon"],
45
+ "Layout": [],
46
+ "List": ["Row", "Spin"],
47
+ "MarkdownRender": ["Typography", "CodeHighlight", "Image", "Table", "Icon"],
48
+ "Modal": ["Button", "Portal", "Typography", "Icon"],
49
+ "Navigation": ["Button", "Tooltip", "Dropdown", "Collapsible", "Icon"],
50
+ "Notification": ["Button", "Icon"],
51
+ "OverflowList": [],
52
+ "Pagination": ["Select", "InputNumber", "Popover", "Icon"],
53
+ "PinCode": ["Input"],
54
+ "Popconfirm": ["Popover", "Button", "Icon"],
55
+ "Popover": ["Tooltip"],
56
+ "Portal": [],
57
+ "Progress": [],
58
+ "Radio": ["Icon"],
59
+ "Rating": ["Icon", "Tooltip"],
60
+ "Resizable": ["Icon"],
61
+ "ScrollList": [],
62
+ "Select": ["Tag", "OverflowList", "Space", "Typography", "Spin", "Popover", "Icon"],
63
+ "SideSheet": ["[Portal", "Button", "Icon"],
64
+ "Skeleton": [],
65
+ "Slider": ["Tooltip"],
66
+ "Space": [],
67
+ "Spin": [],
68
+ "Steps": ["Row", "Col", "Icon"],
69
+ "Switch": ["Spin"],
70
+ "Table": ["Radio", "Checkbox", "Dropdown", "Spin", "Pagination", "Icon"],
71
+ "Tabs": ["OverflowList", "Dropdown", "Button", "Icon"],
72
+ "Tag": ["Icon", "Popover", "Avatar"],
73
+ "TagGroup": ["Icon", "Popover", "Avatar"],
74
+ "TagInput": ["Tag", "Input", "Popover", "Icon"],
75
+ "Timeline": [],
76
+ "TimePicker": ["Input", "Icon", "Popover", "ScrollList"],
77
+ "Toast": ["Button", "Icon"],
78
+ "Tooltip": ["Portal"],
79
+ "Transfer": ["Input", "Checkbox", "Tree", "Button", "Spin", "Icon"],
80
+ "Tree": ["Input", "Checkbox", "Spin", "Collapsible", "Icon"],
81
+ "TreeSelect": ["Tag", "TagInput", "Checkbox", "Popover", "Input", "Icon"],
82
+ "Typography": ["Popover", "Tooltip", "Icon"],
83
+ "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"],
84
+ "UserGuide": ["Popover", "Button", "Modal"]
85
+ };
86
+ exports.default = dependentTree;
package/lib/componentName.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const componentVariablePathList: string[];
2
+ export default componentVariablePathList;
package/lib/componentName.js ADDED
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const componentVariablePathList = [
4
+ '@douyinfe/semi-foundation/tooltip/variables.scss',
5
+ '@douyinfe/semi-foundation/anchor/variables.scss',
6
+ '@douyinfe/semi-foundation/autoComplete/variables.scss',
7
+ '@douyinfe/semi-foundation/avatar/variables.scss',
8
+ '@douyinfe/semi-foundation/backtop/variables.scss',
9
+ '@douyinfe/semi-foundation/badge/variables.scss',
10
+ '@douyinfe/semi-foundation/banner/variables.scss',
11
+ '@douyinfe/semi-foundation/breadcrumb/variables.scss',
12
+ '@douyinfe/semi-foundation/button/variables.scss',
13
+ '@douyinfe/semi-foundation/calendar/variables.scss',
14
+ '@douyinfe/semi-foundation/card/variables.scss',
15
+ '@douyinfe/semi-foundation/carousel/variables.scss',
16
+ '@douyinfe/semi-foundation/cascader/variables.scss',
17
+ '@douyinfe/semi-foundation/checkbox/variables.scss',
18
+ '@douyinfe/semi-foundation/collapse/variables.scss',
19
+ '@douyinfe/semi-foundation/collapsible/variables.scss',
20
+ '@douyinfe/semi-foundation/datePicker/variables.scss',
21
+ '@douyinfe/semi-foundation/descriptions/variables.scss',
22
+ '@douyinfe/semi-foundation/divider/variables.scss',
23
+ '@douyinfe/semi-foundation/dropdown/variables.scss',
24
+ '@douyinfe/semi-foundation/empty/variables.scss',
25
+ '@douyinfe/semi-foundation/form/variables.scss',
26
+ '@douyinfe/semi-foundation/grid/variables.scss',
27
+ '@douyinfe/semi-foundation/highlight/variables.scss',
28
+ '@douyinfe/semi-foundation/image/variables.scss',
29
+ '@douyinfe/semi-foundation/input/variables.scss',
30
+ '@douyinfe/semi-foundation/inputNumber/variables.scss',
31
+ '@douyinfe/semi-foundation/list/variables.scss',
32
+ '@douyinfe/semi-foundation/modal/variables.scss',
33
+ '@douyinfe/semi-foundation/navigation/variables.scss',
34
+ '@douyinfe/semi-foundation/notification/variables.scss',
35
+ '@douyinfe/semi-foundation/pagination/variables.scss',
36
+ '@douyinfe/semi-foundation/popconfirm/variables.scss',
37
+ '@douyinfe/semi-foundation/popover/variables.scss',
38
+ '@douyinfe/semi-foundation/progress/variables.scss',
39
+ '@douyinfe/semi-foundation/radio/variables.scss',
40
+ '@douyinfe/semi-foundation/rating/variables.scss',
41
+ '@douyinfe/semi-foundation/scrollList/variables.scss',
42
+ '@douyinfe/semi-foundation/select/variables.scss',
43
+ '@douyinfe/semi-foundation/sideSheet/variables.scss',
44
+ '@douyinfe/semi-foundation/skeleton/variables.scss',
45
+ '@douyinfe/semi-foundation/slider/variables.scss',
46
+ '@douyinfe/semi-foundation/space/variables.scss',
47
+ '@douyinfe/semi-foundation/spin/variables.scss',
48
+ '@douyinfe/semi-foundation/steps/variables.scss',
49
+ '@douyinfe/semi-foundation/switch/variables.scss',
50
+ '@douyinfe/semi-foundation/table/variables.scss',
51
+ '@douyinfe/semi-foundation/tabs/variables.scss',
52
+ '@douyinfe/semi-foundation/tag/variables.scss',
53
+ '@douyinfe/semi-foundation/tagInput/variables.scss',
54
+ '@douyinfe/semi-foundation/timePicker/variables.scss',
55
+ '@douyinfe/semi-foundation/timeline/variables.scss',
56
+ '@douyinfe/semi-foundation/toast/variables.scss',
57
+ '@douyinfe/semi-foundation/transfer/variables.scss',
58
+ '@douyinfe/semi-foundation/tree/variables.scss',
59
+ '@douyinfe/semi-foundation/treeSelect/variables.scss',
60
+ '@douyinfe/semi-foundation/typography/variables.scss',
61
+ '@douyinfe/semi-foundation/upload/variables.scss'
62
+ ];
63
+ exports.default = componentVariablePathList;
package/lib/constants.d.ts CHANGED
@@ -2,3 +2,5 @@ export declare const SOURCE_SUFFIX_LOADER: string;
2
2
  export declare const THEME_LOADER: string;
3
3
  export declare const OMIT_CSS_LOADER: string;
4
4
  export declare const PREFIX_LOADER: string;
5
+ export declare const EXTRACT_CSS_LOADER: string;
6
+ export declare const WEB_COMPONENT_LOADER: string;
package/lib/constants.js CHANGED
@@ -3,9 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.PREFIX_LOADER = exports.OMIT_CSS_LOADER = exports.THEME_LOADER = exports.SOURCE_SUFFIX_LOADER = void 0;
6
+ exports.WEB_COMPONENT_LOADER = exports.EXTRACT_CSS_LOADER = exports.PREFIX_LOADER = exports.OMIT_CSS_LOADER = exports.THEME_LOADER = exports.SOURCE_SUFFIX_LOADER = void 0;
7
7
  const path_1 = __importDefault(require("path"));
8
8
  exports.SOURCE_SUFFIX_LOADER = path_1.default.resolve(__dirname, './loaders/semi-source-suffix-loader');
9
9
  exports.THEME_LOADER = path_1.default.resolve(__dirname, './loaders/semi-theme-loader');
10
10
  exports.OMIT_CSS_LOADER = path_1.default.resolve(__dirname, './loaders/semi-omit-css-loader');
11
11
  exports.PREFIX_LOADER = path_1.default.resolve(__dirname, './loaders/semi-prefix-loader');
12
+ exports.EXTRACT_CSS_LOADER = path_1.default.resolve(__dirname, './loaders/semi-extract-css-content-loader');
13
+ exports.WEB_COMPONENT_LOADER = path_1.default.resolve(__dirname, './loaders/semi-web-component-loader');
package/lib/index.d.ts CHANGED
@@ -5,3 +5,5 @@ export { default as semiThemeLoader } from './loaders/semi-theme-loader';
5
5
  export { default as semiPrefixLoader } from './loaders/semi-prefix-loader';
6
6
  export { default as semiSourceSuffixLoader } from './loaders/semi-source-suffix-loader';
7
7
  export { default as semiOmitCssLoader } from './loaders/semi-omit-css-loader';
8
+ export { default as semiExtractCssContentLoader } from './loaders/semi-extract-css-content-loader';
9
+ export { default as semiWebComponentLoader } from './loaders/semi-web-component-loader';
package/lib/index.js CHANGED
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
17
17
  return (mod && mod.__esModule) ? mod : { "default": mod };
18
18
  };
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
- exports.semiOmitCssLoader = exports.semiSourceSuffixLoader = exports.semiPrefixLoader = exports.semiThemeLoader = void 0;
20
+ exports.semiWebComponentLoader = exports.semiExtractCssContentLoader = exports.semiOmitCssLoader = exports.semiSourceSuffixLoader = exports.semiPrefixLoader = exports.semiThemeLoader = void 0;
21
21
  __exportStar(require("./types"), exports);
22
22
  __exportStar(require("./plugin"), exports);
23
23
  __exportStar(require("./rule"), exports);
@@ -29,3 +29,7 @@ var semi_source_suffix_loader_1 = require("./loaders/semi-source-suffix-loader")
29
29
  Object.defineProperty(exports, "semiSourceSuffixLoader", { enumerable: true, get: function () { return __importDefault(semi_source_suffix_loader_1).default; } });
30
30
  var semi_omit_css_loader_1 = require("./loaders/semi-omit-css-loader");
31
31
  Object.defineProperty(exports, "semiOmitCssLoader", { enumerable: true, get: function () { return __importDefault(semi_omit_css_loader_1).default; } });
32
+ var semi_extract_css_content_loader_1 = require("./loaders/semi-extract-css-content-loader");
33
+ Object.defineProperty(exports, "semiExtractCssContentLoader", { enumerable: true, get: function () { return __importDefault(semi_extract_css_content_loader_1).default; } });
34
+ var semi_web_component_loader_1 = require("./loaders/semi-web-component-loader");
35
+ Object.defineProperty(exports, "semiWebComponentLoader", { enumerable: true, get: function () { return __importDefault(semi_web_component_loader_1).default; } });
package/lib/loaders/semi-extract-css-content-loader.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { LoaderContext } from 'webpack';
2
+ /**
3
+ *
4
+ * @param {*} source
5
+ * @returns string
6
+ * @description
7
+ * 此 loader 用于从 css-loader 处理后的 js 代码中获取纯 css 样式字符串
8
+ * source 是经过 css-loader 处理后的 js 代码。要获取其中的 css 样式字符串，需经过如下操作：
9
+ * 1. 通过识别module.id, "做为开头，", ""]);作为结尾拿到中间的 css 代码
10
+ * 2. 将 文本中的 \n 替换为空字符串
11
+ */
12
+ export default function semiExtractCssContentLoader(this: LoaderContext<void>, source: string): string;
package/lib/loaders/semi-extract-css-content-loader.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ /**
4
+ *
5
+ * @param {*} source
6
+ * @returns string
7
+ * @description
8
+ * 此 loader 用于从 css-loader 处理后的 js 代码中获取纯 css 样式字符串
9
+ * source 是经过 css-loader 处理后的 js 代码。要获取其中的 css 样式字符串，需经过如下操作：
10
+ * 1. 通过识别module.id, "做为开头，", ""]);作为结尾拿到中间的 css 代码
11
+ * 2. 将 文本中的 \n 替换为空字符串
12
+ */
13
+ function semiExtractCssContentLoader(source) {
14
+ const beginContent = 'module.id, "';
15
+ const endContent = '", ""]);';
16
+ let begInIndex = source.indexOf(beginContent);
17
+ let endIndex = source.length;
18
+ let result = source;
19
+ if (begInIndex !== -1) {
20
+ endIndex = source.lastIndexOf(endContent);
21
+ if (endIndex !== -1) {
22
+ result = source.slice(begInIndex + beginContent.length, endIndex);
23
+ result = result.replace(/\\n/g, "");
24
+ }
25
+ }
26
+ return result;
27
+ }
28
+ exports.default = semiExtractCssContentLoader;
package/lib/loaders/semi-theme-loader.d.ts CHANGED
@@ -4,5 +4,6 @@ export interface SemiThemeLoaderOptions {
4
4
  variables: string;
5
5
  include: string;
6
6
  name?: string;
7
+ cssLayer?: boolean;
7
8
  }
8
9
  export default function SemiThemeLoader(this: LoaderContext<SemiThemeLoaderOptions>, source: string): string;
package/lib/loaders/semi-theme-loader.js CHANGED
@@ -4,9 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const enhanced_resolve_1 = __importDefault(require("enhanced-resolve"));
7
+ const componentName_1 = __importDefault(require("../componentName"));
7
8
  function SemiThemeLoader(source) {
8
9
  const query = this.getOptions();
9
10
  const theme = query.name || '@douyinfe/semi-theme-default';
11
+ const cssLayer = query.cssLayer ?? false;
10
12
  // always inject
11
13
  const scssVarStr = `@import "~${theme}/scss/index.scss";\n`;
12
14
  // inject once
@@ -49,11 +51,38 @@ function SemiThemeLoader(source) {
49
51
  // inject prefix
50
52
  const prefixCls = query.prefixCls || 'semi';
51
53
  const prefixClsStr = `$prefix: '${prefixCls}';\n`;
54
+ let finalCSS = "";
52
55
  if (shouldInject) {
53
- return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
56
+ const customStr = (() => {
57
+ let customStr = '';
58
+ try {
59
+ if (!enhanced_resolve_1.default.sync(this.context, `${theme}/scss/custom.scss`)) {
60
+ return '';
61
+ }
62
+ const collectAllVariablesPath = [
63
+ ...componentName_1.default,
64
+ ];
65
+ if (componentVariables) {
66
+ collectAllVariablesPath.push(`${theme}/scss/local.scss`);
67
+ }
68
+ collectAllVariablesPath.push(`${theme}/scss/custom.scss`);
69
+ customStr = collectAllVariablesPath.map(p => {
70
+ return `@import "~${p}";`;
71
+ }).join('\n') + '\n' + customStr;
72
+ }
73
+ catch (e) {
74
+ customStr = ''; // fallback to empty string
75
+ }
76
+ return `body:not(:not(body)){${customStr}};`;
77
+ })();
78
+ finalCSS = `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}${customStr}`;
54
79
  }
55
80
  else {
56
- return `${scssVarStr}${prefixClsStr}${fileStr}`;
81
+ finalCSS = `${scssVarStr}${prefixClsStr}${fileStr}`;
82
+ }
83
+ if (cssLayer) {
84
+ finalCSS = `@layer semi{${finalCSS}}`;
57
85
  }
86
+ return finalCSS;
58
87
  }
59
88
  exports.default = SemiThemeLoader;
package/lib/loaders/semi-web-component-loader.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { LoaderContext } from 'webpack';
2
+ export default function semiWebComponentLoader(this: LoaderContext<void>, source: string): string;
package/lib/loaders/semi-web-component-loader.js ADDED
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const fs = require('fs');
7
+ const componentDependentTree_1 = __importDefault(require("../componentDependentTree"));
8
+ function getAllComponents(components) {
9
+ const originComponents = new Set(components);
10
+ const resultComponents = new Set();
11
+ // 对特殊组件做特殊处理，因为这些组件的样式文件名和组件名不一致，需要手动映射
12
+ const specialCaseBefore = {
13
+ 'AvatarGroup': 'Avatar',
14
+ 'CheckboxGroup': 'Checkbox',
15
+ 'TagGroup': 'Tag',
16
+ 'ButtonGroup': 'Button',
17
+ 'SplitButtonGroup': 'Button',
18
+ };
19
+ /*
20
+ 对特殊组件做特殊处理，因为这些组件的样式文件名和组件名不一致，需要手动映射
21
+ 同时由于以下原因：
22
+ 1. 组件所依赖组件和被映射的组件不同，因此应该在获取到依赖组件之后，再做映射
23
+ e.g InputGroup 依赖 Form 组件，其样式存储在 input.scss 中，
24
+ 而 Input 不依赖 Form 组件，因此对于 InputGroup，需要拿到依赖组件，再做映射
25
+ 2. 由于组件是其他组件的依赖组件，因此需要在获取到依赖组件之后，再做映射
26
+ e.g 比如 Row 是 Form 组件的依赖，因此需要在获取到依赖组件之后，再做映射
27
+ */
28
+ const specialCaseAfter = {
29
+ "InputGroup": "Input",
30
+ 'Row': 'Grid',
31
+ 'Col': 'Grid',
32
+ };
33
+ Object.keys(specialCaseBefore).map(keyComponent => {
34
+ if (originComponents.has(keyComponent)) {
35
+ originComponents.delete(keyComponent);
36
+ originComponents.add(specialCaseBefore[keyComponent]);
37
+ }
38
+ });
39
+ function getDependentComponents(components) {
40
+ components.forEach((component) => {
41
+ if (!resultComponents.has(component)) {
42
+ const dependents = componentDependentTree_1.default[component];
43
+ dependents?.forEach((element) => {
44
+ getDependentComponents([element]);
45
+ });
46
+ resultComponents.add(component);
47
+ }
48
+ });
49
+ }
50
+ getDependentComponents(Array.from(originComponents));
51
+ Object.keys(specialCaseAfter).map(keyComponent => {
52
+ if (resultComponents.has(keyComponent)) {
53
+ resultComponents.delete(keyComponent);
54
+ resultComponents.add(specialCaseAfter[keyComponent]);
55
+ }
56
+ });
57
+ return Array.from(resultComponents);
58
+ }
59
+ function getScssImportPaths(components) {
60
+ const pathsObj = {
61
+ IconPath: '@douyinfe/semi-icons/lib/es/styles/icons.scss',
62
+ basePath: '@douyinfe/semi-ui/lib/es/_base/base.scss',
63
+ foundationPath: '@douyinfe/semi-foundation/lib/es/'
64
+ };
65
+ const specialCase = {
66
+ 'Icon': pathsObj.IconPath,
67
+ 'Base': pathsObj.basePath,
68
+ 'Portal': `${pathsObj.foundationPath}_portal/portal.scss`,
69
+ "TextArea": `${pathsObj.foundationPath}input/textarea.scss`,
70
+ "IconButton": `${pathsObj.foundationPath}button/iconButton.scss`,
71
+ "SplitButtonGroup": `${pathsObj.foundationPath}button/SplitButtonGroup.scss`,
72
+ };
73
+ const cssPaths = ["Base", ...components].map(componentName => {
74
+ const lowFirstLetter = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);
75
+ let pathName = '';
76
+ if (specialCase[componentName]) {
77
+ pathName = specialCase[componentName];
78
+ }
79
+ else {
80
+ pathName = `${pathsObj.foundationPath}${lowFirstLetter}/${lowFirstLetter}.scss`;
81
+ }
82
+ return pathName;
83
+ });
84
+ const importFuncName = `
85
+ async function importSemiComponentStyle(componentsStr, root, cb){
86
+ const modules = await Promise.all([
87
+ ${cssPaths.map(path => `import("${path}")`).join(',')}
88
+ ]);
89
+ const styleStr = modules.map(module => {
90
+ const cssContent = module.default;
91
+ return cssContent;
92
+ });
93
+ styleStr.reverse().forEach(css => {
94
+ const style = document.createElement('style');
95
+ style.innerHTML = css;
96
+ root.prepend(style);
97
+ });
98
+ if(typeof cb === 'function') {
99
+ cb();
100
+ }
101
+ }
102
+ `;
103
+ return importFuncName;
104
+ }
105
+ function semiWebComponentLoader(source) {
106
+ /*SEMI_INSERT_STYLE_BEGIN[需要插入样式的组件]SEMI_INSERT_STYLE_END*/
107
+ const beginContent = 'SEMI_INSERT_STYLE_BEGIN';
108
+ const beginIndex = source.indexOf(beginContent);
109
+ if (beginIndex !== -1) {
110
+ const endIndex = source.indexOf('SEMI_INSERT_STYLE_END');
111
+ if (endIndex === -1) {
112
+ throw new Error('SEMI_INSERT_STYLE_END not found');
113
+ }
114
+ const componentsStr = source.slice(beginIndex + beginContent.length, endIndex);
115
+ const componentsArr = JSON.parse(componentsStr);
116
+ const allComponents = getAllComponents(componentsArr);
117
+ // console.log('allComponents', allComponents);
118
+ const importFuncName = getScssImportPaths(allComponents);
119
+ const result = source + importFuncName;
120
+ // console.log('result', result);
121
+ return result;
122
+ }
123
+ return source;
124
+ }
125
+ exports.default = semiWebComponentLoader;
package/lib/rule.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare function createThemeLoaderRule(opts?: SemiWebpackPluginOptions):
14
14
  prefixCls: string;
15
15
  variables: string;
16
16
  include: string;
17
+ cssLayer: boolean;
17
18
  name?: string;
18
19
  };
19
20
  }[];
@@ -35,4 +36,12 @@ export declare function createPrefixLoaderRule(opts?: SemiWebpackPluginOptions):
35
36
  };
36
37
  }[];
37
38
  };
39
+ export declare function createWebComponentLoaderRule(opts?: SemiWebpackPluginOptions): {
40
+ test: RegExp;
41
+ type: string;
42
+ exclude: RegExp;
43
+ use: {
44
+ loader: string;
45
+ }[];
46
+ };
38
47
  export declare function applySemiRules(opts?: SemiWebpackPluginOptions): RuleSetRule[];
package/lib/rule.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.applySemiRules = exports.createPrefixLoaderRule = exports.createOmitCssLoaderRule = exports.createThemeLoaderRule = exports.createSourceSuffixLoaderRule = void 0;
3
+ exports.applySemiRules = exports.createWebComponentLoaderRule = exports.createPrefixLoaderRule = exports.createOmitCssLoaderRule = exports.createThemeLoaderRule = exports.createSourceSuffixLoaderRule = void 0;
4
4
  const constants_1 = require("./constants");
5
5
  const utils_1 = require("./utils");
6
6
  function createSourceSuffixLoaderRule(_opts) {
7
7
  return {
8
- test: /@douyinfe\/semi-(ui|icons)\/lib\/.+\.js$/,
8
+ test: /@douyinfe(\/|\\)+semi-(ui|icons)(\/|\\)+.+\.js$/,
9
9
  use: [{ loader: constants_1.SOURCE_SUFFIX_LOADER }],
10
10
  };
11
11
  }
@@ -18,16 +18,38 @@ function createThemeLoaderRule(opts) {
18
18
  else {
19
19
  themeOptions.name = opts.theme;
20
20
  }
21
- const options = Object.assign(Object.assign({}, themeOptions), { prefixCls: opts.prefixCls, variables: (0, utils_1.stringifyVariableRecord)(opts.variables), include: opts.include });
22
- return {
23
- test: /@douyinfe\/semi-(ui|icons|foundation)\/lib\/.+\.scss$/,
21
+ const options = {
22
+ ...themeOptions,
23
+ prefixCls: opts.prefixCls,
24
+ variables: (0, utils_1.stringifyVariableRecord)(opts.variables),
25
+ include: opts.include,
26
+ cssLayer: opts.cssLayer
27
+ };
28
+ const loaderInfo = {
29
+ test: /@douyinfe(\/|\\)+semi-(ui|icons|foundation)(\/|\\)+lib(\/|\\)+.+\.scss$/,
24
30
  use: [{ loader: constants_1.THEME_LOADER, options }],
25
31
  };
32
+ if (opts.webComponentPath) {
33
+ const commonLoader = [
34
+ { loader: "raw-loader" },
35
+ { loader: constants_1.EXTRACT_CSS_LOADER },
36
+ {
37
+ loader: 'css-loader',
38
+ options: { sourceMap: false }
39
+ },
40
+ { loader: 'sass-loader' }
41
+ ];
42
+ loaderInfo.use = [
43
+ ...commonLoader,
44
+ ...loaderInfo.use
45
+ ];
46
+ }
47
+ return loaderInfo;
26
48
  }
27
49
  exports.createThemeLoaderRule = createThemeLoaderRule;
28
50
  function createOmitCssLoaderRule(_opts) {
29
51
  return {
30
- test: /@douyinfe\/semi-[^/]+\/.+env\.js$/,
52
+ test: /@douyinfe(\/|\\)+semi-[^/]+(\/|\\)+.+env\.js$/,
31
53
  use: [{ loader: constants_1.OMIT_CSS_LOADER }],
32
54
  };
33
55
  }
@@ -37,22 +59,36 @@ function createPrefixLoaderRule(opts) {
37
59
  replacers: { BASE_CLASS_PREFIX: opts.prefixCls },
38
60
  };
39
61
  return {
40
- test: /@douyinfe\/semi-[^/]+\/.+env\.js$/,
62
+ test: /@douyinfe(\/|\\)+semi-[^/]+(\/|\\)+.+env\.js$/,
41
63
  use: [{ loader: constants_1.PREFIX_LOADER, options }],
42
64
  };
43
65
  }
44
66
  exports.createPrefixLoaderRule = createPrefixLoaderRule;
67
+ function createWebComponentLoaderRule(opts) {
68
+ return {
69
+ test: opts.webComponentPath instanceof RegExp ? opts.webComponentPath : /src\/([^/]+\/)*[^/]+\.(ts|tsx|js|jsx)$/,
70
+ type: 'javascript/auto',
71
+ exclude: /node_modules/,
72
+ use: [{ loader: constants_1.WEB_COMPONENT_LOADER }],
73
+ };
74
+ }
75
+ exports.createWebComponentLoaderRule = createWebComponentLoaderRule;
45
76
  function applySemiRules(opts) {
46
77
  const rules = [];
47
78
  if (opts.omitCss) {
48
79
  rules.push(createOmitCssLoaderRule(opts));
49
- return rules;
80
+ if (!opts.webComponentPath) {
81
+ return rules;
82
+ }
50
83
  }
51
84
  rules.push(createSourceSuffixLoaderRule(opts));
52
85
  rules.push(createThemeLoaderRule(opts));
53
86
  if (opts.prefixCls) {
54
87
  rules.push(createPrefixLoaderRule(opts));
55
88
  }
89
+ if (opts.webComponentPath) {
90
+ rules.push(createWebComponentLoaderRule(opts));
91
+ }
56
92
  return rules;
57
93
  }
58
94
  exports.applySemiRules = applySemiRules;
package/lib/types.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  export interface SemiWebpackPluginOptions {
2
2
  theme?: SemiThemeOptions | SemiThemeOptions['name'];
3
+ cssLayer?: boolean;
3
4
  prefixCls?: string;
4
5
  variables?: Record<string, string | number>;
5
6
  include?: string;
6
7
  omitCss?: boolean;
8
+ webComponentPath?: boolean | RegExp;
7
9
  }
8
10
  export interface SemiThemeOptions {
9
11
  name?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-rspack-plugin",
3
- "version": "2.38.3-alpha.3-patch-fix-2932",
3
+ "version": "2.38.4-alpha.1",
4
4
  "description": "",
5
5
  "homepage": "",
6
6
  "license": "MIT",
@@ -19,7 +19,10 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@babel/core": "^7.15.4",
22
- "enhanced-resolve": "^5.8.3"
22
+ "css-loader": "4.3.0",
23
+ "enhanced-resolve": "^5.8.3",
24
+ "raw-loader": "^4.0.2",
25
+ "sass-loader": "^10.1.1"
23
26
  },
24
27
  "peerDependencies": {
25
28
  "webpack": "^5"
@@ -30,5 +33,5 @@
30
33
  "typescript": "^4",
31
34
  "webpack": "^5.77.0"
32
35
  },
33
- "gitHead": "007aa8cccc50de0a7ee68b53bc6e1a62eed8e952"
36
+ "gitHead": "a10113a75a207a0a2d4e4d46797a1093260c9dba"
34
37
  }