PostCSSの基本的なところ

フロントエンドエンジニアの @7jin16 です。

今回は最近フロントエンド界隈でよく耳にするPostCSSの基本的な部分を書こうと思います。 PAY.JPでも導入しているので、PostCSSってなんだろうって方の参考になればとても嬉しいです。

PostCSSとは

PostCSSの公式ページにも書かれていますが、一言で説明すると『CSSを変換するために書かれたnode.js製のパーサー』です。 Google や Twitter、阿里巴巴やShopifyも使っているとのこと。

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Google, Twitter, Alibaba, and Shopify. The Autoprefixer PostCSS plugin is one of >the most popular CSS processors.

PostCSS自体は、AST(Abstract Syntax Tree)を操るAPIを提供していて、そこに細かいプラグインが乗っかっているというイメージです。 パフォーマンスも非常によく、ruby-SassやLess よりも速いらしいです。

postcss/benchmark · GitHub

どんなプラグインがあるのか

  • autoprefixer - ベンダープレフィックスをつけてくれます
  • precss - mixinやextendなどのSassライクな記法を使えるようにしてくれます。
  • cssnano - minify含め、いろいろと良しなにやってくれます。
  • cssnext - 策定途中で、現状のブラウザでは未実装の記法をトランスパイルしてくれます。
  • chinese stylesheets - 中国語でStyleを書くことができるようになります。
  • postcss-style-guide - Styleガイドラインを作ってくれます。

中国語でStyleを書けるなど、ネタ系プラグインも出てきているので良くも悪くも勢いがあるなぁと感じますね。

どうやって使うのか

まずはインストール。

$ npm install --save-dev gulp-postcss

次に使用しているタスクランナーにあわせてタスクを書きます。

gulp.js

//使いたいプラグインをrequireする
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('styles', => {
  var processors = [
    autoprefixer({browsers: ['last 1 version']}),
  ];
  return gulp.src([
    '/css/style.css',
  ])
  .pipe(postcss(processors))
  .pipe(gulp.dest('build/css'))
});

こんな風に各プラグインを使うことができます。

記事中に紹介したプラグイン以外も PostCSS Partsというサイトで探せるので探してみてください。 PostCSS.parts | A searchable catalog of PostCSS plugins