Next v12 inline svg css background build failure

What version of Next.js are you using?

12.0.1, 12.0.2-canary.8

What version of Node.js are you using?

14.17.6

What browser are you using?

Chrome, Safari, Firefox

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

After upgrading to v12 we started seeing the following build error:

info  - Creating an optimized production build ...<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/src/styles/globals.css': No serializer registered for URIError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> URIError
info  - Creating an optimized production build  
Failed to compile.

./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./src/styles/globals.css
URIError: URI malformed
    at /Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/src/styles/globals.css:7:3
    at decodeURIComponent (<anonymous>)
    at Object.normalizeUrl (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/build/webpack/loaders/css-loader/src/utils.js:43:12)
    at /Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:101:31
    at walk (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/compiled/postcss-value-parser/index.js:1:5010)
    at ValueParser.walk (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/compiled/postcss-value-parser/index.js:1:326)
    at parseDeclaration (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:85:12)
    at Declaration (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/dist/build/webpack/loaders/css-loader/src/plugins/postcss-url-parser.js:206:39)
    at LazyResult.visitTick (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/node_modules/postcss/lib/lazy-result.js:456:16)
    at LazyResult.runAsync (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/node_modules/postcss/lib/lazy-result.js:372:30)
    at LazyResult.async (/Users/magross/Documents/Repos/js/scaffold-javascript-website--nextjs/node_modules/next/node_modules/postcss/lib/lazy-result.js:205:30)

Import trace for requested module:
./src/styles/globals.css
./src/pages/_app.js

In our stylesheet we have some svg backgrounds defined as custom properties like so:

CSS:

/* src/styles/globals.css */
:root {
  --bg-minus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(218, 7%, 24%)' d='M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z' /></svg>");
}

Import:

// src/pages/_app.js
import '../styles/globals.css';

function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default App;

Expected Behavior

Should build happily like it did in v11

To Reproduce

I was able to reproduce this by adding a background: url(...) rule with an svg in it to any css file in our project.

These url patterns trigger the failure:

// Plain svg
background: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='hsl(218, 7%, 24%)' d='M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z' /></svg>");

// Escaped svg
background: url("data:image/svg+xml,&lt;svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'&gt;&lt;path fill='hsl(218, 7%, 24%)' d='M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z' /&gt;&lt;/svg&gt;");

These do not:

// Generic image
background: url("https://systemuicons.com/images/icons/write.svg");

// Base64 encoded image
background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIxIiB2aWV3Qm94PSIwIDAgMjEgMjEiIHdpZHRoPSIyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMykiPjxwYXRoIGQ9Im0xNCAxYy44Mjg0MjcxLjgyODQyNzEyLjgyODQyNzEgMi4xNzE1NzI4OCAwIDNsLTkuNSA5LjUtNCAxIDEtMy45NDM2NTA4IDkuNTAzODM3MS05LjU1MjUyMTkzYy43ODI5ODk2LS43ODcwMDA2NCAyLjAzMTIzMTMtLjgyOTQzOTY0IDIuODY0MzY2LS4xMjUwNjc4OHoiLz48cGF0aCBkPSJtNi41IDE0LjVoOCIvPjxwYXRoIGQ9Im0xMi41IDMuNSAxIDEiLz48L2c+PC9zdmc+");

[timneutkens]

This was fixed on next@canary indeed 👍

[OZZlE]

I have 12.0.7 no customized .babelrc (I have pretty much standard installation) and still get this problem, why was this issue closed when it doesn’t work?