PostCSS 、 Autoprefixer の力を借りたかった話
はじめに
相変わらず HTML や TypeScript と戯れているわけなんですが、動きだけでなく見た目の部分も重要です。
で、まず全体の配置を指定したいと思ったのですが、これには CSS Grid を使うのが良さそうな気がしました。
で、調べてみると IE11 でも使うことができるらしい、と。
サンプルをコピペで動かしてみると、確かに IE11 でも正しく表示されている。。。！ いいですね(ﾟ∀ﾟ)！！
(割と新しめの技術 + IE でググるとだいたいどれも情報がいっぱい出てくるあたり、皆様の苦労が感じられます)
一点、サンプルの中に登場する Autoprefixer というものが気になりました。
今回必要となる -ms～ といったベンダープレフィックスを自動でつけてくれるとのこと(また不要なものを外してもくれるらしいです)。
じゃあこれも使ってみようか、と試してみたのが今回の話です。
コンパイラーを選ぶ
サイト上でコピペするとベンダープレフィックスをつけてくれるものもあるのですが、ちょっと試すのはともかく開発中やり続けるのは少々大変ですね。
https://autoprefixer.github.io/
ということで、 TypeScript における tsc などのように、コマンドなどで自動実行してくれるものが欲しいところ。
すると、 Autoprefixer は単体でというよりは AltCSS と呼ばれる CSS を便利にしたもののプラグインとして提供されているらしい、というところがわかりました。
じゃあそれも使っちゃえ！ということで、 Autoprefixer を使った情報が比較的多く、かつ Node.js でコンパイルできる PostCSS を使ってみることにしました。
コンパイル方法多すぎ問題
※ 手段が豊富なことは色々な利用シーンに対応してくれる、ということで、素晴らしいことであり、否定しているわけではありません。
念のため。
PostCSS の情報を調べると、非常にたくさんのコンパイル方法が紹介されています。
が、素人には選べない。。。
WebPack
とりあえず TypeScript で使っているし、ということで WebPack を試してみることにしたのですが、失敗しました。
というのも、 PostCSS のファイルを JavaScript(TypeScript) から呼び出しているわけではなかったためです。
じゃあ他は。。。とググった結果、 postcss-cli を使うことにしました。
ということでインストールします。
npm install --save postcss postcss-cli precss autoprefixer
PostCSS ファイルを postcss-cli でコンパイルする
WebPack と同じように、まずプロジェクト直下に設定ファイルを作成します。
postcss.config.js
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}
Autoprefixer と合わせて require で指定しているのは、 PostCSS から CSS に変換してくれる(多分) PreCSS です。
下記のコマンドでコンパイルすることができます。
npx postcss 変換前の PostCSSファイルパス -c postcss.config.js -d 出力先のディレクトリパス
または
npx postcss 変換前の PostCSSファイルパス -c postcss.config.js -o 出力先のファイルパス
とりあえず変換用にファイルを作る
pcss/page.css
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 50px 1fr 50px;
}
p {
span {
grid-column: 1;
grid-row: 2;
color: deepskyblue;
}
}
PostCSS とわかるように p span を親子関係にし、 Autoprefixer を試すため、 grid を使っています。
これをコンパイルしました。
npx postcss pcss/*.css -c postcss.config.js -d src
そして動かない Autoprefixer
実行した結果は下記のようになりました。
src/page.css
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 50px 1fr 50px;
}
p span {
grid-column: 1;
grid-row: 2;
color: deepskyblue;
}
むぅ。。。 PreCSS が通常の CSS に変換していることは確認できましたが、 ベンダープレフィックスが付いていない。。。
あれこれ調べてみた結果、(なぜか) postcss.config.js を下記のように変更すると正しく動作しました。
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({ "grid": true }),
require('precss')
]
}
grid を明示的に true にする必要があるようです。
また、これも理由がわからないのですが、 require('precss') を Autoprefixer より上に書くと、 Autoprefixer は効くのに PreCSS が効かない、という問題が発生しました。
腑に落ちないところは多くありますが、とにかくベンダープレフィックスも自動でつけられるようになりました。
やったね。
src/page.css
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 200px 1fr;
grid-template-columns: 200px 1fr;
-ms-grid-rows: 50px 1fr 50px;
grid-template-rows: 50px 1fr 50px;
}
p span {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 2;
grid-row: 2;
color: deepskyblue;
}
flexbox の場合
こうして CSSGrid が使えるようにはなったのですが、どうもレイアウトを組んでいく内に、これ flexbox の方が合ってるのでは？ と思い始めたので、 flexbox に切り替えることにしました。
具体的なところは次回にまわしますが、 grid の場合と同じく Autoprefixer が効かない、という問題が発生したため、 postcss.config.js を下記のように変更しました。
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
"grid": true,
"browsers": [
"last 2 versions"
]
}),
require('precss')
]
}
フロントエンドエンジニアの方々の苦労や工夫の賜物であるとはいえ、いっぺんに取り入れすぎて消化不良、というところ。。。
とはいえ、少しずつでも理解していきたいところです。
