PostCSSの概要
PostCSSは、JavaScriptをベースにしたCSSを変換するためのツールです。 それ自体がCSSを直接変更するのではなく、プラグインと呼ばれる小さなプログラムを組み合わせて使用することで、CSSに様々な処理を行うことができます。 SassやLessのようなプリプロセッサとは異なり、既存のCSSに対して後処理（ポストプロセス）を行うのが特徴です。 開発者はPostCSSを利用することで、パーサーを書く手間を省き、CSSを変換するコード（プラグイン）を効率的に作成できます。
PostCSSの仕組み
PostCSSは以下のステップでCSSを処理します。
- CSSパーサーがCSSコードを読み取り、JavaScriptで扱えるオブジェクト（抽象構文木 – AST）に変換します。
- 有効化されたプラグインが、そのASTを順番に処理し、内容を操作・変換します。
- 全てのプラグイン処理が終わった後、ASTは再びCSSの文字列に変換されます。
- 最終的に、変換後の新しいCSSファイルとして出力されます。
PostCSSのコア機能は、このCSSの解析（パース）と文字列化を担当します。 そのため、プラグインが何も適用されていない場合、入力されたCSSがそのまま出力されます。
PostCSSの主な利点
- 柔軟なカスタマイズ性: 必要な機能だけをプラグインとして追加できるため、プロジェクトに合わせて最適化できます。
- 保守性の向上: ベンダープレフィックスの自動付与やコードの圧縮などにより、CSSコードをクリーンに保ち、保守性を高めます。
- 豊富なプラグインエコシステム: 自動でベンダープレフィックスを付与するAutoprefixerや、CSSを圧縮するcssnano、コードのエラーを検出するStylelintなど、200種類以上の豊富なプラグインが存在します。
- 他のツールとの連携: WebpackやVite、Gulpといったモジュールバンドラやタスクランナーと簡単に統合できます。
- 将来のCSS構文の利用: まだブラウザで標準サポートされていない新しいCSSの構文を、現在のブラウザが解釈できる形に変換できます。
PostCSSの導入と基本的な使い方
PostCSSを利用するには、お使いの環境にNode.jsがインストールされている必要があります。 一般的な導入手順は以下の通りです。
- プロジェクトの初期化とPostCSSのインストール:
npm init -y npm install postcss postcss-cli - 設定ファイルの作成:
プロジェクトのルートに
postcss.config.jsという設定ファイルを作成します。このファイルに使用したいプラグインを記述します。// postcss.config.js module.exports = { plugins: [ require('autoprefixer'), require('cssnano')({ preset: 'default' }) ] }; - 実行スクリプトの設定:
package.jsonにPostCSSを実行するためのスクリプトを追加します。"scripts": { "build:css": "postcss src/style.css -o dist/style.css" } - コマンドの実行:
ターミナルで以下のコマンドを実行すると、
src/style.cssが処理され、dist/style.cssに出力されます。npm run build:css
代表的なPostCSSプラグイン
PostCSSの強力な機能は、その豊富なプラグインによって支えられています。 ここでは、特に人気があり広く使われているプラグインをいくつか紹介します。
| プラグイン名 | 概要 |
|---|---|
| Autoprefixer | Can I Useのデータを基に、必要に応じてベンダープレフィックスを自動で付与します。 これにより、ブラウザ互換性の問題を解決できます。 |
| cssnano | CSSファイルから不要なコメントや空白を削除し、コードを圧縮（minify）してファイルサイズを軽量化します。 |
| Stylelint | CSSの構文エラーを検出したり、コーディングルールを統一したりするためのリンターツールです。 |
| PreCSS | Sassのような変数、ミックスイン、ネストなどの構文をCSS内で使用できるようにします。 |
| postcss-preset-env | 次世代のCSS機能を、現在の主要なブラウザが理解できるCSSに変換することができます。 |
PostCSSと他のプリプロセッサ（Sassなど）との違い
SassやLessが独自の構文を持つ大規模な「パッケージ」であるのに対し、PostCSSは必要な機能をプラグイン単位で柔軟に組み合わせることができる「フレームワーク」に例えられます。 SassなどとPostCSSを組み合わせて使用することも可能で、例えばSassで書いたCSSをコンパイルした後に、PostCSSのAutoprefixerでベンダープレフィックスを付与するといった使い方もできます。