Replace gulp-cssnano and gulp-autoprefixer with gulp-postcss and respective packages

gulpfile.js/tasks/styles.js

@@ -1,11 +1,12 @@
 var path = require('path');
 var gulp = require('gulp');
 var sass = require('gulp-dart-sass');
-var cssnano = require('gulp-cssnano');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var cssnano = require('cssnano');
 var sourcemaps = require('gulp-sourcemaps');
 var size = require('gulp-size');
 var config = require('../config');
-var autoprefixer = require('gulp-autoprefixer');
 var simpleCopyTask = require('../lib/simplyCopy');
 var normalizePath = require('../lib/normalize-path');
 var renameSrcToDest = require('../lib/rename-src-to-dest');
@@ -37,8 +38,10 @@ gulp.task('styles:css', function() {
     });
 
     return gulp.src(sources, {base: '.'})
-        .pipe(cssnano(cssnanoConfig))
-        .pipe(autoprefixer(autoprefixerConfig))
+        .pipe(postcss([
+          cssnano(cssnanoConfig),
+          autoprefixer(autoprefixerConfig),
+        ]))
         .pipe(renameSrcToDest())
         .pipe(size({ title: 'Vendor CSS' }))
         .pipe(gulp.dest('.'))
@@ -63,8 +66,10 @@ gulp.task('styles:sass', function () {
             includePaths: includePaths,
             outputStyle: 'expanded'
         }).on('error', sass.logError))
-        .pipe(cssnano(cssnanoConfig))
-        .pipe(autoprefixer(autoprefixerConfig))
+        .pipe(postcss([
+          cssnano(cssnanoConfig),
+          autoprefixer(autoprefixerConfig),
+        ]))
         .pipe(size({ title: 'Wagtail CSS' }))
         .pipe(config.isProduction ? gutil.noop() : sourcemaps.write())
         .pipe(gulp.dest(function (file) {

package.json

@@ -42,8 +42,10 @@
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "@wagtail/stylelint-config-wagtail": "^0.1.0",
+    "autoprefixer": "^9.8.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "^8.1.0",
+    "cssnano": "^4.1.10",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.0",
@@ -54,10 +56,9 @@
     "eslint-plugin-jsx-a11y": "^1.5.3",
     "eslint-plugin-react": "^5.2.2",
     "expose-loader": "^0.7.5",
-    "gulp": "^4.0.0",
-    "gulp-autoprefixer": "^7.0.1",
-    "gulp-cssnano": "^2.1.3",
+    "gulp": "^4.0.2",
     "gulp-dart-sass": "^1.0.2",
+    "gulp-postcss": "^8.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-size": "^3.0.0",
     "gulp-sourcemaps": "~2.6.1",