Repository navigation
Post CSS processing is breaking variables on css when building app #11685
Description
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)
Activity
ivanafanasyeu commentedon Nov 26, 2021
Have same issue. In dev mode it works correctly, but after build variables goes wrong, like was described
andres-upshow commentedon Nov 26, 2021
After trying to fix it by asking on postcss to no avail (they are kind of angry at you) I ejected the application and removed this portion of
config/webpack.config.jswhich fixed the issueThis is of course not ideal but I hope will shed some light on how to implement a proper fix
andres-upshow commentedon Nov 26, 2021
Now I'm confused
Going over the code of
optimize-css-assets-webpack-pluginfound no usage of the parser option, so it is defaulting to use cssnanoNow, cssnanno also has some changes on the last two days, so I will try to check what was changed over there.
andres-upshow commentedon Nov 26, 2021
Could be related to this update on cssnano cssnano/cssnano#1207
andres-upshow commentedon Nov 26, 2021
Confirmed on eject, if I disable
colorminthe issue goes away.vinayakfz commentedon Nov 27, 2021
I think you should have colormin argument outside the object of
minifyFontValues.This way you are sending arguments to minifyFontValues instead of disabling colormin's configuration.
BTW, This whole issue is a life-saver for me, suddenly our website blew up in staging environment. 😁
andres-upshow commentedon Nov 27, 2021
XxStunner commentedon Nov 27, 2021
@andres-upshow Thanks bro, I was able to fix the same issue in a nuxt.js project (lol) by editing the cssnano config.
andres-upshow commentedon 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: Qix-/color-string@09cba37
Now, if you have a way to lock versions (we have it due to rush/pnpm) lock package
color-stringto version 1.7.0 and everything should go back to normal while you wait for a formal resolution.If you ejected CRA then disabling
colormincssnano'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.
stale commentedon Jan 8, 2022
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.