Post CSS processing is breaking variables on css when building app

Created by: andres-upshow

Describe the bug

There is some post css script changing variables like --white to #fff

Did you try recovering your dependencies?

Started from scratch

Which terms did you search for in User Guide?

css, and I saw the section for post processing, but if this is intended please say so because it was working fine about 2 days ago

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/amephist/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: Not Found
    npm: 8.1.3 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app
2. edit index.css add something like a background-color: var(--white);
3. build

Expected behavior

Style background-color to be var(--white)

Actual behavior

Style background-color is changed to be var(#fff)

Reproducible demo