search
LoginSignup
19
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

一人PostCSS Advent Calendar 2016 Day 1

posted at

updated at

PostCSSのやっていきはじめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
19
Help us understand the problem. What are the problem?