34

The error is coming from the postcss plugin, I think I may have written it incorrectly.

I'm trying to add cssnano and autoprefixer to the postcss plugin.

gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143
        throw new Error(i + ' is not a PostCSS plugin');
        ^

Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15)
    at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25)
    at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10)
    at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:300:12)
    at writeOrBuffer (_stream_writable.js:286:5)
    at Transform.Writable.write (_stream_writable.js:214:11)
    at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
Mac-a45e60e72dad:gulp JoeKonst$

My code:

// Dependancies
var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    plumber = require('gulp-plumber'),
    autoprefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    compass = require('gulp-compass'),
    rename = require('gulp-rename'),
    nano = require('cssnano'),
    del = require('del'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass');

// Styles
gulp.task('styles', function(){
    gulp.src('sass/main.scss')
    .pipe(sass())
    .pipe(postcss([autoprefixer({browsers: ['last 2 versions']}), nano()]))
    .pipe(gulp.dest('css/'));

    gulp.watch('sass/**/*.scss', ['styles']);
});

// Tasks
gulp.task('default', ['styles']);
Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
Joe Consterdine
  • 1,035
  • 1
  • 18
  • 37

6 Answers6

46

@rizkit - I found the fix and it's simple. Just run npm i -d postcss and the problem is solved.

Basically, you need both gulp-postcss and postcss plugins in your dependencies for this to work correctly. I'm assuming the gulp-postcss plugin will need to update the postcss package reference in the project to fix it properly, so we only need to include gulp-postcss in the future.

Billy
  • 580
  • 4
  • 6
40

You are using the gulp-autoprefixer package. That's simply a wrapper around the original autoprefixer package that turns it into a gulp plugin, so you can do .pipe(autoprefixer()).

However postcss expects the original package itself, not the gulp plugin.

So instead of this:

autoprefixer = require('gulp-autoprefixer'),

You need to install the autoprefixer package and do this:

autoprefixer = require('autoprefixer'),
Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
  • 1
    Had the same issue also with gulp-cssnano - it also cannot be used as PostCSS plugin. Had to require and use the "cssnano" instead "gulp-cssnano". Visually it looks almost the same and as a Gulp newbie i must say it is ez to overlook. – The Vojtisek Nov 19 '16 at 00:08
  • extra benefit: now you can „suddenly“ use parameters inside your autoprefixer: ` .pipe(postcss([ autoprefixer({browsers: ['iOS ...']}) ]))` – Frank N Apr 07 '17 at 15:04
17

Tailwindcss & React issue

For anyone facing the above issue while setting up a react project with tailwindcss, running npm i postcss -D worked for me.

Damercy
  • 939
  • 8
  • 10
7

If you use autoprefixer 10 you might stumble upon that problem again, there is a github issue related to that with some links and explanations: https://github.com/postcss/autoprefixer/issues/1358

tl;dr:

  • for postcss-cli and gulp-postcss you have to wait for an update, for PostStylus you might never get an update.
  • or add postcss as a devDependency
RiZKiT
  • 2,107
  • 28
  • 23
1

In my case I was still getting this error along with cannot find build-manifest.json when I upgraded to Next js v 10 and upgraded tailwind, autoprefixer and postcss.

I had to upgrade yarn as well to finally get rid of the errors.

The updated dev dependencies in my package.json were as:

  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "babel-plugin-inline-react-svg": "^1.1.1",
    "postcss": "^8.3.0",
    "tailwindcss": "^2.1.2"
  }
Dharman
  • 30,962
  • 25
  • 85
  • 135
Arindam Dawn
  • 1,769
  • 2
  • 18
  • 35
0

Add below minimum devDependencies in your package.json

    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-preset-env": "^1.7.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "gulp": "4",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-eslint": "^6.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-mode": "^1.0.2",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-stylelint": "^13.0.0",
    "gulp-uglify": "^3.0.2",
    "prettier": "^2.0.5",
    "stylelint": "^13.3.3",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.17.2"
R.K.K
  • 7
  • 2