恥ずかしながらPostCSSって何ですか？と聞かれた時に自分の中に答えがないと気がついたのでちゃんと調べてみることにしました。
PostCSSってなに？
JavaScriptプラグインでCSSを変形させるツールだそうです。
CSSファイルを受け取って分析して、プラグインによって変更されたものをCSSにして返す。
ということをしてくれているみたいです。
よく目にするAutoprefixerもPostCSSのプラグインです。（知らなかった…）
プラグインによって
- エラーの発見（lint）
- 新しい構文のトランスパイル
- 画像のインライン化
などが可能です。
Twitter、Alibabaなどの企業でも採用されています。
プラグインリストがあるのでこちらから良いものを探して導入してください！
自社の課題を解決するために独自のプラグインを作るのも手段かもしれません。
オススメのプラグイン
PostCSS利用する際に最低限導入したいと思ったプラグインを紹介します。
CSSを最適化
cssnanoはファイルサイズを最適化するための脳死で入れます。
ベンダープレフィックス
autoprefixerを入れておけば「Can I Use」のデータをもとにベンダープレフィックスを付与してくれるので異なるブラウザーの対応に頭をめぐらせなくて良くなるはず。
チェックとフォーマット
人によっていろんな書き方があるのでできれば最低限整えたいし、コードレビューでの指摘は減らしたいのでstylelintとstylefmtとかで体裁を整えておきたい気持ちです。
doiuseを入れて「Can I Use」のデータをもとにLintしてくれたら、別のブラウザーで崩れてる！ってことがなくてさらに良さそうです！
新しいプロパティーを使いたい！
:is()とかhas()使いたい場合はpostcss-preset-envやpostcss-pseudo-isを入れるといいかと思います。
SassのようにCSSを書きたい
Sassのようにネストや変数などを利用するためのプラグインがあります。
- postcss-nested
- postcss-simple-extend
- postcss-sassy-mixins
- postcss-simple-vars
postcss-nestedはその名の通りネスト記法をアンラップしてCSSに変えてくれます。
postcss-simple-extendは@extendでプロパティーを継承できますが、
Sassのように%hogeのように定義できません。
@define-placeholder セレクタ名で定義することで%hogeと同じ扱いになります。
@define-placeholder hoge {
}
.hogehoge {
@extend hoge;
}
@define-placeholder hogeはコンパイル後のCSSからは削除されます。
postcss-sassy-mixinsやpostcss-simple-varsでmixinや変数を使えるようにできます。
変数はpostcss-nested-varsというプラグインもあります。
ネストされた構造で変数を使いたい場合はこちらを使う？のだと思います。
実際は、mixinで積極的に変数を利用したい場合はこちらを利用するのが良いかもしれません。
便利そうだけど導入はしないプラグイン
オススメのプラグインとは反対に導入はしないでおこうと思ったプラグインも紹介しておきます。
- postcss-nested-props
- postcss-utilities
- short
- rucksack
- postcss-debug
postcss-nested-props
記述を省略できはしますし書き方によってはいい感じ。
一歩間違うと見づらいのでルールを決めないとコード保守がしづらそうだなと感じました。
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
// コンパイル後
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
.funky {
font: 20px/24px fantasy {
weight: bold;
}
}
// コンパイル後
.funky {
font: 20px/24px fantasy;
font-weight: bold;
}
※コードは下記のREADME.mdより抜粋しました。
postcss-utilities & short & rucksack
記述を短縮できるプラグインは便利だと思います。
ただ、複数人かつスキルもバラバラのメンバーで開発する場合CSSの記述ルールに一貫性が持てなくなってしまうlintとかで制御できたらいいかも。
postcss-debug
視覚的にコードの差分を比較できるけど、ベータ版と書いてあることとGitの違いが理解できませんでした。
もしかしたらコード負債を解消してくれかもプラグイン
調べていて10000行とかあるCSSを何とか自動で何とかしてくれちゃうのかな？
と期待を持った最適化プラグインがあったので個人としても業務で試してみたいです。
まとめ
PostCSSを知ることでこれまで漠然とどうにかできないかと思っていたCSSの問題が解決できそうな気がしてきて勉強してなかった自分を呪っています…。
それぐらい可能性を感じますし、使いようによってはコーディングのスピードが格段に上がるとは思います！
ただ、CSSの記述は自由度が高いのでチーム開発では「予測がしやすい」「再利用がしやすい」「保守がしやすい」「拡張がしやすい」が重要だと考えています。
ショートハンドでかけるなどの効率を求めることは重要ですが、それよりも記述に一貫性を失うことの方が問題だと考えています。
なのでそれを守るためのプラグインを選定できるように引き続きプラグインについては導入時に検討と検証をしたいと思います。
おまけ
PostCSSのプラグインを調べている中でこんなのあるんだ…という小さな発見もあったので面白かったので共有しておきます。
postcss-alias
個人として推したい。チーム開発では入れるのをためらうタイプのやつです。
colorguard
デザインのレギュレーションを無視したら気がつけるようになるので、フロント側でも一貫したデザインを守っていけるようになるのはいいなと思いました。
RTLCSS
CSSをLTR（Left-To-Right）からRTL（Right-To-Left）へ変換するためのフレームワーク。
なにそれ？って感じですが…アラビア語などの右から左に読む言語のサイトを構築する場合に数値の指定や値を反転する必要があります。
RTLCSSプラグインを利用すると反転したCSSを生成してくれるようです。