fix inline svg buggy optimization

temporary workaround for gatsbyjs/gatsby#31878

gatsby-node.js

@@ -4,20 +4,102 @@
  * See: https://www.gatsbyjs.com/docs/node-apis/
  */
 
-// You can delete this file if you're not using it
-
 const path = require('path')
-exports.onCreateWebpackConfig = ({ actions }) => {
-  actions.setWebpackConfig({
-    resolve: {
-      alias: {
-        '~components': path.resolve(__dirname, 'src/components'),
-        // '~containers': path.resolve(__dirname, 'src/containers'),
-        '~styles': path.resolve(__dirname, 'src/styles'),
-        '~img': path.resolve(__dirname, 'src/assets/img'),
-        '~fonts': path.resolve(__dirname, 'src/assets/fonts'),
-        '~images': path.resolve(__dirname, 'src/images'),
+
+const ALIASES = {
+  '~components': path.resolve(__dirname, 'src/components'),
+  // '~containers': path.resolve(__dirname, 'src/containers'),
+  '~styles': path.resolve(__dirname, 'src/styles'),
+  '~img': path.resolve(__dirname, 'src/assets/img'),
+  '~fonts': path.resolve(__dirname, 'src/assets/fonts'),
+  '~images': path.resolve(__dirname, 'src/images'),
+}
+
+// TODO: temporary workaround for https://github.com/gatsbyjs/gatsby/issues/31878
+exports.onCreateWebpackConfig = ({ actions, plugins, stage, getConfig }) => {
+  // override config only during production JS & CSS build
+  if (stage === 'build-javascript') {
+    // get current webpack config
+    const config = getConfig()
+
+    const options = {
+      minimizerOptions: {
+        preset: [
+          `default`,
+          {
+            svgo: {
+              full: true,
+              plugins: [
+                // potentially destructive plugins removed - see https://github.com/gatsbyjs/gatsby/issues/15629
+                // use correct config format and remove plugins requiring specific params - see https://github.com/gatsbyjs/gatsby/issues/31619
+                `removeUselessDefs`,
+                `cleanupAttrs`,
+                `cleanupEnableBackground`,
+                `cleanupIDs`,
+                `cleanupListOfValues`,
+                `cleanupNumericValues`,
+                `collapseGroups`,
+                `convertColors`,
+                `convertPathData`,
+                `convertStyleToAttrs`,
+                `convertTransform`,
+                `inlineStyles`,
+                `mergePaths`,
+                `minifyStyles`,
+                `moveElemsAttrsToGroup`,
+                `moveGroupAttrsToElems`,
+                `prefixIds`,
+                `removeAttrs`,
+                `removeComments`,
+                `removeDesc`,
+                `removeDimensions`,
+                `removeDoctype`,
+                `removeEditorsNSData`,
+                `removeEmptyAttrs`,
+                `removeEmptyContainers`,
+                `removeEmptyText`,
+                `removeHiddenElems`,
+                `removeMetadata`,
+                `removeNonInheritableGroupAttrs`,
+                `removeOffCanvasPaths`,
+                `removeRasterImages`,
+                `removeScriptElement`,
+                `removeStyleElement`,
+                `removeTitle`,
+                `removeUnknownsAndDefaults`,
+                `removeUnusedNS`,
+                `removeUselessStrokeAndFill`,
+                `removeXMLProcInst`,
+                `reusePaths`,
+                `sortAttrs`,
+              ],
+            },
+          },
+        ],
+      },
+    }
+    // find CSS minimizer
+    const minifyCssIndex = config.optimization.minimizer.findIndex(
+      (minimizer) => minimizer.constructor.name === 'CssMinimizerPlugin'
+    )
+    // if found, overwrite existing CSS minimizer with the new one
+    if (minifyCssIndex > -1) {
+      config.optimization.minimizer[minifyCssIndex] = plugins.minifyCss(options)
+    }
+    const modifiedAliases = {
+      ...config.resolve.alias,
+      ...ALIASES,
+    }
+
+    config.resolve.alias = modifiedAliases
+
+    // replace webpack config with the modified object
+    actions.replaceWebpackConfig(config)
+  } else {
+    actions.setWebpackConfig({
+      resolve: {
+        alias: ALIASES,
       },
-    },
-  })
+    })
+  }
 }

jsconfig.json

@@ -2,7 +2,7 @@
   "description": "This is to config VS Code to recongnise our aliases, aka https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9",
   "compilerOptions": {
     "baseUrl": ".",
-    "jsx": "preserve",
+    // "jsx": "preserve",
     "paths": {
       // "api": ["api"],
       // "globalstore": ["store.js"],

src/components/Header/style.module.scss

@@ -9,6 +9,6 @@
     justify-self: start;
   }
   @include b-d(sm) {
-    margin-bottom: 30px;
+    // Code...
   }
 }