Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Post CSS processing is breaking variables on css when building app

See original GitHub issue

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

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

Expected behavior

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

Actual behavior

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

Reproducible demo

Issue Analytics

State:
Created 2 years ago
Reactions:10
Comments:10

Top GitHub Comments

12reactions

andres-upshowcommented, Nov 28, 2021

I was able to track the bug to some bugfix on color-string https://github.com/Qix-/color-string/issues/60 Specially this fix: https://github.com/Qix-/color-string/commit/09cba3771759a16ba3bf25ef1c7374cd1d4f2e10

Now, if you have a way to lock versions (we have it due to rush/pnpm) lock package color-string to version 1.7.0 and everything should go back to normal while you wait for a formal resolution. If you ejected CRA then disabling colormin cssnano’s default plugin also works.

This whole ordeal is the thing that pops on my mind when someone complaints about the broken ecosystem that is node modules, a bugfix on a library without proper semantic versioning causes a hot potato situation that wastes everybody’s time.

4reactions

ivanafanasyevcommented, Nov 26, 2021

Have same issue. In dev mode it works correctly, but after build variables goes wrong, like was described