chore(deps): update all svgr packages to v6 (major) (#2420)

* chore(deps): update all svgr packages to v6 * refactor: migrate to svgr v6 Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
commercetools · Jan 20, 2022 · 02b0056 · 02b0056 · vercel · Jan 20, 2022
1 parent aa3b447
commit 02b0056
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 176 deletions.
diff --git a/.changeset/fuzzy-bees-melt.md b/.changeset/fuzzy-bees-melt.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/mc-scripts': patch
+'@commercetools-website/custom-applications': patch
+---
+
+Upgrade SVGR packages to v6
diff --git a/package.json b/package.json
@@ -102,9 +102,9 @@
     "@percy/cypress": "3.1.1",
     "@percy/puppeteer": "2.0.0",
     "@preconstruct/cli": "2.1.5",
-    "@svgr/cli": "5.5.0",
-    "@svgr/plugin-jsx": "5.5.0",
-    "@svgr/plugin-svgo": "5.5.0",
+    "@svgr/cli": "6.2.0",
+    "@svgr/plugin-jsx": "6.2.0",
+    "@svgr/plugin-svgo": "6.2.0",
     "@testing-library/cypress": "8.0.2",
     "@testing-library/react": "12.1.2",
     "@types/faker": "5.5.9",

diff --git a/packages/mc-scripts/package.json b/packages/mc-scripts/package.json
@@ -34,7 +34,7 @@
     "@commercetools-frontend/mc-dev-authentication": "20.10.6",
     "@commercetools-frontend/mc-html-template": "20.12.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.3",
-    "@svgr/webpack": "5.5.0",
+    "@svgr/webpack": "6.2.0",
     "autoprefixer": "10.4.0",
     "babel-loader": "8.2.3",
     "browserslist": "4.19.1",

diff --git a/packages/mc-scripts/src/config/create-webpack-config-for-development.js b/packages/mc-scripts/src/config/create-webpack-config-for-development.js
@@ -236,14 +236,18 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
             {
               loader: require.resolve('@svgr/webpack'),
               options: {
-                // NOTE: disable this and manually add `removeViewBox: false` in the SVGO plugins list
-                // See related PR: https://github.com/smooth-code/svgr/pull/137
                 icon: false,
                 svgoConfig: {
                   plugins: [
-                    { removeViewBox: false },
-                    // Keeps ID's of svgs so they can be targeted with CSS
-                    { cleanupIDs: false },
+                    {
+                      // https://github.com/svg/svgo#default-preset
+                      name: 'preset-default',
+                      params: {
+                        overrides: {
+                          removeViewBox: false,
+                        },
+                      },
+                    },
                   ],
                 },
               },

diff --git a/packages/mc-scripts/src/config/create-webpack-config-for-production.js b/packages/mc-scripts/src/config/create-webpack-config-for-production.js
@@ -253,14 +253,18 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
             {
               loader: require.resolve('@svgr/webpack'),
               options: {
-                // NOTE: disable this and manually add `removeViewBox: false` in the SVGO plugins list
-                // See related PR: https://github.com/smooth-code/svgr/pull/137
                 icon: false,
                 svgoConfig: {
                   plugins: [
-                    { removeViewBox: false },
-                    // Keeps ID's of svgs so they can be targeted with CSS
-                    { cleanupIDs: false },
+                    {
+                      // https://github.com/svg/svgo#default-preset
+                      name: 'preset-default',
+                      params: {
+                        overrides: {
+                          removeViewBox: false,
+                        },
+                      },
+                    },
                   ],
                 },
               },

diff --git a/svgr.config.js b/svgr.config.js
@@ -14,10 +14,16 @@ module.exports = {
   icon: false,
   svgoConfig: {
     plugins: [
-      { removeViewBox: false },
-      { prefixIds: true },
-      // Keeps ID's of svgs so they can be targeted with CSS
-      { cleanupIDs: false },
+      {
+        // https://github.com/svg/svgo#default-preset
+        name: 'preset-default',
+        params: {
+          overrides: {
+            removeViewBox: false,
+          },
+        },
+      },
+      'prefixIds',
     ],
   },
   plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],

diff --git a/website/package.json b/website/package.json
@@ -6,7 +6,7 @@
     "build": "./scripts/prebuild.sh && yarn generate-icons && gatsby build --prefix-paths --verbose --log-pages && yarn check-links",
     "start": "yarn generate-icons && gatsby develop",
     "check-links": "start-server-and-test 'yarn gatsby serve --prefix-paths' http://localhost:9000/custom-applications 'yarn linkinator http://localhost:9000/custom-applications'",
-    "generate-icons": "svgr -d src/icons/generated src/icons/svg && prettier --write '**/generated/*.js'"
+    "generate-icons": "svgr -d -- src/icons/generated src/icons/svg && prettier --write '**/generated/*.js'"
   },
   "dependencies": {
     "@commercetools-docs/gatsby-theme-docs": "18.0.1",
@@ -24,7 +24,7 @@
     "react-intl": "5.23.0"
   },
   "devDependencies": {
-    "@svgr/cli": "5.5.0",
+    "@svgr/cli": "6.2.0",
     "linkinator": "2.16.2",
     "prettier": "2.5.1",
     "start-server-and-test": "1.14.0"