Post CSS processing is breaking variables on css when building app

[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

[ivanafanasyeu]

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

[andres-upshow]

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.js which fixed the issue

This is of course not ideal but I hope will shed some light on how to implement a proper fix

[andres-upshow]

Now I'm confused
Going over the code of optimize-css-assets-webpack-plugin found no usage of the parser option, so it is defaulting to use cssnano
Now, cssnanno also has some changes on the last two days, so I will try to check what was changed over there.

[andres-upshow]

Could be related to this update on cssnano cssnano/cssnano#1207

[andres-upshow]

Confirmed on eject, if I disable colormin the issue goes away.

          cssProcessorPluginOptions: {
            preset: ['default', { minifyFontValues: { removeQuotes: false, colormin: false } }],
          },

[vinayakfz]

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]

I think you should have colormin argument outside the object of minifyFontValues.
You are right, my bad

[XxStunner]

@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]

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-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.

[stale]

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.