Sentry Answers>JavaScript>

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

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.
  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark of Functional Software, Inc.