How do I fix the error autoprefixer: Replace color-adjust to print-color-adjust

Richard C.

The Problem

When building your web project you may encounter the error autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.. This can occur in a variety of technologies, including Laravel, PHP, React, Go, and webpack. The underlying cause is their use of a JavaScript npm package called Autoprefixer.

The CSS specification provided a property called color-adjust allowing you to specify how much a browser may alter your colors to suit the user’s screen. In 2022, the specification renamed this property to print-color-adjust. This caused problems as different software included this change at different times.

So when Autoprefixer started requiring all CSS input to be print-color-adjust instead of color-adjust, it broke the compilation of any other code using frameworks like Sass and Laravel that still used the old property name.

The Solution

The solution to this problem is to update all your software and build tools to the latest version. As of 2024, color-adjust is no longer used anywhere. New projects will not encounter this error.

However, if you are maintaining an old project where updating packages is not possible due to cascading build failures, you have two options:

• Find and replace all instances of color-adjust with print-color-adjust in the source code of your dependencies. Since you aren’t updating your dependencies, this change won’t be overwritten by updates and so won’t cause problems.
• Downgrade Autoprefixer to version 10.4.5, which is just before the deprecation of the old property happened. To do this, run npm install autoprefixer@10.4.5 --save-exact.