feat: @mango-scripts/react-scripts rsbuild模式增加对svg-sprite-loader和css-…

…module的支持

packages/react-scripts/package.json

@@ -41,6 +41,7 @@
     "@mango-scripts/utils": "^2.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@rsbuild/core": "^0.2.4",
+    "@rsbuild/plugin-babel": "^0.2.17",
     "@rsbuild/plugin-check-syntax": "^0.2.13",
     "@rsbuild/plugin-react": "^0.2.4",
     "@rsbuild/plugin-stylus": "^0.2.13",
@@ -113,6 +114,7 @@
     "@types/loader-utils": "^2.0.6",
     "@types/lodash-es": "^4.17.12",
     "@types/resolve": "^1.20.6",
+    "@types/svg-sprite-loader": "^3.9.9",
     "@types/text-table": "^0.2.5",
     "@types/uglify-js": "^3.17.4",
     "@types/webpack-bundle-analyzer": "^4.6.3"

packages/react-scripts/src/rsbuild/config/config.mts

@@ -1,10 +1,11 @@
-import path from 'node:path'
+import { join } from 'node:path'
 
 import { defineConfig, loadConfig, mergeRsbuildConfig } from '@rsbuild/core'
 import { pluginReact } from '@rsbuild/plugin-react'
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
 import { pluginSvgr } from '@rsbuild/plugin-svgr'
 import { pluginStylus } from '@rsbuild/plugin-stylus'
+import { pluginBabel } from '@rsbuild/plugin-babel'
 // import { pluginCheckSyntax } from '@rsbuild/plugin-check-syntax'
 
 import { getEnv } from '../../common/getEnv.mjs'
@@ -29,6 +30,11 @@ export const getRsbuildConfig = async (
       pluginSvgr(),
       pluginStylus(),
       // pluginCheckSyntax(),
+      pluginBabel({
+        babelLoaderOptions: (config, { addPlugins }) => {
+          addPlugins([require.resolve('babel-plugin-jsx-css-modules')])
+        },
+      }),
     ],
     output: {
       polyfill: 'entry',
@@ -56,6 +62,21 @@ export const getRsbuildConfig = async (
       postcss: (config, { addPlugins }) => {
         // addPlugins(tailwindcss)
       },
+      bundlerChain(chain, utils) {
+        chain.module
+          .rule('svg')
+          .oneOf('sprite')
+          .test(/./)
+          .include.add(paths.svgSpritePath)
+          .end()
+          .before('svg-asset-url')
+          .use('compat-svg-sprite-loader')
+          .loader(join(__dirname, '../loader/compat-svg-sprite-loader.mjs'))
+          .options({ symbolId: 'icon-[name]' })
+          .end()
+          .use('svgo')
+          .loader(require.resolve('svgo-loader'))
+      },
     },
     source: {
       define: env.stringified,
@@ -65,7 +86,7 @@ export const getRsbuildConfig = async (
 
   const userConfig = await loadConfig({
     cwd: process.cwd(),
-    path: path.join(process.cwd(), 'mango.config.mjs'),
+    path: join(process.cwd(), 'mango.config.mjs'),
   })
 
   return mergeRsbuildConfig(defaultConfig, devConfig, userConfig)

packages/react-scripts/src/rsbuild/loader/compat-svg-sprite-loader.mts

@@ -0,0 +1,10 @@
+import svgSpriteLoader from 'svg-sprite-loader'
+
+function loader(this: any, source: string) {
+  // svg-sprite-loader workaround for rspack, with no extract support.
+  this._module = this._module || {}
+  this.target = this.target || 'web'
+  return svgSpriteLoader.call(this, source)
+}
+
+export default loader