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

Question

I installed autoprefixer and I get this warning:

npm install [email protected] --save-exact

WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.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.min.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

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

webpack compiled with 1 warning

Milliary

Could you tell us what research you have done? For example, there are a lot of comments about this here github.com/twbs/bootstrap/issues/36259 You may just need to use a more recent version. – Garrison

I tried by installing this then also I am getting the problem npm install [email protected] --save-exact – Milliary

Does this answer your question? ReactJs - Compiled with warning – Diarrhoea

Answer 1

Add following line in package.json:

If you're using yarn:

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

If you're using npm:

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

Sensorimotor

Worked! If it helps, here's the discussion in GitHub: github.com/twbs/bootstrap/issues/36259 – Phaedrus

Also needed to delete node_modules and yarn-lock.json, and run yarn again – She

Answer 2

The solution was to install bootstrap 5.2 beta using the command

npm install [email protected]

Colostomy

Answer 3

This issue is because of Autoprefixer v10.4.6+ color-adjust deprecation and it's replaced with print-color-adjust. It's currently fixed by Bootstrap v5.2.0-beta1. So you can update your Bootstrap version:

npm i [email protected]

---

Or, just override Autoprefixer plugin and downgrade it to previous version "10.4.5":

1. In package.json of your react app, add the following section after the dependencies: {...}

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

2. Run the command npm install

3. And finally npm start

Dacoit

Answer 4

I came across this error but unrelated to Bootstrap. It was with Next.js / Tailwind CSS.

I was getting this error:

warn  - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/styles/globals.css
Warning
(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/styles/globals.css

As part of the Next.js tailwind installation, tailwind suggests installing with postcss and autoprefixer.

I had updated the postcss and autoprefixer npm packages, but I was still getting this error.

To fix it I needed to update all of the tailwind plugins.

Here is an example of how to upgrade the tailwind css plugins, this is doing the whole tailwind installation:

npm install --save-dev tailwindcss@latest \
  @tailwindcss/typography@latest \
  @tailwindcss/forms@latest \
  @tailwindcss/aspect-ratio@latest \
  @tailwindcss/line-clamp@latest \
  postcss@latest \
  autoprefixer@latest

Diarrhoea

Answer 5

Upgrade bootstrap to 5.2.0-beta1 by running the following command:

npm install [email protected]

Source: https://github.com/twbs/bootstrap/issues/36259#issuecomment-1143073964

Meshed

Answer 6

For Rush.js users, you'll want to add these to your common/config/rush/common-versions.json:

  "preferredVersions": {
    "autoprefixer": "10.4.5",
    "postcss-preset-env": "7.4.3"
  },

because the latest version of postcss-preset-env (which is in turn required by react-scripts: "5.0.0") requires "autoprefixer": "10.4.5"

Negative

Answer 7

You can do this:

yarn add [email protected]

It worked for me.

Review

Answer 8

I think this error is because of the existence of both bootstrap and tailwind.

I just remove bootstrap, and the error disappears.

Crescent

Answer 9

My solution was the next but i use Tailwind not Bootstrap, maybe someone have my same issue:

npm install tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms@latest

Sledge

Same as with my answer: https://mcmap.net/q/293965/-autoprefixer-replace-color-adjust-to-print-color-adjust-the-color-adjust-shorthand-is-currently-deprecated-duplicate – Diarrhoea

Answer 10

npm install [email protected] worked for me

M16

Answer 11

If you need a solution with no need to touch the package.json or upgrade/downgrade autoprefixer , or remove bootstrap follow the steps:

1. search in vs code for color-adjust
2. it will find it in yours .css files you wrote (not in node modules folder)
3. replace it with print-color-adjust and save all the changed files

example :

before:

-webkit-print-color-adjust: exact;
color-adjust: exact;

after:
-webkit-print-color-adjust: exact;
print-color-adjust: exact;

Voiture

Answer 12

Go to ./node_modules/bootstrap/dist/css/bootstrap.min.css and Replace color-adjust to print-color-adjust and enter code here and type npm install [email protected] --save-exact This worked for me

Middleaged

Answer 13

go to \node_modules\bootstrap\dist\css\bootstrap.css, usually in the line 2482, edit

color-adjust: exact;

to

print-color-adjust: exact;

Bulkhead

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Allocation

Whatever is in node_modules shouldn't be edited since these files should always be fetched using the npm install command in another environment... – Colostomy