Getting Postcss warning without using it

Question

I'm getting this Postcss warning:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)

But I'm not using it. It's very annoying because, as you can see, the message is repeated several times.

I know why I'm getting the error (I don't have a Postcss config file or any plugins, stringifiers, etc, set) but I don't know why is Postcss installed in first place.

This is my package.json

{
  "name": "vip-english-website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  },
  "engines": {
    "node": "16.x"
  },
  "dependencies": {
    "@dzangolab/vue-accordion": "^1.2.0",
    "@nuxtjs/axios": "^5.13.6",
    "express": "^4.17.1",
    "googleapis": "^91.0.0",
    "vue-carousel": "^0.18.0",
    "vue-check-view": "^0.3.0",
    "vue-gapi": "^2.0.0",
    "vue-js-modal": "^2.0.1",
    "vuelidate": "^0.7.6"
  },
  "devDependencies": {
    "@nuxtjs/google-fonts": "^1.3.0",
    "core-js": "^3.19.1",
    "nuxt": "^2.15.8",
    "nuxt-windicss": "^2.0.12"
  }
}

Do anyone have any idea?

Hawker

remove lib one by one and find which one do this. – Crews

Answer 1

Is been 3 days of troubleshooting this error, finally the solution in the github discussion works for me.

I'm using the following dependencies

"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",

Github Issue - Allow to disable "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js

In nuxt.config.js, under the build options, add the following as shown below. That worked for me.

build: {
postcss: null,
}

Hope it helps

Devisor

That will disable any post-processing (i.e. the default nuxt postcss includes autoprefixer) – Socman

This is the only solution that removes that warning for me. But I would like to have autoprefixer. Any solution how I can pass some options to autoprefixer to remove that warning? – Fruitarian

Answer 2

just add to nuxt.config.js

build: {
 postcss: null,
 loaders: {
   vue: {
     prettify: false
   }
  }
}

Phenazine

Should be postcss: false instead of null – Disobey

Answer 3

PostCSS is a dependency of Nuxt. You can use npm ls {package_name} command in your project directory, to view package dependencies tree.
Issue was fixed in recent PostCSS release: https://github.com/postcss/postcss/issues/1375 , but Nuxt probably will update it only on next big release (v3).

Unquote

Answer 4

I'm using nuxt 2.15.8 & having the same issue.

The following command & config will supress the warning.

npm i -D @nuxt/postcss8 @nuxtjs/style-resources

In nuxt.config.js, edit/add:

buildModules: [
  '@nuxtjs/style-resources',
  '@nuxt/postcss8',
],

build: {
  postcss: {
    plugins: {
    },
    preset: {
    }
  }
}

Collect

It doesn't solve on my end. I'm on the same nuxt version as well. – Devisor

Updated solution – Collect

That works if you have autoprefixer – Socman

@Socman how exactly is the syntax? I tried: postcss: {plugins: {},preset: {autoprefixer: {},},}, but no success... – Fruitarian

@Fruitarian you'll need to use the exact code above (with empty {}) – Socman

was only able to get things to work with postcss: false – Disobey

Answer 5

In my case using Nuxt, I not only needed to add the following code to the Nuxt config to disable the warning, but also to actually make the autoprefixer work! (even if the autoprefixer comes by default in Nuxt and a .browserlistrc file exists)

  build: {
    postcss: {
      preset: {
        autoprefixer: {
          overrideBrowserslist: ['last 3 versions', '> 1%']
        }
      }
    }
  }

After a fresh Nuxt install I had the warning, and playing around with newer CSS rules, I noticed that without the above config, filter: grayscale(100%); would not get autoprefixed.

Editing the .browserlistrc file did not help.

Varices

Answer 6

For me it solved using npm install inside the project that presented these warnings. Maybe it works for someone else

Allista

That's not a sepecific solution. Kinda obvious too. – Arias