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

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

PostCSSとは

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

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

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

引用元：postcss/postcss: Transforming styles with JS plugins

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

1. パーサがCSS構文を読み取り、JavaScriptで扱えるオブジェクトにする（=抽象構文木を構築する）。
2. 任意のプラグインを適用して、オブジェクトを操作する。
3. 望む変換を終えたら、文字列化する。
4. 新しいCSSとして出力する。

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

得られるメリット

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

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

恥ずかしながら、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を使って自分でプラグインを作る。作り方は、いずれ時間があるときに学びたい。

参考資料

• PostCSS – Wikipedia

• PostCSS Architecture

• postcss/postcss: Transforming styles with JS plugins

• postcss/docs/writing-a-plugin.md at main · postcss/postcss