Parcel: Parcel hangs when trying to compile CSS that includes an inline SVG background image that uses CSS custom properties fallback value

[lazd]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

Zero configuration :)

Command:

parcel build index.css

🤔 Expected Behavior

Run the following command:

git clone [email protected]:lazd/parcelsvgcustompropertyfallbackbug.git
cd parcelsvgcustompropertyfallbackbug
npm install
npm run test-pass

Note that parcel bundles successfully.

😯 Current Behavior

Run the following command:

git clone [email protected]:lazd/parcelsvgcustompropertyfallbackbug.git
cd parcelsvgcustompropertyfallbackbug
npm install
npm run test

Note that parcel hangs.

💁 Possible Solution

The SVG includes a fill attribute that has a CSS custom property with a fallback value, i.e.:

<svg xmlns='http://www.w3.org/2000/svg'>
  <path style='fill:var(--spectrum-alert-success-icon-color, var(--spectrum-semantic-positive-color-icon))'/>
</svg>

This causes parcel to hang. Removing the fallback value results in successful bundling (as in npm run test-pass):

<svg xmlns='http://www.w3.org/2000/svg'>
  <path style='fill:var(--spectrum-alert-success-icon-color)'/>
</svg>

🔦 Context

This happens when trying to include the https://github.com/adobe/spectrum-css Textfield component.

💻 Code Sample

See the repo here: https://github.com/lazd/parcelsvgcustompropertyfallbackbug

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.4
| Node | 12.7.0
| npm/Yarn | npm 6.10.0, yarn 1.12.3
| Operating System | macOS Mojave 10.14.6

[lazd]

Note that the existing usage of CSS custom properties in this example does nothing, but one could add a <style> tag inside of the embedded <svg> and it would, i.e.:

<svg xmlns='http://www.w3.org/2000/svg' height='12' viewBox='0 0 12 12' width='12'>
  <style>
  :root {
    --spectrum-alert-success-icon-color: red;
  }
  </style>

  <path style='fill:var(--spectrum-alert-success-icon-color, var(--spectrum-semantic-positive-color-icon))' d='M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z'/>
</svg>

[mischnic]

This is actually caused by the svgo optimizer itself (and is therefore present in Parcel 2 as well):

const SVGO = require("svgo");

const x = new SVGO();

x.optimize(
    `<svg xmlns='http://www.w3.org/2000/svg'>
  <path style='fill:var(--spectrum-alert-success-icon-color, var(--spectrum-semantic-positive-color-icon))'/>
</svg>`
).then(console.log); // hangs

Luckily for you, putting this cssnano.config.js in the project root will fix the issue (while leaving the other SVG minifier plugins enabled):

module.exports = {
    preset: [
        "default",
        {
            svgo: {
                plugins: [
                    {
                        convertStyleToAttrs: false
                    }
                ]
            }
        }
    ]
};

SVGO bug: https://github.com/svg/svgo/issues/1198

[lazd]

Thanks @mischnic, that worked perfectly!