このAdvent Calendarについて
一人React.js Advent Calendar 2014 のマネをして、PostCSSについてAdvent Calendar形式で説明していきます。「PostCSSとは何か」や、実行の方法のような基本的なところから、PostCSSプラグインの紹介、PostCSSのAPIを使ってプラグインやツールの作り方 といったところまで書いていこうと思います。
僕はPostCSSを開発当初から追いかけていて、自分でいくつかプラグインやツールを作ったり、WEB+DB PRESS に寄稿したり、勉強会などで発表したりしています。このAdvent Calendarの大まかな流れは、東京Node学園祭2016 での発表と同じで、基本的な使い方とPostCSSのプラグインとAPIを追加したものとなります。
「PostCSS: Build your own CSS processor」
なお、このAdvent Calendarで使用するPostCSSのバージョンは現在最新の v5.2.6 を使っています。
PostCSSとは
PostCSSはNode.jsで書かれたCSSツールを作るための、そしてその実行をするためのフレームワークです。ロシア人のAndrey Stnikという人が開発しています。
Webアプリを作る業務の中では、後者のPostCSS製ツールやプラグインを実行するために使用することが多いです。PostCSS製のツール、プラグインとしては、ベンダープリフィックスを自動で付与する Autoprefixer と、モダンなCSSリンターである stylelint が有名です。Autoprefixerとstylelintについては後日詳細に説明します。また、これらのエコシステムを含めて、PostCSSと呼ばれることもあります。
PostCSSは2016年末、かなり広く使われており、GitHubではスター数が12000スターを超えています。PostCSSを使用している企業やサービスとして、Facebook, GitHub, Google等、日本では Qiitaで導入 しています。
PostCSSの実行方法
1日目は、明日以降に説明していくPostCSSのプラグインの実行方法について説明します。
実行方法は、PostCSSのAPIを使って書いてJavaScriptのコードをNode.jsで実行することもできますが、このAdvent Calendarではコマンドラインから実行できるように postcss-cli を使います。Node.js製のタスクランナー用のプラグインもあり、gulp や Grunt 向けのもの等あります。
まずは、次のコマンドでpostcss-cliをインストールします。
$ npm install -D postcss-cli
そして、以下の内容でpostcss-cli用の設定ファイルを作成し、ファイル名を .postcssrc.json とします。
{
"use": [
"autoprefixer"
],
"input": "input.css",
"output": "output.css"
}
ここでは入力として input.css を受け取り、Autoprefixerを実行して output.css を出力します。プラグインを追加するときは、"use" の配列にプラグイン名を追加します。
1日目では、PostCSSの簡単な説明と実行方法について説明しました。明日はPostCSSの動作の仕組み、処理の流れについて書きます。