webpack + AutoPrefixerで、display:-webkit-flex;が消えてしまう問題

とある案件で、webpack + AutoPrefixer を使ってて、 CSS の出力結果から display: -webkit-flex; とかが何故か抜けててしまってて、 Android4 系とかの一部端末で横並びが効いてない事があったので、その時の実装メモ。

AutoPrefixer のドキュメントに記載がありましたが、 原因は、webpack とかのビルドツールにも AutoPrefixer が含まれていて、 そのツールを使って AutoPrefixer を使うとそのツールの デフォルトのブラウザリストを使うので、 結果的にプレフィックスを削除するよ、的な事のようでした。

AutoPrefixer のブラウザリストの設定は、 browserslist のファイルをルートに置くか、 package.json の key に browserslist を設定する事が推奨されているようなので、 package.json に設定を移す事で無事に解決できました。

webpack2 + React で CSS モジュールを構築した時も同じ問題に直面したりして、 webpack.config.js や gulpfile.js などに記載していた AutoPrefixer の Browserlist を、 こちらのpackage.jsonのように記載して解消されました。