PostCSS 8 support

[ai]

PostCSS 8.0 changelog

• Move postcss to peerDependencies
• Update install docs
• Update postcss version

[mubaraqwahab]

I got the following error just now. I'm guessing it's related to this issue.

[21:58:04] 'buildCSS' errored after 623 ms
[21:58:04] Error in plugin "gulp-postcss"
Message:
    PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
Details:
    fileName: /home/mubwa/.../main.css
    domainEmitter: [object Object]
    domainThrown: false

Stack:
Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (/home/mubwa/.../node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/mubwa/.../node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/mubwa/.../node_modules/postcss/lib/postcss.js:55:10)
    at /home/mubwa/.../node_modules/gulp-postcss/index.js:50:16

My buildCSS task looks like this:

// ...
const postcss = require("gulp-postcss");
const prefix = require("autoprefixer");
const cssnano = require("cssnano");

function buildCSS() {
  return src("src/scss/main.scss")
    .pipe(sass({ includePaths: ["node_modules/"] }).on("error", sass.logError))
    .pipe(purgecss({ content: ["src/**/*.html"] }))
    .pipe(postcss([prefix, cssnano]))
    .pipe(dest("_site/"));
}

Everything works fine if I remove Autoprefixer. What can I do to fix this please? Thank you.

[w0rm]

Just published a new version of gulp-postcss.

[dippas]

@w0rm I stll get the issue below even after upgrading gulp-postcss to v9 (only when autoprefixeris in v10)

[object Object] is not a PostCSS plugin

Am I missing something here?

[w0rm]

@dippas yeah, you need gulp-postcss 9.0, see the changelog here: https://github.com/postcss/gulp-postcss#changelog

[dippas]

@w0rm sorry my mistake I had updated to v9 and not v8 (i was confusing gulp-postcss with the postcss itself) and that's the error I got after upgrading it

[w0rm]

@dippas ah, I see. Since this error is coming from the PostCSS itself, maybe one of your plugins is not upgraded yet?

[dippas]

I have every dependency updated, when running npm i after deleting node_modules and package-lock.json I get this 2 warnings:

npm WARN autoprefixer@10.0.0 requires a peer of postcss@^8.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN gulp-postcss@9.0.0 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.

So I think I missing something basic here.

Do I have to run npm i postcss --save-dev ?

[w0rm]

@dippas yes! PostCSS should be installed as a peer dependency now: https://github.com/postcss/gulp-postcss#install

[dippas]

Yes after running npm i postcss --save-dev it solved the issue for me