PostCSSの概要と基本的な使い方のまとめ

Tailwind CSSをがんばって使おうとしたら、PostCSSの設定が至らず地味に躓いた。そもそも、PostCSSがなんなのかさっぱり知らない。この機会にPostCSSとは何かを調べてまとめたい。

PostCSSとは

PostCSSとは、CSS構文で書かれたテキストデータをパースし、JavaScriptのオブジェクトとして処理できるようにするツールである。それ自身では変換せず、目的に応じて変換用のプラグインを使い分ける。SassやStylusとは根本的に違う。

PostCSSのREADME.mdには、以下のように端的に概要がまとめられている。

PostCSSはCSSファイルを受け取り、そのルールを（抽象構文木に変換することで）分析・修正するAPIを提供します。このAPIをプラグインが利用することで、エラーを自動的に発見したり、ベンダープレフィックスを挿入したりといった、多くの便利なことができるようになります。

また、PostCSSは以下のようなステップでテキストを処理する。

PostCSSのコアが担当するのは、CSS構文のパースと文字列化である。プラグインが適用されない場合、入力したCSSがそのまま出力される。

PostCSSを利用すれば、開発者はパーサを書く手順をスキップして、CSSを変換するコードが書ける。これがPostCSSのプラグインである。

例えばAutprefixerやStylelint、CSSnanoなどの著名なツールは、PostCSSのプラグインとして構築されている……とPostCSSの公式ドキュメントに書いてあった。それぞれのツールの概要は以下の通りである。

プラグイン名	概要
Autoprefixer	CSSファイルにベンダープレフィクスを追加する。
Stylelint	CSS、SCSS、Lessなどのリンター。構文エラーを検出する。
CSSnano	名前の通り、CSSファイルのサイズを最小化する。

恥ずかしながら、Tailwind CSSを触るようになるまでAutoprefixerの名前も知らなかった。世の中わからないことだらけだ。

PostCSSの使い方は、大きく分けて2種類ある。プラグインを使うか、プラグインを作るかである。

PostCSSのプラグインの一覧はGitHubリポジトリのこのページか、専用のカタログページで確認できる。

使い方は、まずPostCSSをロードし、その上でオプションとして使いたいプラグインを指定する、という流れとなる。

一部のビルドツールは、内部でPostCSSをロードし、そのビルドツールが選定したプラグインを自動で読み込んでいる。この場合、設定ファイル（postcss.config.js）を作ってプラグインの構成をカスタマイズする。

また、webpackやRollup、Gulpといったバンドラーやタスクランナーを利用する場合、それぞれのアーキテクチャに合わせてPostCSSのローダーを組み込む必要がある。

例えばwebpackではpostcss-loader、Rollupではrollup-plugin-postcss、Gulpではgulp-postcssなどを利用する。

その上で、各プラグインを直接インポートして指定するか、やはり設定ファイルを使って指定する。

例えば、以下のような形である。

module.exports = {
  plugins: [
    require("プラグインA")({
      /* オプション */
    }),
    require("プラグインB")({
      /* オプション */
    }),
  ],
};

ES Modulesを使う場合は以下のようになる。

export default {
  plugins: {
    プラグイン名A: {
      /* オプション */
    },
    プラグイン名B: {
      /* オプション */
    },
  },
};

PostCSS（+プラグイン）単体で使うこともできる。例えば以下のように書く。

let postcss = require("postcss");

postcss(plugins)
  .process(css, { from, to })
  .then((result) => {
    console.log(result.css);
  });

参考元：PostCSS API

既存のプラグインで要件を実現できない時は、PostCSSのAPIを使って自分でプラグインを作る。作り方は、いずれ時間があるときに学びたい。