PostCSS error: [object Object] is not a PostCSS plugin

Question

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']); 

Answer 1

@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.