gulp-sassのコンパイルがうまくいかないと思ったらautoprefixerが消してた話

TL; DR

この記事は、Gulpでsass(scss)をコンパイルしてる人がautoprefixerを噛ませていたら、ベンダプレフィクス消えてるかも。というお話。

環境

• Windows10
• WSL (Windowsの中にUbuntuが...!)
  • こちらに詳細(自分を売る)
• gulp v4
  • autoprefixer
  • gulp-sass
  • browser-sync (関係ないけど一応

やったこと

状況の確認

今回やりたかったことは、記事のタイトル一覧などの動的ページでタイトルを並べる時、
長すぎｨ！なタイトルを、CSSで以下のように三点リーダ（…）で省略したかった。

1行の時

.longBrilliantTitleName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

複数行の時

.quiteLongBrilliantTitleName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* clampしたい行数 */
  overflow: hidden;
}

※ただし2行以上の複数行ではwebkitを使用しているのでchrome,safariなどでしか使えない。

だが、何故かgulp-sassでcssを出力しても複数行で三点リーダが出ない。
で、出力されたcssを確認すると、

gulp-sassとautoprefixerを経て出力されたcss

.quiteLongBrilliantTitleName {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

あれ、小生の-webkit-box-orient: vertical;が消えてる...。

解決

どうやらautoprefixがベンダプレフィクスを消していた模様。なので安直ではあるが、gulpfiles.jsでscssをコンパイルする過程で、autoprefixerに、ベンダプレフィクスを消さないで。と頼んでみた。

gulpfile.js(適宜省略

gulp.task('scss', function() {
  return gulp.src(paths.scss)
    .pipe(sass(sassOptionsIsCoco))
    .pipe(autoprefixer({remove:false})) // 消さないで。の設定
    .pipe(gulp.dest(paths.css));
});

解決。
やったぜ。

参考