autoprefixer now recommends using print-color-adjust instead of color-adjust. The color-adjust shorthand has been marked as deprecated and should be

After installing 'autoprefixer', a warning message pops up:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfce8e9f2edeff8fbf4e5f8efddacadb3a9b3a8">[email protected]</a> --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

javascripttwitter-bootstrapnpmpostcssautoprefixer

Answer №1

To include the following line in your package.json:

For those using yarn:

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

If you are a user of npm:

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

Answer №2

To resolve the issue, I decided to download and implement bootstrap 5.2 beta by using the following command:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad6cad4c986819085d5">[email protected]</a>

Answer №3

The reason for this issue stems from the deprecation of the color-adjust property in Autoprefixer v10.4.6, which has been replaced with print-color-adjust. The problem has been resolved in Bootstrap v5.2.0-beta1, so updating your Bootstrap version should fix it:

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829e829c81cec9d8cd9">[email protected]</a>

Alternatively, you can override the Autoprefixer plugin and downgrade to the previous version "10.4.5":

  1. In the package.json file of your React app, add the following section after the dependencies: {...}
"overrides": {
    "autoprefixer": "10.4.5"
 }

  1. Execute the command npm install

  2. Finally, run npm start

Answer №4

While working on my project, I encountered an error that wasn't related to Bootstrap but rather with Next.js and Tailwind CSS.

The error message I received was:

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

Following the Next.js tailwind installation guide, it was recommended to install tailwind with both postcss and autoprefixer.

Even after updating the npm packages for postcss and autoprefixer, the error persisted until I updated all the tailwind plugins as well.

To resolve this issue, I had to upgrade all of the tailwind css plugins by following the steps outlined in the upgrade guide:

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

Answer №6

If you are using Rush.js, make sure to include the following in your 

common/config/rush/common-versions.json
:

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

This is necessary because the most recent version of postcss-preset-env (which is required by react-scripts: "5.0.0") mandates that 

"autoprefixer": "10.4.5"
be included.

Answer №7

Try out this solution:

yarn add <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8f8e3e4e3e5f6e7d7a2b9a5b9a7baf5f2e3f6a6">[email protected]</a>

It actually worked for me!

Answer №8

The reason for this error might be due to having both bootstrap and tailwind in the project.

Once I removed bootstrap from the setup, the error was no longer present.

Answer №9

Here's how I solved it, but instead of using Bootstrap, I opted for Tailwind. Perhaps others facing the same issue might find this helpful:

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

Answer №10

After running npm install, I successfully got the [email protected] command to work for my project.

Answer №11

If you're looking for a solution that doesn't require any modifications to the package.json file or updating/downgrading autoprefixer, and without removing bootstrap, follow these steps:

  1. Open VS Code and search for color-adjust
  2. You will find it in your .css files that you have created (not in the node modules folder)
  3. Replace color-adjust with print-color-adjust and remember to save all the modified files

For example:

before:

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

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

Answer №12

Visit the directory 

./node_modules/bootstrap/dist/css/bootstrap.min.css
and Change color-adjust to print-color-adjust, then proceed with the following code: 
npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcddc9c8d3ccced9dad5c4d9cefc8d8c92889289">[email protected]</a> --save-exact
. This solution proved effective for me.

Answer №13

Head over to \node_modules\bootstrap\dist\css\bootstrap.css, typically around line 2482, and modify

color-adjust: exact;

to

print-color-adjust: exact;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with the functionality of the asynchronous socket.io JavaScript callback are being experienced

I am facing an issue with my JavaScript code that involves querying data from a database using Node.js and Socket.io. Currently, I have implemented setTimeout() functions to make it work, but I want to switch to using callbacks for better reliability. Howe ...

javascriptnode.jsasynchronouscallbacksocket.io

ForEach function does not work following a shallow copy

I'm encountering an issue where forEach is not recognized as a function. Can someone assist me with this problem? Essentially, I need to generate a shallow copy of filteredSettlements and use it for looping through the items. Below is a snippet of the ...

javascriptjqueryajaxforeach

What sets Express.js apart from koa2.js in handling asynchronous functions?

I've encountered a situation where I had to set up the router using Express, and it was functioning correctly with the following code: router.get('/',(req,res)=>{ queries.getAll().then(stickers=>{ res.json(stickers) }) ...

javascriptmysqlexpressasync-awaitkoa

Is there a way to mix up the sequence of information when replying?

There have been numerous instances where this question has been raised and addressed, such as here, here, and here. However, those discussions pertained to Bootstrap 4, which is approaching its End of Life as of today, 2021-10-20. Given that Bootstrap 5 i ...

csstwitter-bootstrapbootstrap-5

Adjusting the width of the rail in Material UI's vertical Slider component in React

After attempting to adjust the width and height of the rail property on the material ui slider I obtained from their website demo, I have encountered an issue with changing the thickness. import React from "react"; import { withStyles, makeStyles } from " ...

javascriptcssreactjsmaterial-ui

Click on a link to use jQuery to sort the order of the <li>

Looking to rearrange list items by clicking either move up or move down. <div> <ul> <li>Item A <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> <li>Item B <a class="m ...

javascriptjqueryhtmlsorting

Creating a new ES-6 class to extend express-js: Issues with binding getter and setter properties

I am intrigued by the idea of utilizing Express within an extended class. My goal is to create getter and setter methods for a property, but I'm facing the issue of these methods not being bound to the instances as desired. One way to work around this ...

javascripttypescriptexpressbindinges6-class

Detect Changes in JSON File Using Vue.js

One innovative idea involves monitoring changes in a JSON file and automatically updating the v-if condition when a value is modified. <div id="app"> <div v-if="content == 'one'"> <p>Content one</p> ...

javascriptvue.jswebpack

Ways to differentiate among various jasmine.Ajax.stubRequest invocations

I am facing a challenge with my testing setup where I have a series of tests that utilize knockout validation. Before calling the API that I intend to test, a check for a valid email is implemented. jasmine.Ajax.stubRequest('/api/register/').and ...

javascriptajaxknockout.jsjasmine

Using Laravel 8 to create connected dropdown menus with the power of Ajax

Struggling with setting up a dependent dropdown menu in Laravel 8 using Ajax. The first dropdown works fine, but the next two don't display any options. Being new to Laravel, I'm having trouble pinpointing the problem areas. Seeking assistance to ...

javascriptjqueryajaxlaravel

The persistent issue persists with the Sails.js Node server where the req.session remains devoid of any data, despite utilizing

Currently, I have an Ember app running on http://localhost:4200 and a Sails app running on http://localhost:1337. In order to set up a pre-signup survey policy in my Sails application, I have the following code in /api/controllers/ProcessSurveyController. ...

javascriptnode.jsember.jssails.jspassport.js

Having difficulty aligning ListItem to the right within a List

I am working with an array that contains objects which I need to display in ListItems of a List. My goal is to show these ListItems from the array Objects in a layout where odd numbers are on the left and even numbers are on the right. However, I am facing ...

javascriptcssreactjsmaterial-ui

Creating sophisticated TypeScript AngularJS directive

Recently, I came across a directive for selecting objects from checkboxes which can be found at this link: The issue I'm facing is that we are using TypeScript and I am unsure of how to implement the directive in TypeScript. From what I understand, ...

javascriptangularjstypescriptangular-directive

Unable to save data retrieved using jQuery JSONP

My current project involves fetching photo data from Flickr using a jQuery AJAX call with JSONP. However, instead of immediately using the data, I want to store it for future use. In some cases, users will be able to perform different queries on the pre-fe ...

javascriptjqueryajaxjsonpstore

When converting JavaScript to PHP using AJAX, PHP retrieves an empty array

I am attempting to send a file from JavaScript to PHP using AJAX, but PHP is receiving an empty array. Currently, I am working on creating a web page through which I can pass a file to PHP in order for it to access and save information from the file into ...

javascriptphpajax

In order to avoid errors, it is necessary to enclose "RawText "; }"" within an explicit <

Just started working with React and encountered this error message: The RawText "; }" needs to be wrapped in a specific tag Everytime I attempt to map my JSON array, this error pops up. I've heard it might be related to space characters, but I ca ...

javascriptreactjsreact-360

Shuffle math calculations involving subtraction by a percentage using node.js or JavaScript

Hello there! If you want to subtract, say 35%, from a number, you can use methods like this: var valueInString = "2383"; var num = parseFloat(valueInString); var val = num - (num * .35); console.log(val); But have you ever wondered how you could randomiz ...

javascriptnode.js

Node.js Express refuses to serve .js files with absolute URLs

I have encountered a perplexing issue with two files located in /public/widget, namely help.html and help.js http://localhost:8084/widget/help.html When entered into the address bar, it functions normally However, when attempting to access http://local ...

javascriptnode.jsexpress

Ways to determine if two variables point to the same object in javascript

Recently, I started learning JavaScript and came across the spread operator. From what I learned, it deep copies the top-level elements of an array or object but only shallow copies the nested arrays or objects. To visualize this concept in action, I tried ...

javascriptreactjsecmascript-6reference

Why is it that the LESS compiler fails to recognize classes that are created by a zero iterator

When working with my CSS sheet, I found that I needed to reset some Bootstrap 3 preset values in order to achieve my desired style. To do this, I started using utility classes like .m-b-0 which sets margin-bottom:0px. However, I encountered an issue with ...

csstwitter-bootstrapless