[Bug]: SVGO Deepmerge not functioning as expected #2978
Description
Version
System:
OS: macOS 14.4
CPU: (10) arm64 Apple M1 Pro
Memory: 110.67 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Safari: 17.4
npmPackages:
@rsbuild/core: 1.0.0-alpha.5 => 1.0.0-alpha.5
@rsbuild/plugin-react: 1.0.0-alpha.5 => 1.0.0-alpha.5
@rsbuild/plugin-svgr: 1.0.0-alpha.5 => 1.0.0-alpha.5Details
I was trying to override the default SVGO configuration and I was unable to I assume it's because of the DeepMerge not functioning as expected.
Basically the default configuration is:
{
plugins: [
{
name: "preset-default",
params: {
overrides: {
// viewBox is required to resize SVGs with CSS.
// @see https://github.com/svg/svgo/issues/1128
removeViewBox: false
}
}
},
"prefixIds"
]
}
And I'm trying to disable the cleanupIds by adding the follow options
pluginSvgr({
mixedImport: true,
svgrOptions: {
svgoConfig: {
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false,
cleanupIds: false,
},
},
},
],
},
},
})
The deep merge resulted into:
{
"svgo": true,
"svgoConfig": {
"plugins": [
{
"name": "preset-default",
"params": {
"overrides": {
"removeViewBox": false
}
}
},
"prefixIds",
{
"name": "preset-default",
"params": {
"overrides": {
"removeViewBox": false,
"cleanupIds": false
}
}
}
]
}
}
From my understanding SVGO will only consider the first instance of the plugin and ignore subsequent ones.
SVG File
<svg id="wrapup-time-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path id="wrapup-time-background" d="m 78.831044,5.798472 c 4.81983,1.8730797 8.656314,5.078731 11.616304,9.229462 1.710259,2.39826 3.022328,4.962988 3.989926,7.528069 0.339092,0.898925 0.611267,1.734992 0.822933,2.487591 0.128659,0.457463 0.209358,0.789755 0.242215,0.948817 1.810168,7.521542 2.575736,15.656565 2.465189,24.043417 0.107264,8.054549 -0.721352,16.32087 -2.557537,24.040925 -0.039,0.186495 -0.11966,0.518794 -0.248267,0.976263 -0.211578,0.752606 -0.483665,1.588682 -0.822671,2.487615 -0.967354,2.565102 -2.279258,5.129853 -3.989474,7.528133 -2.960102,4.151029 -6.797177,7.356843 -11.611444,9.227224 -5.827534,2.31576 -16.436446,3.571875 -28.746653,3.681886 C 38.042142,97.870939 27.196322,96.56006 21.26748,94.298621 16.446841,92.425597 12.609904,89.219788 9.6497582,85.06877 7.9395212,82.6705 6.6275352,80.10576 5.6600587,77.540668 5.3210099,76.64174 5.0488795,75.805669 4.8372576,75.053066 4.7086242,74.595599 4.6279453,74.263304 4.5970194,74.112077 2.7055611,66.536823 1.9207205,58.433075 2.0323569,49.963193 1.9250644,41.906233 2.753082,33.640869 4.5889314,25.922209 4.6279451,25.735717 4.7086242,25.403422 4.8372576,24.945956 5.0488795,24.193353 5.3210099,23.357282 5.6600587,22.458355 6.6275352,19.893262 7.9395212,17.328522 9.6497582,14.930252 12.609904,10.779233 16.446841,7.5734249 21.27292,5.6983053 27.196903,3.4387398 38.043912,2.1279881 50.008319,2.0221243 62.048719,2.1288092 72.841786,3.4563161 78.831044,5.798472 Z" />
<path id="wrapup-time-progress" d="m 50.008319,2.0221243 c 12.0404,0.1066849 22.833467,1.4341918 28.822725,3.7763477 4.81983,1.8730797 8.656314,5.078731 11.616304,9.229462 1.710259,2.39826 3.022328,4.962988 3.989926,7.528069 0.339092,0.898925 0.611267,1.734992 0.822933,2.487591 0.128659,0.457463 0.209358,0.789755 0.242215,0.948817 1.810168,7.521542 2.575736,15.656565 2.465189,24.043417 0.107264,8.054549 -0.721352,16.32087 -2.557537,24.040925 -0.039,0.186495 -0.11966,0.518794 -0.248267,0.976263 -0.211578,0.752606 -0.483665,1.588682 -0.822671,2.487615 -0.967354,2.565102 -2.279258,5.129853 -3.989474,7.528133 -2.960102,4.151029 -6.797177,7.356843 -11.611444,9.227224 -5.827534,2.31576 -16.436446,3.571875 -28.746653,3.681886 C 38.042142,97.870939 27.196322,96.56006 21.26748,94.298621 16.446841,92.425597 12.609904,89.219788 9.6497582,85.06877 7.9395212,82.6705 6.6275352,80.10576 5.6600587,77.540668 5.3210099,76.64174 5.0488795,75.805669 4.8372576,75.053066 4.7086242,74.595599 4.6279453,74.263304 4.5970194,74.112077 2.7055611,66.536823 1.9207205,58.433075 2.0323569,49.963193 1.9250644,41.906233 2.753082,33.640869 4.5889314,25.922209 4.6279451,25.735717 4.7086242,25.403422 4.8372576,24.945956 5.0488795,24.193353 5.3210099,23.357282 5.6600587,22.458355 6.6275352,19.893262 7.9395212,17.328522 9.6497582,14.930252 12.609904,10.779233 16.446841,7.5734249 21.27292,5.6983053 27.196903,3.4387398 38.043912,2.1279881 50.008319,2.0221243" />
</svg>
When I "commented" out the initial SVGO config from the plugin, everything worked as expected.
Reproduce link
https://github.com/kamalbennani/rsbuild-svgo-config
Reproduce Steps
- run
pnpm i && pnpm dev - Check the Squircle SVG
- The ID attributes are being stripped out when they shouldn't be.