Webpack build failure when specifying CSS background-image style that has more than one URL

[dmorda]

Description

I recently upgraded from 2.32.4 to 3.5.1. I worked out all the migration issues and everything looked great when running it in development mode. However, when I ran npm run build I received a Webpack error related to the Css Minimizer indicating invalid URLs.

These two URLs were related to SVG images that I had used in a style to define a background image with more than one image. When I use a single image in the background image everything works OK, it's when I define more than one.

Steps to reproduce

component.js

import React from "react"
import * as styles from "./styles.module.css"

const MyComponent = () => {

  return (
    <div className={styles.coolBackground}>
      This is a cool background.
    </div>
  )
}

export default MyComponent

styles.module.css

.coolBackground {
  background: url("../../images/imageOne.svg"), url("../../images/imageTwo.svg");
}

Expected result

The build should complete successfully.

Actual result

The build failed when I used multiple images in the style. It worked with a single image, but when I defined more than one that's when it failed.

Here is the error from the npm run build command

failed Building production JavaScript and CSS bundles - 15.423s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

styles.7efdf6ee96f4e0277123.css from Css Minimizer
TypeError [ERR_INVALID_URL]: Invalid URL: /static/imageOne-1a73ab64c5638d4b6d12787b2811de7a.svg
    at /Volumes/Websites/www.domain.com/styles.7efdf6ee96f4e0277123.css:3963:3
    at new NodeError (node:internal/errors:363:5)
    at onParseError (node:internal/url:537:9)
    at new URL (node:internal/url:613:5)
    at /Volumes/Websites/www.domain.com/node_modules/postcss-svgo/dist/index.js:32:17
    at walk (/Volumes/Websites/www.domain.com/node_modules/postcss-value-parser/lib/walk.js:7:16)
    at ValueParser.walk (/Volumes/Websites/www.domain.com/node_modules/postcss-value-parser/lib/index.js:18:3)
    at minify (/Volumes/Websites/www.domain.com/node_modules/postcss-svgo/dist/index.js:22:23)
    at /Volumes/Websites/www.domain.com/node_modules/postcss-svgo/dist/index.js:116:9
    at /Volumes/Websites/www.domain.com/node_modules/postcss/lib/container.js:91:18
    at /Volumes/Websites/www.domain.com/node_modules/postcss/lib/container.js:74:18

File: styles.7efdf6ee96f4e0277123.css


 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

styles.83d0b537e6f9b021b6fa.css from Css Minimizer
TypeError [ERR_INVALID_URL]: Invalid URL: /static/imageTwo-1a73ab64c5638d4b6d12787b2811de7a.svg
    at /Volumes/Websites/www.domain.com/styles.83d0b537e6f9b021b6fa.css:3963:3
    at new NodeError (node:internal/errors:363:5)
    at onParseError (node:internal/url:537:9)
    at new URL (node:internal/url:613:5)
    at /Volumes/Websites/www.domain.com/node_modules/postcss-svgo/dist/index.js:32:17
    at walk (/Volumes/Websites/www.domain.com/node_modules/postcss-value-parser/lib/walk.js:7:16)
    at ValueParser.walk (/Volumes/Websites/www.domain.com/node_modules/postcss-value-parser/lib/index.js:18:3)
    at minify (/Volumes/Websites/www.domain.com/node_modules/postcss-svgo/dist/index.js:22:23)
    at /Volumes/Websites/www.domain.com/node_modules/postcss-svgo/dist/index.js:116:9
    at /Volumes/Websites/www.domain.com/node_modules/postcss/lib/container.js:91:18
    at /Volumes/Websites/www.domain.com/node_modules/postcss/lib/container.js:74:18

File: styles.83d0b537e6f9b021b6fa.css

Environment

 System:
    OS: macOS 11.3.1
    CPU: (8) arm64 Apple M1
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
    npm: 7.10.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    gatsby: ^3.5.1 => 3.5.1
    gatsby-background-image: ^1.5.3 => 1.5.3
    gatsby-cypress: ^1.5.0 => 1.5.0
    gatsby-plugin-google-analytics: ^3.5.0 => 3.5.0
    gatsby-plugin-image: ^1.5.0 => 1.5.0
    gatsby-plugin-manifest: ^3.5.0 => 3.5.0
    gatsby-plugin-offline: ^4.5.1 => 4.5.1
    gatsby-plugin-optimize-svgs: ^1.0.5 => 1.0.5
    gatsby-plugin-postcss: ^4.5.0 => 4.5.0
    gatsby-plugin-react-helmet: ^4.5.0 => 4.5.0
    gatsby-plugin-recaptcha: ^1.0.5 => 1.0.5
    gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0
    gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2
    gatsby-plugin-sharp: ^3.5.0 => 3.5.0
    gatsby-plugin-sitemap: ^4.1.0 => 4.1.0
    gatsby-source-filesystem: ^3.5.0 => 3.5.0
    gatsby-source-sanity: ^7.0.4 => 7.0.4
    gatsby-transformer-sharp: ^3.5.0 => 3.5.0

[LekoArts]

Hi, thanks for the issue!

Unfortunately this is an upstream issue we can't fix ourselves. Following the papertrail of webpack-contrib/css-minimizer-webpack-plugin#91 I eventually found the culprit & fix at cssnano: cssnano/cssnano#1050

You could apply the changes from there with https://www.npmjs.com/package/patch-package or don't import the SVG files with relative links (so that they are inlined) but reference them with absolute paths and place them inside the static folder: https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder