After upgrade to the latest Gatsby, Sass base64 background images are not available in production build

I have *.scss file where I have next code

button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik04Ljc1IDE3LjYxMjNWMjIuMjUwM0M4Ljc1IDIyLjU3NDMgOC45NTggMjIuODYxMyA5LjI2NiAyMi45NjMzQzkuMzQzIDIyLjk4ODMgOS40MjIgMjMuMDAwMyA5LjUgMjMuMDAwM0M5LjczNCAyMy4wMDAzIDkuOTYgMjIuODkwMyAxMC4xMDQgMjIuNjk0M0wxMi44MTcgMTkuMDAyM0w4Ljc1IDE3LjYxMjNaIiBmaWxsPSIjMzY3MkY4Ii8+CjxwYXRoIGQ9Ik0yMy42ODQ5IDAuMTM5MDg5QzIzLjQ1NDkgLTAuMDIzOTExNCAyMy4xNTI5IC0wLjA0NTkxMTQgMjIuOTAyOSAwLjA4NTA4ODZMMC40MDI5MjIgMTEuODM1MUMwLjEzNjkyMiAxMS45NzQxIC0wLjAyMDA3NzYgMTIuMjU4MSAwLjAwMTkyMjQxIDEyLjU1NzFDMC4wMjQ5MjI0IDEyLjg1NzEgMC4yMjM5MjIgMTMuMTEzMSAwLjUwNjkyMiAxMy4yMTAxTDYuNzYxOTIgMTUuMzQ4MUwyMC4wODI5IDMuOTU4MDlMOS43NzQ5MiAxNi4zNzcxTDIwLjI1NzkgMTkuOTYwMUMyMC4zMzU5IDE5Ljk4NjEgMjAuNDE3OSAyMC4wMDAxIDIwLjQ5OTkgMjAuMDAwMUMyMC42MzU5IDIwLjAwMDEgMjAuNzcwOSAxOS45NjMxIDIwLjg4OTkgMTkuODkxMUMyMS4wNzk5IDE5Ljc3NTEgMjEuMjA4OSAxOS41ODAxIDIxLjI0MTkgMTkuMzYxMUwyMy45OTE5IDAuODYxMDg5QzI0LjAzMjkgMC41ODEwODkgMjMuOTE0OSAwLjMwMzA4OSAyMy42ODQ5IDAuMTM5MDg5WiIgZmlsbD0iIzM2NzJGOCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
}

which is a correct image already in base64 format.

But after I build the project and serve it with gatsby serve the same image is missed (encoded) and in the inspector I see the next code.

button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgOCAxNCI+PHBhdGggZmlsbD0iIzIxMkM0RiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNLjI5MyAxLjcwNyA1LjU4NiA3IC4yOTMgMTIuMjkzYTEgMSAwIDEgMCAxLjQxNCAxLjQxNGw2LTZhMSAxIDAgMCAwIDAtMS40MTVsLTYtNkExIDEgMCAwIDAgLjI5MyAxLjcwOHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
}

Should I adjust the plugin somehow, or am I missing something?

UPDATE: Thats because of svgo plugin in gatsby 3.7-3.8. For temporary or permanent fix :) use next code in gatsby-node.js

// 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`,
                // 'removeXMLNS',
                `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);
    }
    // replace webpack config with the modified object
    actions.replaceWebpackConfig(config);
  }
};

Solution

This issue is fixed in gatsby 3.8.1, to fix it you can update to the latest version if gatsby:

npm install gatsby@latest

More information at: https://github.com/gatsbyjs/gatsby/pull/32123