皆さん、どーもこんにちは、イズムです。

普段仕事でCSSを触る時はSassを使って快適なCSS記述ライフを送ってるわけですが、最近、なにやらたまーに耳にするPostCSSとやらが気になっています。
名前からすると「Post（次の、後の）CSS」ということかな？と、雑な推測をしたところで、どんなものなのか全然想像つかないですね！

そんなわけで、今日は私が気になっているPostCSSについてサクッと調べつつ、実際に使ってみたいと思います！

PostCSSってなに？

PostCSS

どうやらPostCSSとは、JavaScriptで記述されたプラグインを扱うことのできるAPIだけを持ったCSSのプリプロセッシングツールのようです。

有名なプリプロセッサーであるSassやLess、Stylusなどは否応なしにありとあらゆる機能をワンパッケージにして提供しているのに対し、PostCSSはプラグインとして個別に機能を提供しているので高い拡張性と自由度を持っているわけですね。

それでは早速PostCSSを使ってみましょう。

PostCSSを使ってみる

Sass同様、PostCSSを使うにもタスクランナーが必要です。
私は普段Gulpを使っているので、今回はGulpでのPostCSS導入を試みます。

※本記事ではGulpが使用できる環境であることを前提に話を進めていきます。

インストール手順

コマンドラインで簡単にインストールできるみたいなのでパパッと行きましょう。

$ mkdir testpostcss        //任意のディレクトリを作成
$ cd testpostcss           //作成したディレクトリに移動

$ npm init                 //任意の値を入れてpackage.jsonを生成

$ npm install gulp --save-dev          //Gulpをインストール
$ npm install gulp-postcss --save-dev  //PostCSSをインストール

さらに src/ と dest/ を作って、ディレクトリ構成はこんな感じになりました。

続いて任意のエディタで gulpfile.js を作り、package.json と同じ階層に置きます。

gulpfile.jsの中身はこちら↓

//gulpfile.js
var gulp = require('gulp');              //gulpをインポート
var postcss = require('gulp-postcss');   //gulp-postcssをインポート

gulp.task('css', function () {           //”css”タスクを登録
  var plugins = [                        //一旦空の配列を作成
  ];
  return gulp.src('./src/*.css')         //src下にある.cssファイルを指定
    .pipe(postcss(plugins))              //PostCSSにファイルを処理してもらう
    .pipe(gulp.dest('./dest'));          //生成されたCSSをdest下に配置
});
　

こんな感じで、PostCSSを使う下準備ができました。

プラグインをインストールする

さて、PostCSSを使う下準備ができたところで、肝心の機能を取り入れるべく、プラグインを選定しましょう。

PostCSSのプラグインは現時点で200以上あり、PostCSS Plugins にもまとめられていますが、多すぎて探すのがなかなか大変なので、キーワードでプラグインを探すことのできるカタログ PostCSS.parts で探すのが私のオススメです。

再びコマンドラインでいきましょう。

$ npm install precss --save-dev
$ npm install postcss-cssnext --save-dev

プラグインのインストールはこれだけです。
簡単ですね。

次にインストールしたパッケージを gulpfile.js にインポートし、cssタスクに追加します。

//gulpfile.js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');           //precssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート

gulp.task('css', function () {
  var plugins = [
    precss,                        //ここに追加
    cssnext
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dest'));
});

 

これでprecssとcssnextが追加されたPostCSSができました！

CSSをコンパイルしてみる

src下に任意の名前でCSSファイル（今回はstyle.css）を作成しましょう。
先ほどインストールしたプラグインで使用できるようになった機能も使ってどのようになるのか見てみましょう。

/* src/style.css */
$black: #000;     //precssの変数利用
$white: #fff;
$baseWidth: 800px;

.container {
	width: $baseWidth;
	display: flex;     //cssnextに含まれるautoprefixerの機能
	background: color($black alpha(-10%));     //cssnextのcolor()
	.title {
		color: $white;
	}
}

 

いよいよコマンドラインでcssタスクを実行します！！

$ gulp css

そしてこちらがコンパイルされたCSSです。

/* dest/style.css */
.container {
	width: 800px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	background: rgba(0, 0, 0, 0.9);
}
.container .title {
	color: #fff;
}
 

おおお・・・期待通りの結果になりました！

なぜPostCSSがいいのか？

Gulp使ってSassライクに書きたいならgulp-autoprefixerもあるし、Sassのままでいいんじゃないの？
・・・確かにそうかもしれないです。

しかしながら、Sassのようなワンパッケージで提供されているプリプロセッサーには流行り廃りもあり、利用者が減れば徐々にメンテナンスもされなくなります。一方でPostCSSのプラグインは世界中の開発者が自由に作成しているため、日々便利な機能が追加されていっています。

ワンパッケージになっているプリプロセッサーとは違い、プラグインの開発者にとっても最新の技術を取り入れやすく、メンテナンスもしやすい仕組みになっているというのが最大の魅力と言えるのではないでしょうか。

また、最小限の機能を利用者が自ら選定することで使わない機能の分の容量を削減できるだけでなく、コンパイルにかかる時間の短縮にも繋がることが考えられますよね。

なんだかPostCSSの方が未来が明るい気がしませんか！？

最後に

今回はPostCSSが何者なのか、どのように使えばいいのかを（色々と割愛しながら）簡単にお伝えしました。

能動的にプラグインを選択する必要性があるため、とりあえず何でもいいからCSSを楽に記述したい人には導入コストが高いように思えるかもしれませんが、カスタム好きな人にとっては最適なプラグインを探す作業も楽しいかもしれません。

まだまだ便利なプラグインがたっっくさんありそうなので私もボチボチ探っていこうと思います！
そのうちPostCSSプラグインBEST１０とか紹介できたらいいなーと思いながら・・・

それでは皆さん、またお会いしましょうー。