Fix color-adjust with autoprefixer 10.4.6

[amirhossein-karimi]

autoprefix, updated, and having trouble color-adjust.

autoprefixer respository change log
developer.mozilla print-color-adjust description

[mbrodala]

Fixes #36259

[zlach]

This is still broken for me

[mbrodala]

@zlach What does this mean exactly?

[zlach]

@zlach What does this mean exactly?

Oh, sorry, I just meant that after doing an npm install bootstrap on my React project (node v16.15.0) I still get a warning on npm start

WARNING in ./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(2482:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

webpack compiled with 1 warning

[jrochkind]

Thanks! Any chance of a backport to Bootstrap 4 as a bugfix?

This is mainly an issue for autoprefixer complaints, but it's very annoying, and I'm not sure if there's a good way for bootstrap 4 users to work around with a local override.

[peterlobster]

I'm with @zlach. After applying the patch, the error kept coming up...

[vite:css] Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

[mbrodala]

Well, the fix simply wasn't relased yet. 😅

[Aminat-Okunuga]

This is a serious issue I have been battling with for days now all to no avail. I am trying to consume an API I built with Laravel with react as its frontend but kept getting this warning and my pages are blank.

[lapc18]

To fix it temporarily:

1. Remove your "node_modules" folder
2. Remove your "package-lock.json" file
3. Add to your "package.json" file: "overrides": { "autoprefixer": "10.4.5" }
4. Finally, run: npm i --save-exact

Some details:

• React version: ^18.1.0
• Bootstrap: ^5.1.3
• cra-template: npx create-react-app my-app --template typescript
• Node version: v16.14.2
• NPM version: 8.6.0
• env: macOS Monterey v12.3.1 | intel processor

Hope it works for u!

[andrewnleon]

These steps did the trick for me as well thanks dude
Remove your "package-lock.json" file
Add to your "package.json" file: "overrides": { "autoprefixer": "10.4.5" }
Finally, run: npm i --save-exact

[Magiccamera]

Add to your "package.json" file: "overrides": { "autoprefixer": "10.4.5" }
Finally, run: npm i --save-exact
npm ERR! Override for autoprefixer@^10.4.7 conflicts with direct dependency
changed to: "overrides": { "autoprefixer": "^10.4.7" }
installs fine, but still get autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Somewhat irritated may abandon using react bootstrap altogether, I only wanted it for the Navbar

[zulnam]

Hi. Any eta on when 5.2.0 is being released? Workaround doesn't seem to work for me.