Help us understand the problem. What is going on with this article?

PostCSSのやっていきはじめ

More than 3 years have 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の動作の仕組み、処理の流れについて書きます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away