【gulp エラー】Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.

エラーが発生した状況

npm で autoprefixer を v9 から v10 にアップデートし、gulp のCSSタスク(postcss関連含む)を走らせた時に発生

原因

• autoprefixer v10 で、必要とする postcss が v8 以上となった
• gulp-postcss(v8.0 ２年前から更新されていない) が依存している postcss が v7 のためエラーとなる
• 補足：postcss-cli も同様らしい

一時的な対処法

★★TODO: 後でちゃんと対処(時間がないのでとりあえず)

• autoprefixer のバージョンを9の最新版に下げる
  • npm uninstall autoprefixer
  • npm install --save-dev autoprefixer@9.8.6

解決法メモ (未検証)

• gulp-postcss の処理を、postcss で直接処理させるよう置き換える？
• 補足：一応 node.js を最新版(v14.11.0)にアップデートしておく
• gulpプラグインではない素の postcss 最新版(v8.x.x) をインストール npm install --save-dev postcss
• gulp-postcss の処理を、postcss で直接処理させるよう置き換え
• 正常に動作していることを確認後、gulp-postcss を削除

// @link https://www.npmjs.com/package/autoprefixer#javascript
// 参考用
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')

postcss([ autoprefixer ]).process(css).then(result => {
  result.warnings().forEach(warn => {
    console.warn(warn.toString())
  })
  console.log(result.css)
})

参考記事

• Version 10 is broken! · Issue #1359 · postcss/autoprefixer · GitHub
• Releases · postcss/autoprefixer · GitHub
• Release 8.0 “President Ose” · postcss/postcss · GitHub
• postcss/plugin.md at master · postcss/postcss · GitHub
• GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use 動かないコード