gulp + postcss + autoprefixer でベンダープレフィックスが出力されなかった

9876 ワード
gulp postcss Autoprefixer gulp テキストリンク

やりたいこと

gulp + postcss + autoprefixer でCSSのベンダープレフィックスの指定を自動化したい

参考: https://qiita.com/yushimasu/items/0125e72a8810658b70d3

問題

出力されるCSSにベンダープレフィックスが出力されない。

期待される挙動

出力されるCSSにベンダープレフィックスが含まれて欲しい。

対象のコード

ディレクトリ構造

.
├── css
│   └── style.css
├── gulpfile.js
├── node_modules
├── package-lock.json
├── package.json
└── sass
    └── style.sass
package.json
{
  "name": "autoprefixer-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp:sass": "gulp sass",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "gulp": "^4.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "node-sass": "^4.14.0"
  }
}
gulpfile.js
'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
style.sass
div
  display: flex
style.css
div {
  display: flex; }

解決方法

.browserslistrcで対象ブラウザを指定する。

ex)

> 1%
last 2 versions
IE 9
IE 10
IE 11

詳細

まずはドキュメントを確認してみる。

とりあえず autoprefixer の options を確認すると

stats (object): custom usage statistics for > 10% in my stats browsers query.
overrideBrowserslist (array): list of queries for target browsers. Try to not use it. The best practice is to use .browserslistrc config or browserslist key in package.json to share target browsers with Babel, ESLint and Stylelint. See Browserslist docs for available queries and default value.

という記載がありました。

上記のオプションは「ベンダープレフィックスをつけるブラウザはなんですか？」という指定で、デフォルトでは > 10% in my stats という指定らしい。

これがどのブラウザを対象とするのかよく分かりませんが、 browserl.ist でこの指定を確認してみると、どうやら実質Chromeしか対応されないみたい？

(指定の仕方は調べていないので、確認方法は間違っているかも)

ということで、この対象ブラウザを広げてあげればベンダープレフィックスつくのかな？って感じで指定を変更してみます。

前述の引用より、指定を変更するには .browserslistrc ファイルで指定するか、 package.json に browserslist というキーで指定してね、ということなので、 package.json に以下追加。

"browserslist": [
    "defaults",
    "IE 10",
    "IE 9"
]

これでコンパイルすると、 display: -ms-flexbox; が増えたので、どうやらブラウザの指定を追加する必要があるということであっているみたいです。

※ブラウザの指定は .browserslistrc で行うのが一般的ですが、今回はシンプルに検証するために横着しました。

.browserslistrc を使った方が良いと思います。