I have several custom css properties defined on the root, and they are working fine on the development build, however they aren't loading on the production build. The custom properties are defined in index.css.

:root {
  --light-theme-background-color: #fafafa;
  --light-theme-text-color: #333;
  --light-theme-active-color: #cbcbcb;
  --dark-theme-background-color: #1d2327;
  --dark-theme-text-color: #227093;
  --dark-theme-active-color: #343434;
}

In the dev tools the custom properties are grayed out and when I hover I get the message that they are not defined.

https://imgur.com/a/Jd1UYzh

I have been using CRA for my project and for some reason it will not build (or deploy to heroku) when my css file is in any folder other than public. I have googled all over the internet and the only similar question had a problem solved by their own error in css. I have linted the css file and have found only warnings.

This is my current file structure

In index.js inside my src folder I have:

import React from 'react';
import ReactDOM from 'react-dom';
import './components/index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

And in every component file I have an import statement for the CSS.

I have tried moving the css file inside the src folder and changing the paths, but the only place it will successfully build is when it's inside the public folder with index.html and I link to the file.

I keep getting the error:

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

EDIT: I'm constantly doing trial and error to find the issue and it seems like it really is something that webpack may not be able to process in my css file. If I comment out the homepage.css file, it will build and work. I am currently trying to find the property that it cannot read. Anyone know if it's a css grid thing that it can't compile or if there is a list of properties that webpack can't compile?

EDIT 2: Ok guys I've spent like maybe 5 hours on this (including time from last night) and I finally find the problem. It seems that cra doesn't like me making my code cleaner and copying a banner gradient from Wes Bos' tutorial.

  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);

This was the issue. The var(--direction, left) does not work with the css-compiler (i'm guessing) in cra. This code was used to make THIS type of banner and to make less code. It works in my local dev on Chrome and Firefox, but I guess it's a no-no for cra. Hope this may help anyone in the future!