今回の流れ
gulp-minify-cssから乗り換え
gulp-minify-cssでcssをminifyしてきたのですが、PostCSSへの流れと公式サイトの下記メッセージから、乗り換えを決意。
This package has been deprecated in favor of gulp-cssnano, which should offer more advanced optimizations.
Android2.3でレイアウト崩れ
minify前のcssでは正常なレイアウトがminify後のcssで崩れたので調査。
-webkit-box-sizing: border-box;のベンダープレフィックスが消えていたことが原因と判明。
※2.3では必要なんです…
なので、cssnanoについて再度確認。
cssnano
ベンダープレフィックスが除去できる
公式サイトを見てたら下記文言。
Removal of outdated vendor prefixes
はい、Google翻訳！
時代遅れのベンダープレフィックスの除去
時代遅れですいません。
cssnanoの機能をきちんと把握してませんでした。
デフォルト設定ではremoveしかできぬ
こんなコメントが。
In cssnano by default it only removes prefixes.
設定をうまくすればなんとかなりそう。
オプションについて
たくさんありますが、下記コードが目につきました。
cssnano.process(css, {autoprefixer: false});
falseしちゃうんですか。
autoprefixerが使える
.pipe(cssnano({
autoprefixer: {browsers: supported, add: true}
}))
削除だけではなく、オプションで普通に使えました。
結局止めました
.pipe(postcss([
cssnano({autoprefixer: false})
]))
諸事情によりautoprefixerは別で走らせていて、cssnanoでは不要なので止めました。
csswringがいいのでは説
cssnanoの多機能さに振り回されるなら、minifyについてはcsswringがいいのでは、という話も耳にしつつ、一旦はcssnanoで続けてみることにします。