fix: svgo plugin to use collision resistant IDs (#3334)

* fix(svgo/r config): add prefixIds plugin to svgoConfig in webpack svgr-loader and vite-plugin-svgr in order to insure that there are no id collisions between svg files * chore: add changeset --------- Co-authored-by: Byron Wall <[email protected]> Co-authored-by: Tobias Deekens <[email protected]>
commercetools · Dec 7, 2023 · 225c110 · 225c110 · github-actions · Dec 7, 2023
1 parent 7e62ee1
commit 225c110
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/.changeset/angry-apes-marry.md b/.changeset/angry-apes-marry.md
@@ -0,0 +1,7 @@
+---
+"@commercetools-frontend/mc-scripts": patch
+---
+
+Avoid collisions of SVG IDs in webpack's SVGR loader and Vite SVGR plugin.
+
+More information about the approach can be found [here](https://github.com/svg/svgo/issues/1746#issuecomment-1803600573).
diff --git a/packages/mc-scripts/src/config/create-webpack-config-for-development.ts b/packages/mc-scripts/src/config/create-webpack-config-for-development.ts
@@ -16,6 +16,8 @@ import momentLocalesToKeep from /* preval */ './moment-locales';
 import paths from './paths';
 import vendorsToTranspile from './vendors-to-transpile';
 
+let svgoPrefixIdsCount = 0;
+
 const defaultToggleFlags: TWebpackConfigToggleFlagsForDevelopment = {
   generateIndexHtml: true,
   disableCoreJs: false,
@@ -250,6 +252,21 @@ function createWebpackConfigForDevelopment(
                         },
                       },
                     },
+                    // Avoid collisions with ids in other SVGs,
+                    // which was causing incorrect gradient directions
+                    // https://github.com/svg/svgo/issues/1746#issuecomment-1803600573
+                    //
+                    // Previously, this was a problem where unique ids
+                    // could not be generated since svgo@3
+                    // https://github.com/svg/svgo/issues/674
+                    // https://github.com/svg/svgo/issues/1746
+                    {
+                      name: 'prefixIds',
+                      params: {
+                        delim: '',
+                        prefix: () => svgoPrefixIdsCount++,
+                      },
+                    },
                   ],
                 },
               },

diff --git a/packages/mc-scripts/src/config/create-webpack-config-for-production.ts b/packages/mc-scripts/src/config/create-webpack-config-for-production.ts
@@ -21,6 +21,8 @@ import momentLocalesToKeep from /* preval */ './moment-locales';
 import paths from './paths';
 import vendorsToTranspile from './vendors-to-transpile';
 
+let svgoPrefixIdsCount = 0;
+
 const defaultToggleFlags: TWebpackConfigToggleFlagsForProduction = {
   // Allow to disable CSS extraction in case it's not necessary (e.g. for Storybook)
   enableExtractCss: true,
@@ -270,6 +272,21 @@ function createWebpackConfigForProduction(
                         },
                       },
                     },
+                    // Avoid collisions with ids in other SVGs,
+                    // which was causing incorrect gradient directions
+                    // https://github.com/svg/svgo/issues/1746#issuecomment-1803600573
+                    //
+                    // Previously, this was a problem where unique ids
+                    // could not be generated since svgo@3
+                    // https://github.com/svg/svgo/issues/674
+                    // https://github.com/svg/svgo/issues/1746
+                    {
+                      name: 'prefixIds',
+                      params: {
+                        delim: '',
+                        prefix: () => svgoPrefixIdsCount++,
+                      },
+                    },
                   ],
                 },
               },

diff --git a/packages/mc-scripts/src/vite-plugins/vite-plugin-svgr.ts b/packages/mc-scripts/src/vite-plugins/vite-plugin-svgr.ts
@@ -5,6 +5,8 @@ import fs from 'fs';
 import { createFilter } from '@rollup/pluginutils';
 import { transformWithEsbuild, type Plugin } from 'vite';
 
+let svgoPrefixIdsCount = 0;
+
 function vitePluginSvgr(): Plugin {
   const filter = createFilter('**/*.react.svg');
   return {
@@ -29,6 +31,21 @@ function vitePluginSvgr(): Plugin {
                     },
                   },
                 },
+                // Avoid collisions with ids in other SVGs,
+                // which was causing incorrect gradient directions
+                // https://github.com/svg/svgo/issues/1746#issuecomment-1803600573
+                //
+                // Previously, this was a problem where unique ids
+                // could not be generated since svgo@3
+                // https://github.com/svg/svgo/issues/674
+                // https://github.com/svg/svgo/issues/1746
+                {
+                  name: 'prefixIds',
+                  params: {
+                    delim: '',
+                    prefix: () => svgoPrefixIdsCount++ as unknown as string,
+                  },
+                },
               ],
             },
           },