Skip to main content

How to Resolve "autoprefixer: Replace color-adjust to print-color-adjust"

The Webpack build warning autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. is a common issue that appears when a dependency in your project (most often an older version of Bootstrap) uses an outdated CSS property. Autoprefixer, a tool that ensures CSS works across different browsers, is flagging this deprecated property.

This guide will explain the root cause of this warning and provide several clear, step-by-step solutions. The most robust fix involves using package manager overrides to force a compatible version of autoprefixer, ensuring a stable and warning-free build.

Understanding the Root Cause: Deprecated CSS​

The core of the problem is a change in the CSS specification.

  • Deprecated Property: color-adjust was a shorthand property used to control how colors are rendered for printing.
  • New Property: This has been replaced by the more specific print-color-adjust.

The warning appears because a CSS file in your project (usually from a third-party library like Bootstrap) is using the old color-adjust property. Newer versions of autoprefixer recognize that this is deprecated and emit a warning, suggesting the fix.

This is the cleanest and most reliable solution. It tells your package manager (NPM or Yarn) to use a specific version of autoprefixer for all dependencies in your project, regardless of what version they request. We will use a version of autoprefixer that does not emit this warning.

The logic:

  • By adding an overrides (for NPM) or resolutions (for Yarn) block to your package.json, you can force a specific sub-dependency version across your entire project.

Solution for NPM​

Add the following overrides block to your package.json file.

{
  "name": "my-project",
  "version": "1.0.0",
  "overrides": {
    "autoprefixer": "10.4.5"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "react": "^18.0.0"
  }
}

Solution for Yarn​

Add the following resolutions block to your package.json file.

{
  "name": "my-project",
  "version": "1.0.0",
  "resolutions": {
    "autoprefixer": "10.4.5"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "react": "^18.0.0"
  }
}

After adding the block, delete your node_modules folder and package-lock.json (or yarn.lock) file, and then run a fresh installation:

# For NPM
npm install

# For Yarn
yarn install

Solution 2: Manually Pin the autoprefixer Version​

If overrides do not work, you can try to install a specific version of autoprefixer directly into your project's devDependencies.

For example:

# For NPM
npm install --save-dev --save-exact autoprefixer@10.4.5

# For Yarn
yarn add --dev --exact autoprefixer@10.4.5
  • --save-exact (or --exact for Yarn) is important here. It ensures that the exact version 10.4.5 is saved to your package.json, preventing accidental updates that could reintroduce the warning.

Solution 3: Update the Offending Package (e.g., Bootstrap)​

The warning is often a symptom of an outdated dependency. The long-term solution is to update the package that is using the deprecated CSS.

The problem:

  • An older version of bootstrap in your package.json might be causing the issue.

The solution is to update the package to its latest version.

# For NPM
npm install bootstrap@latest

# For Yarn
yarn add bootstrap@latest

Newer versions of popular libraries like Bootstrap have been updated to use the correct print-color-adjust property, which will resolve the warning at its source.

If All Else Fails: A Clean Reinstall​

Sometimes, your node_modules folder or package manager cache can get into a corrupted state. A full, clean reinstall can resolve stubborn dependency issues.

Solution:

# For macOS / Linux
rm -rf node_modules
rm -f package-lock.json yarn.lock
npm cache clean --force
npm install

# For Windows (CMD)
rd /s /q "node_modules"
del package-lock.json
del yarn.lock
npm cache clean --force
npm install

Conclusion​

The Replace color-adjust to print-color-adjust warning is a dependency-related issue that is best solved at the package management level.

  • The most effective and recommended solution is to use overrides (NPM) or resolutions (Yarn) in your package.json to force a compatible version of autoprefixer (like 10.4.5).
  • Updating the root dependency (like bootstrap) to its latest version is the best long-term fix.
  • Avoid manually editing files inside your node_modules folder, as these changes will be lost the next time you install dependencies.

Table of Contents