Edited at

PostCSSのやっていきはじめ

More than 1 year has passed since last update.


この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製のタスクランナー用のプラグインもあり、gulpGrunt 向けのもの等あります。

まずは、次のコマンドで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の動作の仕組み、処理の流れについて書きます。