css background: linear-gradient variable error in building process

[phc284]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

css and stylesheet

Environment

1. node -v: 8.9.1
2. npm -v: 5.6.0
3. yarn --version (if you use Yarn):
4. npm ls react-scripts (if you haven’t ejected):

Then, specify:

1. Operating system: MacOS High Sieraa
2. Browser and version (if relevant): Chrome, Safari, Firefox (all most updated)

Steps to Reproduce

(Write your steps here:)

1. Enter code background: linear-gradient(to var(--direction, left), var(--navyblue), transparent); in a css style
2. run npm build or deploy to heroky and receive error

Expected Behavior

I thought it should have built correctly as the development server showed the css behavior correctly.

Actual Behavior

Build Error was found from the steps below

Reproducible Demo

Reproducing steps from my broken branch in github: HERE

1. Traverse into client -> src -> `components' folders
2. On line 207 fpr .websites-layout h2:before, .websites-layout h2:after there is a line of code for background: linear-gradient(to var(--direction, left), var(--navyblue), transparent);
3. The variable --direction is set in the next css style on line 212
4. When the snippet var(--direction, left) is included in the code, the build will fail
5. Running npm run build in the client folder or deploying to heroku will both produce the error:

./src/components/info.css
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'length' of undefined
    at Array.forEach (<anonymous>)
    at <anonymous>

6. I believe you should be able to reproduce this if you delete all the contents in homepage.css and only put in a style for background: linear-gradient(to var(--direction, left), var(--navyblue), transparent);

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs.