今日は、みみです。
結構前からなのですが package.json が、かなりぐちゃぐちゃしてきたので、整理するために、改めて一個ずつお世話になっているライブラリをおさらいしてみようかと思って記事を書き始めました。が、全部網羅するのにいつまでかかるのか…。
初回は、Autoprefixer 。
自動でベンダープレフィックスを付けてくれるなんて、最初聞いたときは何て神ってんだと思いましたよね。今の子には当たり前かもしらんけども。
gulpのものとかもあるみたいですが、私が使っているのはコレ。
これは5年前からのライブラリだったんですね。なんか凄い長い気がしてたけれどそうでもなかった。でも、もうバージョン9だわ。こんだけお世話になっているのに、npmのページなんて最初ざーっと見たらほとんど見返さないし、作者名も初めて知ったよね。ai だなんて洒落てんなまた。
私は postcss-cli を通して使っています。
npx postcss *.css --use autoprefixer -d dist/ --no-mapて書くと、同じディレクトリ内のCSSファイルにベンダープレフィックスが付与されて dist 以下に出力されます。
プレフィックスの対象範囲の設定は browserslist で
これは browserlist という、これまたこれだけで1記事書ける素敵ライブラリがありまして。babelとかでもお世話になるのですが、対応ブラウザの範囲を簡単に設定できるライブラリです。
で、見返してほんと良かった！と思ったのだけれど、いつのまにかpackage.json に設定が直書き出来るようになっている！
あれ、コレ前からだった？見落としてたかな…？ともかくも、 package.jsonに対象範囲を書けるようになっています。素晴らしい。
実際にその設定で何が対象になるのかは、browserl.ist: A page to display compatible browsers from a browserslist string. でわかりやすくチェックできます。これも素晴らしいよね。
手動でプレフィックス作業をしたいところはコメントアウトできます
ココだけはプレフィックス自分でコントロールしたい！ていう微妙な場面では
/* autoprefixer: off */
@supports (transition: all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}てな感じで、 コントロールできます。
info でデバック
実際にどのブラウザが対象になってて、どのパラメータが当たってるのか、は
npx autoprefixer --infoを入れると、ダーッとリストを確認できます。これ知らなかったよね…。正直、@media の中とか信用してなかったわ…。
改めて見ても、いやはやよく出来てますね。まあ、ぜーんぶ、公式にちゃんと書いてあるんだけれども。
2018/10/16追記：
ということで、Gridのプレフィックス簡単に追加できるのいいなーと思って自分の環境で試してみたら、Grid どころか他も -webkit ぐらいしかプレフィックス入ってなくて？？？ってなったのでちょっと調査中です。こりゃPostCss完全移行案件だろうか…
2018/10/27追記： postcss-inline-svg を autoprefixer の後に入れてたからだけでした。grid の prefix もちゃんと動きます。ハラショー！
