autoprefixer: Replace color-adjust to print-color-adjust.

[MatthiasPeltzer]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

_form_check.scss, line 28

color-adjust: exact; // Keep themed appearance for print

has to be

print-color-adjust: exact; // Keep themed appearance for print

in the future i think. it is depreceated.

Reduced test cases

no test link

What operating system(s) are you seeing the problem on?

Windows, macOS, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v5.1.3

[dkrnl]

same issue. and with postcss-fail-on-warn message failed my build :(

fix: npm install [email protected] --save-exact

[NicoAdrian]

Same issue here. Builds failing because of this.
The fixed proposed by @dkrnl didn't help me because I have react-scripts which depends on postcss-preset-env which depends on [email protected]

edit: fixed it by forcing the version of the peer dependency in my package.json:

"resolutions": {
    "autoprefixer": "10.4.5"
}

edit 2: resolutions is for yarn. for NPM, it's indeed overrides @gideonmulder

[Levdbas]

I ran into the same issue for Bootstrap 4.6.1

[RafaelKis]

I'm experiencing the same issue:

Using laravel-mix v6.0.43 which depends on autoprefixer v10.4.7.

Bootstrap will compile, but produces a warning:

1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

Once I update webpack.mix.js with the following, I'll get a bit more details:

mix.webpackConfig({ stats: { children: true } });

WARNING in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./resources/sass/app.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

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

[alimartondi]

I encountered the same issue when I created a project with create react app.
Bootstrap version: v5.1.3

[gideonmulder]

The fixes proposed by @dkrnl and @NicoAdrian didn't help me

Fixed it by forcing the version of the peer dependency in my package.json, note: I use node 16.15.0

"overrides": {
    "autoprefixer": "10.4.5"
 }

[bensti22]

"autoprefixer": "10.4.5" seem ignore the warning.

it is a temporary fix for me.
https://github.com/postcss/autoprefixer/blob/10.4.6/CHANGELOG.md

[jonathanfelicity]

All the above solution did not work for me :(.

[tpatalas]

Deleting and reinstalling fixed the issue for me. Currently on autoprefixer 10.4.7

[RadhaGupta91]

Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

Below solution didnt't work
add in package.json
"overrides": {
"autoprefixer": "10.4.7"
}
npm install

[mikebm]

You gotta use 10.4.5.

  "overrides": {
    "autoprefixer": "10.4.5"
  }

[RicLzPt]

npm install [email protected] --save-exact

This worked

[vineetdigit]

This most certainly didn't work for me.

npm install [email protected] --save-exact

But following helped remove the warning.

In the package.json of the top level directory of the react app, add the following section after the dependencies: {..}

"overrides": {
    "autoprefixer": "10.4.5"
  }

• delete package-lock.json
• \rm -rf node_modules
• npm install
• restart the react app with "react-scripts start"

The warning is no more. For more information about "dependencies", see following

https://www.stefanjudis.com/today-i-learned/how-to-override-your-dependencys-dependencies/

[Jrdelt]

This is always fun when React updates.

[mbrodala]

I'd suggest to move these things to a discussion since they do not really add value to the issue here. The issue is well-described and there's even a PR to fix it.

[frnangelim]

I am receiving this error after forcing "autoprefixer" to 10.4.5 .
"Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'fraction.js'"
Require stack:
16:03:13 - /sd/workspace/src/xxx/yyy/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/resolution.js
...

[mdo]

Fixed in v5 by #36258. v5.2.0 should drop next week.

[achur00]

Have this issue using tail wind , I have Tried the above methods but non seem to work, getting stuck is always annoying

[achur00]

after setting the stats to true in webpack.mix.js, It was resolved by running the 'npm install [email protected] --save-exact" command and updating my tailwind form to '0.5.0'.... thanks

[thinkjrs]

Have this issue using tail wind , I have Tried the above methods but non seem to work, getting stuck is always annoying

As @achur00 mentions tailwindcss users can upgrade tailwindcss form plugin to 0.5.1 to squelch this error per tailwindlabs/tailwindcss#8277 (comment)

[blancojuancruz]

npm install [email protected] that worked for me

[ojas-elawadhi]

I tried all the above fixes and none worked. But this did:

npm install [email protected]

After so much trouble this is working for me

[mehmetdemiray]

My solution for npm:

I addet overrides in package.json like this:

  "overrides": {
    "autoprefixer": "10.4.5"
  },

npm install [email protected] --save-exact

delete node_modules and package-lock.json

npm install

[mikiyasET]

This worked perfectly for me

npm install [email protected]

This worked for me too Thanks

[gass-git]

npm install [email protected]

Finally something that works!

[AdityaKakkar1402]

This most certainly didn't work for me.

npm install [email protected] --save-exact

But following helped remove the warning.

In the package.json of the top level directory of the react app, add the following section after the dependencies: {..}

"overrides": {
    "autoprefixer": "10.4.5"
  }

• delete package-lock.json
• \rm -rf node_modules
• npm install
• restart the react app with "react-scripts start"

The warning is no more. For more information about "dependencies", see following

https://www.stefanjudis.com/today-i-learned/how-to-override-your-dependencys-dependencies/

this works

[ntubrian]

all the practice mentioned above not work for me
me environment is using nvm for node 16.13.2
and dev deps:
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"autoprefixer": "10.4.5",
"bootstrap": "^5.1.3",
"dayjs": "^1.11.3",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

[martinjoshevski]

This most certainly didn't work for me.

npm install [email protected] --save-exact

But following helped remove the warning.

In the package.json of the top level directory of the react app, add the following section after the dependencies: {..}

"overrides": {
    "autoprefixer": "10.4.5"
  }

• delete package-lock.json
• \rm -rf node_modules
• npm install
• restart the react app with "react-scripts start"

The warning is no more. For more information about "dependencies", see following

https://www.stefanjudis.com/today-i-learned/how-to-override-your-dependencys-dependencies/

This worked for me thanks

[Y3ssirski]

me too

[panlam0405]

same issue. and with postcss-fail-on-warn message failed my build :(

fix: npm install [email protected] --save-exact

This works for me!!

[jbstrap]

This worked for me.

I added the following after dependencies

"overrides": {
    "autoprefixer": "10.4.5"
  }

then run the following command:
npm install

[mehmetyilmaz001]

This steps worked for me

1- Add the following lines to the packages.json

"overrides": {
    "autoprefixer": "10.4.5"
  }

2- Then run the command npm install