gulp-autoprefixerがうまく機能しない

実現したいこと

gulp-autoprefixerを正常に動作するようにする

前提

gulpを使用して、Sassのコンパイル環境を作りました。cssへのコンパイルはできた状態です。そしてベンダープレフィックスを自動で付与したいと思い、gulp-autoprefixerをインストールし使用したところ、object-fitにしかベンダープレフィックスが付与されず、liner-gradientやgrid、transformなどには付与されません。object-fit以外にもベンダープレフィックスを付与したいです。下記のコードで何か間違っていればご指摘いただきたいです。ヒント、またはアドバイスなどいただけると幸いです。

該当のソースコード

package.json
1{
2  "name": "_gulp",
3  "version": "1.0.0",
4  "description": "",
5  "main": "gulpfile.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "dependencies": {
13    "autoprefixer": "^10.4.14",
14    "browser-sync": "^2.29.0",
15    "gulp": "^4.0.2",
16    "gulp-autoprefixer": "^8.0.0",
17    "gulp-dart-sass": "^1.0.2",
18    "gulp-notify": "^4.0.0",
19    "gulp-plumber": "^1.2.1",
20    "gulp-postcss": "^9.0.1"
21  },
22  "browserslist": [
23    "last 10 versions",
24    "ie >= 11",
25    "Android >= 4"
26  ]
27}

gulpfile.js
1const gulp = require('gulp');//gulp本体
2
3//scss
4const sass = require('gulp-dart-sass');//Dart Sass はSass公式が推奨 @use構文などが使える
5const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない
6const notify = require("gulp-notify"); // エラー発生時のアラート出力
7const browserSync = require("browser-sync"); //ブラウザリロード
8const autoprefixer = require("gulp-autoprefixer");
9
10
11
12// 入出力するフォルダを指定
13const srcBase = '../_static/src';
14const assetsBase = '../_assets';
15const distBase = '../_static/dist';
16
17
18const srcPath = {
19  'scss': assetsBase + '/scss/**/*.scss',
20  'html': srcBase + '/**/*.html'
21};
22
23const distPath = {
24  'css': distBase + '/css/',
25  'html': distBase + '/'
26};
27
28
29/**
30 * sass
31 *
32 */
33const cssSass = () => {
34  return gulp.src(srcPath.scss, {
35    sourcemaps: true
36  })
37    .pipe(
38      //エラーが出ても処理を止めない
39      plumber({
40        errorHandler: notify.onError('Error:<%= error.message %>')
41      }))
42    .pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed
43    .pipe(autoprefixer())
44    .pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先
45    .pipe(browserSync.stream())
46    .pipe(notify({
47      message: 'Sassをコンパイルしました！',
48      onLast: true
49    }))
50}
51
52
53/**
54 * html
55 */
56const html = () => {
57  return gulp.src(srcPath.html)
58    .pipe(gulp.dest(distPath.html))
59}
60
61/**
62 * ローカルサーバー立ち上げ
63 */
64const browserSyncFunc = () => {
65  browserSync.init(browserSyncOption);
66}
67
68const browserSyncOption = {
69  server: distBase
70}
71
72/**
73 * リロード
74 */
75const browserSyncReload = (done) => {
76  browserSync.reload();
77  done();
78}
79
80/**
81 *
82 * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す
83 * series 順番に実行
84 * watch('監視するファイル',処理)
85 */
86const watchFiles = () => {
87  gulp.watch(srcPath.scss, gulp.series(cssSass))
88  gulp.watch(srcPath.html, gulp.series(html, browserSyncReload))
89}
90
91/**
92 * seriesは「順番」に実行
93 * parallelは並列で実行
94 */
95exports.default = gulp.series(
96  gulp.parallel(html, cssSass),
97  gulp.parallel(watchFiles, browserSyncFunc)
98);

scss
1header {
2    display: flex;
3    background-image: linear-gradient(to bottom, #8BCC8E 0%, #A7F5AB 100%);
4    object-fit: cover;
5    display: grid;
6    transform: translateY(-50%);
7    align-items: center;
8  }

以下、上記scssをコンパイルしたcssです。

css
1header {
2  display: flex;
3  background-image: linear-gradient(to bottom, #8BCC8E 0%, #A7F5AB 100%);
4  -o-object-fit: cover;
5     object-fit: cover;
6  display: grid;
7  transform: translateY(-50%);
8  align-items: center;
9}