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

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

To resolve the warning "autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated", pin the version of the autoprefixer package to 10.4.5 in your package.json file and rerun npm install.

Here is the complete stack trace.

Copied!
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

The color-adjust property has been deprecated and this causes issues with packages that rely on it.

Copied!
/* ⛔️ old, deprecated property */
.box {
  color-adjust: exact;
}

Newer versions of autoprefixer use the print-color-adjust property instead.

Copied!
/* ✅ new, correct property */
.box {
  print-color-adjust: exact;
}

The error is most commonly caused when using the bootstrap package.

Open your package.json file and pin your version of autoprefixer to 10.4.5.

Copied!
// 👇️ for NPM
{
  "overrides": {
    "autoprefixer": "10.4.5"
  },
  "dependencies": {},
  "scripts": {}
}

If you use yarn to manage your packages, set the resolutions property instead.

Copied!
// 👇️ for YARN
{
  "resolutions": {
    "autoprefixer": "10.4.5"
  },
  "dependencies": {},
  "scripts": {}
}

After you pin the version of autoprefixer in your package.json file, rerun your installation command.

Copied!
# for NPM
npm install

# for YARN
yarn

The issue should be resolved after setting the overrides or resolutions property in your package.json file and rerunning npm install.

# Pin the version of autoprefixer to 10.4.5

If the error persists, try to pin the version of the autoprefixer package to 10.4.5.

Copied!
# with NPM
npm install autoprefixer@10.4.5 --save-exact

# with YARN
yarn add autoprefixer@10.4.5 --exact

The --save-exact flag saves the installed package with an exact version in your package.json file.

The yarn equivalent of the flag is --exact as shown in the code sample.

# Delete your node_modules and reinstall your dependencies

If the issue persists, run the following commands to delete your node_modules folder and reinstall your dependencies.

On Windows, issue the following commands from the root directory of your project (where your package.json file is).

Copied!
# Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

npm install

On macOS and Linux, issue the following commands from the root directory of your project.

Copied!
# macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

npm install

Check if the issue persists after reinstalling your node modules.

# Upgrade your version of the bootstrap module

If the issue persists and you use the bootstrap module, try to upgrade its version.

Copied!
npm install bootstrap@latest

yarn add bootstrap@latest

Older versions of the module use the deprecated color-adjust property which causes issues.

If you get an error when issuing the command, rerun it with the --force flag.

Copied!
npm install bootstrap@latest --force

If the issue persists, try to restart your code editor and your terminal.

You can also try to find all occurrences of the color-adjust property and replace them with print-color-adjust.

The color-adjust property has been deprecated and this causes issues with packages that rely on it.

Copied!
/* ⛔️ old, deprecated property */
.box {
  color-adjust: exact;
}

Newer versions of autoprefixer use the print-color-adjust property instead.

Copied!
/* ✅ new, correct property */
.box {
  print-color-adjust: exact;
}

If the property is not set in your own codebase, it is most likely set in a .css file in your node_modules folder.

For example, you can try to open the bootstrap.min.css file in your node_modules folder and replace all occurrences of color-adjust with print-color-adjust.

However, this approach is very brittle as you would have to do this every time you reinstall your packages.