CSS variables with fallback values used in linear-gradient throws error in build process

Created by: solonaarmstrong-zz

Is this a bug report?

Yes, bug report.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

This issue is similar, but outdated.

Environment

Environment: OS: macOS High Sierra 10.13.6 Node: 10.8.0 Yarn: 1.9.4 npm: 6.2.0 Watchman: 4.9.0 Xcode: Xcode 10.0 Build version 10A255 Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed) react: ^16.5.2 => 16.5.2 react-dom: ^16.5.2 => 16.5.2 react-scripts: 2.0.4 => 2.0.4

Steps to Reproduce

1. npx create-react-app css-bug && cd css-bug
2. Add something like this to App.css

.App-header {
  --progress-lower: #ffcc00;
  --progress-upper: #3333cc;
  --App-header-progress: 25%;
  
  background-image: linear-gradient(
      to right,
      var(--progress-lower, transparent) 0%,
      var(--progress-lower, transparent) var(--App-header-progress, 0%),
      var(--progress-upper, transparent) var(--App-header-progress, 100%),
      var(--progress-upper, transparent) 100%
    );

3. The multiple fallback (default) values in the variables are the culprit.
4. yarn start

More details in this issue.

Expected Behavior

I expected to use multiple CSS variables with fallbacks without build errors.

Actual Behavior

It throws an error Unclosed bracket

./src/App.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Unclosed bracket (17:36)

  15 | 
  16 |   /* background-color: #282c34; */
> 17 |   background-image: linear-gradient(
     |                                    ^
  18 |       to right,
  19 |       var(--progress-lower) 0%,
  20 |       var(--progress-lower) 0%,

Reproducible Demo

This demo works in the sandbox and the issue seems to lie with postcss-custom-properties, but I'm posting this issue as reference for others who may run into the same problem.