Multiple custom properties within linear gradient fails

[BPScott]

This issue originally began "Adding some CSS to a brand new create-react-app project makes the build fail". After a few hours I eventually got here (via postcss-preset-env) with what I believe is the most minimal test case.

Add the following to the bottom of test/basic.css and note that running npm test fails:

.test--linear-gradient {
	background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
}

Expected output (to be added at the bottom of test/basic.expect.css:

.test--linear-gradient {
	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%);
	background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
}

Actual output running npm test:

Lots of errors stating Cannot set property 'parent' of undefined

---

The reproduction for the root issue that started me down this merry path:

• npx create-react-app css-bug && cd css-bug
• Add the following to the bottom of src/App.css:

  .test--linear-gradient {
    background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
  }

• Run yarn build and watch it fail, citing an error on the line with the linear-gradient
• Run yarn eject to get into a state where you can customise the webpack build
• Edit config/webpack.config.prod.js and modify the options for the the postcss-preset-env plugin, modifying {... stage: 3} to be {... stage:3, features: { 'custom-properties': false}} to disable the custom-properties transform
• Run yarn build again and note that the build is now sucessful

[jonathantneal]

This was such a well written bug that I took a few moments to look at the problem, found where it came from in the code, and fixed it. Even better, the fix happens to improve the performance of the plugin!

So, this is resolved by 7b9b84b and has been published in v8.0.9.