PostCSSを使ったモダンCSS開発環境

はじめまして。2015年度新卒入社の森下(@morishitter)です。
今は755のフルリニューアルに向けて、Webフロントエンドの開発を担当しています。

その傍らでOSS活動も行っており、本エントリーで紹介するPostCSSは、GitHub上で僕がメンバーの1人でもあるプロジェクトです。

PostCSSとは

postcss_logo

PostCSSはNode.js製のCSSのパーサーで、そのAST(パース結果のJSオブジェクト)を操作するための便利なAPIを提供しています。PostCSS自体が提供する機能はたったこれだけで、非常に小さいライブラリです。

ASTを操作し、CSSを変換する処理はプラグインが担っていて、開発者はPostCSSのプラグインを書くことで独自のCSSの変換処理を行うことができます。

このようなプラグイン等を含めたエコシステムのことをPostCSSと呼ぶことが多い気がします。

有名なPostCSS製ツールの紹介

実際のサービス開発の現場では、効率のより開発を行うためにPostCSSのプラグインを組み合わせて使うことになります。
そこで、有名なPostCSSのプラグインをいくつか紹介したいと思います。

Autoprefixer

Autoprefixerは、各ブラウザで先行実装されていたり、独自の拡張のプロパティーに付けられる識別子である、ベンダープレフィックスを自動で付与してくれるツールです。
Autoprefixerは各ブラウザのCSSのプロパティー等の対応状況をまとめている「Can I Use」というサイトのデータを参照しています。

開発しているサービスで対応したいブラウザのバージョンをAutoprefixerで指定することで、適したベンダープレフィックスを付与でき、非常に便利なツールです。（余談ですが、PostCSSは元々はAutoprefixerを作るために作られました。）

input:

.selector {
  display: flex;
}


yield:

.selector {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}


cssnext

cssnextは、現在策定段階でブラウザが未実装のCSSの記法を、今のブラウザが解釈できるようにトランスパイルするツールです。
cssnextを使うことで、
  • Custom properties & var()
  • Custom selectors
  • Custom media queries
  • media queries ranges
  • color()
等のCSSの新しい機能を先取りすることができます。

実際にブラウザで使えるようになるよりも先に新しいシンタックスに触れられるのはとても良いことだと思います。

cssnextはいくつかのPostCSSのプラグインをまとめたもの（Autoprefixerもcssnextに含まれている）であり、中には標準の仕様通りに実装されていないものも含まれます。

なので、cssnextを使うときも他のSassやStylus等のCSSプリプロセッサーを使うときと同様に、コンパイル後のCSSがどうなっているのかを気にして使うべきだと僕は思っています。

root {
  --mainColor: #6ea222;
}

@custom-media --mobile(width <= 640px);
@custom-selector :--heading h1, h2, h3, h5, h6;

.post-article :--heading {
  color: color( var(--mainColor) balackness(+20%) );
}
@media (--mobile) {
  .post-article :--heading {
    margin-top: 0;
  }
}


stylelint

「まだCSSLint使ってるの！？」

stylelintはモダンなCSSのLintツールです。
Custom propertiesやcalc()等のCSSの記法にも対応しているので、cssnext使っているのならstylelintを使った方がいいと思います。

cssnano

cssnanoはCSSのminifyツールです。
いくつかのPostCSSのプラグインで構成されています。

CSSOはメンテナンスが完全に止まっているので、CSSOを使っているのならcssnanoに乗り換えてみても良いかもしれません。

ここで紹介したPostCSS製ツールは、有名でかつ開発が活発なものです。

どれも比較的新しいツールなので導入するのを躊躇うかもしれませんが、もしバグを見つけたとしてもissueを立てれば直してくれるでしょう。

また、PostCSSとその周辺ツールについて疑問があれば（英語ですが）Gitterで質問すればすぐに返答がもらえます。
日本語では僕にリプライして頂けると答えられるものは答えます。

ここで紹介した以外のPostCSSのプラグイン、ツールはPostCSS.partsというサイトで確認することができます。

現在登録されているものだけで約100個のプラグインが作られており、エコシステムとして順調に成長しているように思います。

最後に

最後に、実際に今755のリニューアルで使用しているPostCSSのプラグインの一覧です。
  • cssnext
  • stylelint
  • postcss-reporter
  • postcss-flexbugs-fixes
  • postcss-style-guide
CSSプリプロセッサーとしてcssnextを採用していて、そのコードのLinterにstylelintを使っています。
postcss-reporterはstylelintの出力を読みやすくするために使います。
flexboxのバグを解消するためにpostcss-flexbugs-fixesを使っています。
また、postcss-style-guideはスタイルガイドジェネレーターです。
スタイルガイド駆動な開発をしています。

PostCSSを使うと、自分が必要な機能だけをプラグインを読みこむことで使うことができます。Sassを使っているけど「@extendや@mixinは管理できないから使っていない」、「@importと変数定義だけできれば…」と思っている人はPostCSSを使っても良いと思います。

本エントリーで少しでもPostCSSに興味を持って頂けると幸いです。