PostCSSとは何か？プラグインでCSSを変換する

PostCSSは、CSSを構造へとパースし、その上でプラグインを実行するツールで、autoprefixing・minification・モダンな構文のサポートといった変換を可能にします。

独自の言語を持つプリプロセッサとは異なり、PostCSSはプレーンなCSSを対象に動作します。スタイルシートをパースし、それをプラグインのチェーンに渡し、変換されたCSSを書き戻します。すべてがプラグインであるため、必要な変換だけをちょうど組み立てられます。これは現代のCSSパイプラインでほぼ普遍的な要素であり、CIではbuildステップとして実行されます。

PostCSSの仕組み

PostCSSはCSSをノードツリーへとパースし、設定された各プラグインを実行してそのツリーを変更し、それをCSSへと文字列化して戻します。プラグインのpipelineこそが、PostCSSに柔軟性を与えるものです。

一般的なプラグイン

Autoprefixerはbrowser targetに基づいてベンダープレフィックスを追加します。
cssnanoは出力をminifyします。
postcss-preset-envは将来のCSSを今日から使えるようにします。
多くの構成でTailwindはPostCSSプラグインとして実行されます。

Autoprefixingとbrowser target

Autoprefixerはブラウザのサポートリストを読み取り、どのプレフィックスを追加するかを判断します。targetのリストを変えれば出力されるプレフィックスも変わり、これによりCSSの出力はJSのpolyfillを動かすのと同じ設定に結び付けられます。

buildのどこに位置するか

PostCSSは通常、（もしあれば）プリプロセッサの後、そしてbundlingの一部として実行されるため、最終的なCSSは公開される前にプレフィックス付与・モダン化・minifyされます。バンドラーはこれを統合し、自動的に実行されるようにします。

CI/CDにおけるPostCSS

Autoprefixerはブラウザのデータに依存するため、browser targetとブラウザデータのバージョンをリポジトリで固定することで、CIの出力は実行をまたいで再現可能に保たれます。変換・ハッシュ化されたCSSはデプロイ可能なartifactの一部であり、キャッシュによって変更されていないスタイルシートの再処理を避けられます。

重要なポイント

PostCSSは、JavaScriptプラグインのチェーンを通じてプレーンなCSSを変換します。
Autoprefixerとminificationのプラグインが最も一般的な用途です。
browser targetを固定することで、PostCSSの出力はCIで再現可能に保たれます。