フロントエンド - CSS・スタイリング

PostCSS ぽすとしーえすえす

CSS変換AutoprefixerプラグインビルドツールTailwind CSSトランスパイル

PostCSSについて教えて

簡単に言うとこんな感じ！

CSSを「プラグインで自由に加工できる変換ツール」だよ！「古いブラウザ用の書き方を自動補完して」「未来の書き方を今使えるようにして」みたいな作業を、差し込むプラグイン次第でなんでもやってくれる、CSS版の魔法の工場なんだ！

PostCSSとは

PostCSSとは、JavaScriptで書かれたCSSの変換ツールで、CSSファイルを読み込んでプラグインで処理し、変換後のCSSを出力するプラットフォームです。2014年にAndrey Sitnikによって公開され、現在では世界中のフロントエンド開発で広く使われています。

PostCSSそのものは「CSSをASTに変換して、プラグインが加工し、また文字列CSSに戻す」というパイプラインを提供するだけで、実際の機能はすべてプラグインが担います。そのため「何でもできる」と同時に「何もしない素の状態でも動く」という柔軟な構造が特徴です。

実務での使われ方はさまざまで、ベンダープレフィックスの自動付与・未来のCSS構文の変換・コードの最適化（ミニファイ）・Tailwind CSS の処理など、現代のWeb開発に欠かせないツールのほとんどがPostCSSを内部で利用しています。

PostCSSの仕組みと構造

PostCSSの処理フローは「読み込み → 解析 → プラグイン加工 → 出力」の4ステップです。

ステップ	内容
Parse（解析）	CSSテキストをAST（抽象構文木）に変換する
Transform（変換）	各プラグインがASTを操作・加工する
Stringify（文字列化）	加工されたASTを再びCSSテキストに戻す
Output（出力）	変換済みCSSをファイルに書き出す

AST（Abstract Syntax Tree：抽象構文木） とは、CSSの構造をツリー状のデータとして表したもので、プログラムから扱いやすい形になっています。PostCSSはこのASTをプラグインが受け取り、ルールを追加・削除・書き換えする仕組みです。

覚え方

「PostCSS」の「Post」は「後処理（ポストプロセス）」のこと。CSSを書いた後に変換・最適化を行うツール、と覚えると名前の意味がつかめるよ！

代表的なプラグイン一覧

プラグイン名	役割
Autoprefixer	`-webkit-`などベンダープレフィックスを自動付与
postcss-preset-env	最新のCSS仕様を古いブラウザ向けに変換
cssnano	CSSの空白・コメントを削除してファイルを軽量化
Tailwind CSS	ユーティリティクラスをCSSに変換（内部でPostCSSを使用）
postcss-modules	CSSクラス名をスコープ化（CSS Modules）
stylelint	CSSの構文・スタイルをチェック

歴史と背景

2013年 — Andrey Sitnik（Evil Martians所属）がプロトタイプを開発開始
2014年 — PostCSS v1.0 として公開。Autoprefixerがキラープラグインとして話題に
2015年 — Webpack・Gulp・Grunt など主要ビルドツールとの連携プラグインが充実
2016年 — Bootstrap 4がSassからPostCSSへの移行を検討（最終的にはSassを継続）
2017〜 — Create React App（CRA）にAutoprefixerがデフォルト統合され一気に普及
2019年 — Tailwind CSS 1.0 がPostCSSプラグインとしてリリース。爆発的に普及
2021年 — Vite・Next.jsなどモダンフレームワークがPostCSSをビルトインで採用
現在 — 週間ダウンロード数は数千万を超え、フロントエンドのデファクトスタンダードに

SassやCSS-in-JSとの比較

PostCSSはしばしばSass（SCSS）やCSS-in-JSと比較されますが、役割が異なります。

ツール	カテゴリ	特徴
PostCSS	CSSポストプロセッサ	既存CSSをプラグインで変換。何でもできる汎用基盤
Sass / SCSS	CSSプリプロセッサ	変数・ネスト・ミックスインなど独自構文でCSSを拡張
CSS-in-JS	JS統合スタイリング	JavaScript内でCSSを記述。コンポーネントと一体化
Lightning CSS	高速CSSツール	Rust製の高速変換ツール。PostCSSの後継候補の一つ

プリプロセッサ（Sassなど）は「CSSを書く前」に特殊な構文を通常のCSSに変換するのに対し、PostCSSは「CSSを書いた後」に変換・最適化を行います。実際にはSassとPostCSSを組み合わせて使うプロジェクトも多く、競合ではなく補完関係です。

以下はPostCSSの処理フローを図解したものです。

postcss.config.js の基本形

// postcss.config.js（プロジェクトルートに置く設定ファイル）
module.exports = {
  plugins: [
    require('autoprefixer'),          // ベンダープレフィックス自動付与
    require('postcss-preset-env')({   // 最新CSS構文を変換
      stage: 2
    }),
    require('cssnano')({              // 本番ビルド時に圧縮
      preset: 'default'
    })
  ]
}