using SVG as background-image in css file causes bundle failure

[mfanuzzi]

Description

I've got a Gatsby 3.4.1** site with a global style.css (it's a port of an existing site). Some elements have a background-image that references a .svg file. All works fine in development mode, but on production build the following error occurs:

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

styles.ebaaa0ffca773b7aab9f.css from Css Minimizer
/home/mfan/work/client/uro001/styles.ebaaa0ffca773b7aab9f.css:17702:5: Unknown word [styles.ebaaa0ffca773b7aab9f.css:17702,5]
    at Input.error (/home/mfan/work/client/uro001/node_modules/postcss/lib/input.js:128:16)
    at Parser.unknownWord (/home/mfan/work/client/uro001/node_modules/postcss/lib/parser.js:561:22)
    at Parser.other (/home/mfan/work/client/uro001/node_modules/postcss/lib/parser.js:166:12)
    at Parser.parse (/home/mfan/work/client/uro001/node_modules/postcss/lib/parser.js:75:16)
    at parse (/home/mfan/work/client/uro001/node_modules/postcss/lib/parse.js:17:12)
    at new LazyResult (/home/mfan/work/client/uro001/node_modules/postcss/lib/lazy-result.js:64:16)
    at Processor.<anonymous> (/home/mfan/work/client/uro001/node_modules/postcss/lib/processor.js:142:12)
    at Processor.process (/home/mfan/work/client/uro001/node_modules/postcss/lib/processor.js:121:23)
    at Function.creator.process (/home/mfan/work/client/uro001/node_modules/postcss/lib/postcss.js:148:43)
    at minify (/home/mfan/work/client/uro001/node_modules/css-minimizer-webpack-plugin/dist/minify.js:102:32)

I saw this recent issue and though mine is a different message and cause I wonder if it is also due to an upstream issue from that same package. My issue occurs whether I use a url beginning with ~ or climb the tree with ../../. Yes, putting the image in static and using an absolute path works, but only because that stops it from bundling at all.

For some reason this only occurs with .svg files. It works fine with .png or .jpg.

Steps to reproduce

styles.css (just for argument's sake)

body {
  background-image: url('../images/anything.svg');
}

main.scss

@import '~/styles/css/style.css';

index.tsx

import '~/styles/main.scss';

Then run yarn build

Expected result

The site should build. The svg should be bundled.

Actual result

Build fails on Building production JavaScript and CSS bundles

Environment

 System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.10 - ~/yall/work/client/node_modules/.bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
  npmPackages:
    gatsby: ^3.4.1 => 3.4.1
    gatsby-image: ^3.4.0 => 3.4.0
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-google-tagmanager: ^3.4.0 => 3.4.0
    gatsby-plugin-manifest: ^3.4.0 => 3.4.0
    gatsby-plugin-netlify-cms: ^5.4.1 => 5.4.1
    gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0
    gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6
    gatsby-plugin-sass: ^4.4.0 => 4.4.0
    gatsby-plugin-sharp: ^3.4.1 => 3.4.1
    gatsby-plugin-sitemap: ^3.3.0 => 3.3.0
    gatsby-source-filesystem: ^3.4.0 => 3.4.0
    gatsby-transformer-sharp: ^3.4.0 => 3.4.0

No flags in gatsby-config

** Note: after writing this, I upgraded gatsby core + all plugins to 3.6.0 just to see if it would resolve the issue, but it didn't. The same error occurs in the same place.

npmPackages:
    gatsby: ^3.6.0 => 3.6.0
    gatsby-image: ^3.6.0 => 3.6.0
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-google-tagmanager: ^3.6.0 => 3.6.0
    gatsby-plugin-manifest: ^3.6.0 => 3.6.0
    gatsby-plugin-netlify-cms: ^5.6.0 => 5.6.0
    gatsby-plugin-react-helmet: ^4.6.0 => 4.6.0
    gatsby-plugin-react-svg: ^3.0.1 => 3.0.1
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6
    gatsby-plugin-sass: ^4.6.0 => 4.6.0
    gatsby-plugin-sharp: ^3.6.0 => 3.6.0
    gatsby-plugin-sitemap: ^3.3.0 => 3.3.0
    gatsby-source-filesystem: ^3.6.0 => 3.6.0
    gatsby-transformer-sharp: ^3.6.0 => 3.6.0

[LekoArts]

I still think this is an upstream issue and the PR fixing it was just merged yesterday (cssnano/cssnano#1133) but not published yet (https://github.com/cssnano/cssnano/releases). So until the release and you trying it out in a minimal reproduction I don't want to flag this as a bug in Gatsby just yet.

[mfanuzzi]

Thank you for your reply @LekoArts. I agree that this looks like an upstream issue. I'll wait till a version is published (hopefully soon?) so that I can use yarn resolutions to update it and test. If that does not resolve it I'll setup a minimal repro.

[mfanuzzi]

Update on this: cssnano recently published 5.0.5, which includes the fix for this issue.

I updated to the latest cssnano with yarn upgrade gatsby.