Multiple custom properties within linear gradient fails

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

postcss / postcss-custom-properties