package.jsonで指定したbrowserlistでプレフィクスが付与されない

前提・実現したいこと

package.jsonにbrowserlistを指定して、
AutoprefixerでIE9,10,Android4+,iOS8+にプレフィクスをつけるように
指定したつもりなのですが、正しく適用されません。

Autoprefixer自体が動かないわけではなく、
例えばgridプロパティを使えば-ms-gridの補完はしてくれます。
display:flexやtransformなどの古いブラウザ環境向けの補完がされない状態なので
正しく適用できるようにしたいのですが、どこが悪いのか分かりません。

発生している問題・エラーメッセージ

エラーは出ていませんが、
指定した古めの環境向けのプレフィクスが付与されません。

該当のソースコード

package.jsonの中身です。

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.6.4",
    "browser-sync": "^2.26.7",
    "browserslist": [
      "last 4 versions",
      "ie 9",
      "ie 10",
      "android >= 4",
      "ios_saf >=8"
    ],
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-changed": "^4.0.2",
    "gulp-ejs": "^4.1.2",
    "gulp-imagemin": "^6.1.1",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-pngquant": "^8.0.0",
    "postcss-gap-properties": "^2.0.0"
  }
}

試したこと

package.jsonにbrowserlistを記述するのではなく、
gulpfile.jsのautoprefixerのところにブラウザバージョンを指定する方法を試したところ、
そちらは意図したとおりにプレフィクスの付与が実行されました。
（コンパイル時に「package.jsonか.browserlistrcに変更しろ」との警告は表示されます）

なのでpackage.jsonの書き方が悪いのかな？
と思ったのですが何が悪いのか分からず…。
どなたか詳しい方いらっしゃいましたらご教授いただけますと助かりますm(_ _)m

補足情報（FW/ツールのバージョンなど）

package.jsonに記載した以外の環境は以下の通りです。

・OS：MacOSX 14.0.2（Mojave）
・Node：v12.2.0
・npm： v6.9.0

その他必要な情報がありましたらご指摘ください。

行動規範の内容に同意します

回答1件

ベストアンサー

問題の再現方法

以下のようなディレクトリ構造で、

project
├ dest
│ └ style.css
├ src
│ └ style.sass
├ gulpfile.js
└ package.json

package.json を以下のように、

JSON
1{
2  "name": "myproject",
3  "version": "1.0.0",
4  "description": "",
5  "main": "gulpfile.js",
6  "scripts": {
7    "gulp": "gulp"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "devDependencies": {
13    "autoprefixer": "^9.6.4",
14    "browser-sync": "^2.26.7",
15    "browserslist": [
16      "last 4 versions",
17      "ie 9",
18      "ie 10",
19      "android >= 4",
20      "ios_saf >=8"
21    ],
22    "del": "^5.1.0",
23    "gulp": "^4.0.2",
24    "gulp-changed": "^4.0.2",
25    "gulp-ejs": "^4.1.2",
26    "gulp-imagemin": "^6.1.1",
27    "gulp-plumber": "^1.2.1",
28    "gulp-postcss": "^8.0.0",
29    "gulp-rename": "^1.4.0",
30    "gulp-sass": "^4.0.2",
31    "imagemin-mozjpeg": "^8.0.0",
32    "imagemin-pngquant": "^8.0.0",
33    "postcss-gap-properties": "^2.0.0"
34  }
35}

Sass ファイル (今回は style.sass とする) を以下のように、

Sass
1.example
2  display: grid
3  transition: all .5s
4  user-select: none
5  background: linear-gradient(to bottom, white, black)
6
7
8.example > .box
9  display: flex
10  align-items: center

gulpfile.js を以下のようにした上で、 npx gulp コマンドを実行しました。

JavaScript
1const gulp = require("gulp");
2gulp.task('default', () => {
3    const autoprefixer = require('autoprefixer');
4    const postcss = require('gulp-postcss');
5    const sass = require("gulp-sass");
6
7    return gulp.src('./src/*.sass')
8        .pipe(sass().on('error', sass.logError))
9        .pipe(postcss([autoprefixer()]))
10        .pipe(gulp.dest('./dest'));
11});

すると、以下のような css ファイルが出力されました。

CSS
1.example {
2  display: grid;
3  transition: all .5s;
4  -webkit-user-select: none;
5     -moz-user-select: none;
6      -ms-user-select: none;
7          user-select: none;
8  background: linear-gradient(to bottom, white, black); }
9
10.example > .box {
11  display: flex;
12  align-items: center; }

しかし、 package.json の browserslist フィールドの内容どおりの設定が適用された場合、出力される CSS は以下のようになるはずです。このことから、質問文にある「プレフィクスをつけるように指定したつもりが、正しく付与されない」現象を再現出来ました。

CSS
1.example {
2    display: -ms-grid;
3    display: grid;
4    -webkit-transition: all .5s;
5    -o-transition: all .5s;
6    transition: all .5s;
7    -webkit-user-select: none;
8       -moz-user-select: none;
9        -ms-user-select: none;
10            user-select: none;
11    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
12    background: -webkit-linear-gradient(top, white, black);
13    background: -o-linear-gradient(top, white, black);
14    background: linear-gradient(to bottom, white, black);
15}
16
17.example > .box {
18    display: -webkit-box;
19    display: -webkit-flex;
20    display: -ms-flexbox;
21    display: flex;
22    -webkit-box-align: center;
23    -webkit-align-items: center;
24        -ms-flex-align: center;
25            align-items: center;
26}

問題の解決方法

問題の CSS の出力結果が、 browserslist フィールドに defaults クエリを設定したときと同じ出力結果となっていることから、何らかの理由で package.json の browserslist フィールドが無視されており、その結果として defaults クエリが使用されていると推測出来ます。これを念頭に置き、もう一度 package.json を見直してみると、 browserslist フィールドが devDependencies フィールド内に配置されていることがわかります。

JSON
1{
2  "name": "myproject",
3  "version": "1.0.0",
4  "description": "",
5  "main": "gulpfile.js",
6  "scripts": {
7    "gulp": "gulp"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "devDependencies": {
13    "autoprefixer": "^9.6.4",
14    "browser-sync": "^2.26.7",
15    "browserslist": [
16      "last 4 versions",
17      "ie 9",
18      "ie 10",
19      "android >= 4",
20      "ios_saf >=8"
21    ],
22    "del": "^5.1.0",
23    "gulp": "^4.0.2",
24    "gulp-changed": "^4.0.2",
25    "gulp-ejs": "^4.1.2",
26    "gulp-imagemin": "^6.1.1",
27    "gulp-plumber": "^1.2.1",
28    "gulp-postcss": "^8.0.0",
29    "gulp-rename": "^1.4.0",
30    "gulp-sass": "^4.0.2",
31    "imagemin-mozjpeg": "^8.0.0",
32    "imagemin-pngquant": "^8.0.0",
33    "postcss-gap-properties": "^2.0.0"
34  }
35}

Browserslist のソースコードを読むと、 package.json から browserslist フィールドの内容を読み出す処理には parsePackage 関数が使われており、この関数の内容は以下のようになっていることがわかります。これより、 browserslist フィールドは package.json のルートフィールドでなければ無視されてしまうことになります。

JavaScript
1function parsePackage (file) {
2  var config = JSON.parse(fs.readFileSync(file))
3  if (config.browserlist && !config.browserslist) {
4    throw new BrowserslistError(
5      '`browserlist` key instead of `browserslist` in ' + file)
6  }
7  var list = config.browserslist
8  if (Array.isArray(list) || typeof list === 'string') {
9    list = { defaults: list }
10  }
11  for (var i in list) {
12    check(list[i])
13  }
14
15  return list
16}

よって、 package.json を以下のように修正することで、 package.json の browserslist フィールドに従って、ベンダープレフィックスが付与されるようになります。

JSON
1{
2  "name": "myproject",
3  "version": "1.0.0",
4  "description": "",
5  "main": "gulpfile.js",
6  "scripts": {
7    "gulp": "gulp"
8  },
9  "keywords": [],
10  "author": "",
11  "license": "ISC",
12  "browserslist": [
13    "last 4 versions",
14    "ie 9",
15    "ie 10",
16    "android >= 4",
17    "ios_saf >=8"
18  ],
19  "devDependencies": {
20    "autoprefixer": "^9.6.4",
21    "browser-sync": "^2.26.7",
22    "del": "^5.1.0",
23    "gulp": "^4.0.2",
24    "gulp-changed": "^4.0.2",
25    "gulp-ejs": "^4.1.2",
26    "gulp-imagemin": "^6.1.1",
27    "gulp-plumber": "^1.2.1",
28    "gulp-postcss": "^8.0.0",
29    "gulp-rename": "^1.4.0",
30    "gulp-sass": "^4.0.2",
31    "imagemin-mozjpeg": "^8.0.0",
32    "imagemin-pngquant": "^8.0.0",
33    "postcss-gap-properties": "^2.0.0"
34  }
35}

CSS
1.example {
2  display: grid;
3  -webkit-transition: all .5s;
4  -o-transition: all .5s;
5  transition: all .5s;
6  -webkit-user-select: none;
7     -moz-user-select: none;
8      -ms-user-select: none;
9          user-select: none;
10  background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
11  background: -webkit-linear-gradient(top, white, black);
12  background: -o-linear-gradient(top, white, black);
13  background: linear-gradient(to bottom, white, black); }
14
15.example > .box {
16  display: -webkit-box;
17  display: -webkit-flex;
18  display: -ms-flexbox;
19  display: flex;
20  -webkit-box-align: center;
21  -webkit-align-items: center;
22      -ms-flex-align: center;
23          align-items: center; }

投稿2019/10/11 16:43

s8_chu

総合スコア14731

aKusano

2019/10/11 17:08

ありがとうございます！！！ browserslistの記述場所をpackage.jsonのルートフィールドに移動したら確かに目的のプレフィクスが付与されることを確認いたしました！！ルートに書かなきゃいけなかったんですね…。知りませんでした。。（検索してもそれらしき情報には当たらなかったような気がします…）実務的にはdefaultの動作でも実害はないとはいえ、理由が分からなくてたいへん気持ちが悪かったので、とても助かりました。いつもながら丁寧なご回答ありがとうございました。

行動規範の内容に同意します