Merge pull request #3127 from DouyinFE/solve/issue-3116-1770017038039

【Auto】fix(semi-webpack/semi-rspack): 正则支持匹配 `@douyinfe/semi-ui-19` 等带数字后缀包名

Author: SudoUserReal

packages/semi-rspack/README.md

@@ -5,6 +5,9 @@ The plugin is designed for Semi Design, support rspack, provides two major abili
 - Custom theme
 - Replace prefix of CSS selector 
 
+> Note: The plugin detects Semi related dependencies by package path. It supports both
+> `@douyinfe/semi-ui` and version-suffixed packages like `@douyinfe/semi-ui-19` (also for `semi-icons`).
+
 ## Usage 
 
 ### Install 

packages/semi-rspack/src/rule.ts

@@ -5,7 +5,8 @@ import { stringifyVariableRecord } from './utils';
 
 export function createSourceSuffixLoaderRule(_opts?: SemiWebpackPluginOptions) {
     return {
-        test: /@douyinfe(\/|\\)+semi-(ui|icons)(\/|\\)+.+\.js$/,
+        // Support packages like @douyinfe/semi-ui-19, @douyinfe/semi-icons-19
+        test: /@douyinfe(\/|\\)+semi-(ui|icons)(-\d+)?(\/|\\)+.+\.js$/,
         use: [{ loader: SOURCE_SUFFIX_LOADER }],
     };
 }
@@ -27,7 +28,8 @@ export function createThemeLoaderRule(opts?: SemiWebpackPluginOptions) {
         cssLayer: opts.cssLayer
     };
     const loaderInfo = {
-        test: /@douyinfe(\/|\\)+semi-(ui|icons|foundation)(\/|\\)+lib(\/|\\)+.+\.scss$/,
+        // Support packages like @douyinfe/semi-ui-19, @douyinfe/semi-foundation-19
+        test: /@douyinfe(\/|\\)+semi-(ui|icons|foundation)(-\d+)?(\/|\\)+lib(\/|\\)+.+\.scss$/,
         use: [{ loader: THEME_LOADER, options }],
     };
     let commonLoader: any[] = [
@@ -101,4 +103,4 @@ export function applySemiRules(opts?: SemiWebpackPluginOptions) {
         rules.push(createWebComponentLoaderRule(opts));
     }
     return rules;
-}
+}

packages/semi-webpack/README.md

@@ -5,6 +5,9 @@ The plugin is designed for Semi Design, support webpack4 and webpack5, provides
 - Custom theme
 - Replace prefix of CSS selector 
 
+> Note: The plugin detects Semi related dependencies by package path. It supports both
+> `@douyinfe/semi-ui` and version-suffixed packages like `@douyinfe/semi-ui-19` (also for `semi-icons`).
+
 ## Usage 
 
 ### Install 
@@ -166,4 +169,4 @@ Type: `(loaderList:any[])=>any[]`
 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.
 
 
-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.
+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.

packages/semi-webpack/src/semi-webpack-plugin.ts

@@ -29,6 +29,11 @@ export interface SemiThemeOptions {
     name?: string
 }
 
+// Support packages like @douyinfe/semi-ui-19, @douyinfe/semi-icons-19
+// Only allow numeric suffix to avoid over-matching non-Semi packages.
+const SEMI_LIB_JS_RE = /@douyinfe\/semi-(ui|icons)(-\d+)?\/lib\/.+\.js$/;
+const SEMI_LIB_SCSS_RE = /@douyinfe\/semi-(ui|icons|foundation)(-\d+)?\/lib\/.+\.scss$/;
+
 export default class SemiWebpackPlugin {
 
     options: SemiWebpackPluginOptions;
@@ -92,7 +97,7 @@ export default class SemiWebpackPlugin {
 
     omitCss(module: any) {
         const compatiblePath = transformPath(module.resource);
-        if (/@douyinfe\/semi-(ui|icons)\/lib\/.+\.js$/.test(compatiblePath)) {
+        if (SEMI_LIB_JS_RE.test(compatiblePath)) {
             module.loaders = module.loaders || [];
             module.loaders.push({
                 loader: path.join(__dirname, 'semi-omit-css-loader')
@@ -102,13 +107,13 @@ export default class SemiWebpackPlugin {
 
     customTheme(module: any) {
         const compatiblePath = transformPath(module.resource);
-        if (/@douyinfe\/semi-(ui|icons)\/lib\/.+\.js$/.test(compatiblePath)) {
+        if (SEMI_LIB_JS_RE.test(compatiblePath)) {
             module.loaders = module.loaders || [];
             module.loaders.push({
                 loader: path.join(__dirname, 'semi-source-suffix-loader')
             });
         }
-        if (/@douyinfe\/semi-(ui|icons|foundation)\/lib\/.+\.scss$/.test(compatiblePath)) {
+        if (SEMI_LIB_SCSS_RE.test(compatiblePath)) {
             const scssLoader = require.resolve('sass-loader');
             const cssLoader = require.resolve('css-loader');
             const styleLoader = require.resolve('style-loader');
@@ -199,4 +204,3 @@ export default class SemiWebpackPlugin {
         }, '');
     }
 }
-