CSSを書くのにずっとSass（Scss）を使ってたんですが、PostCSSへ移行することにしたので、PostCSSの使い方をメモっておきたいと思います。
元々はSassで書いて、CSSにコンパイルして、ベンダープレフィックス付けて、minify（圧縮）して…というのをGulpで処理していました。しかし脱Gulpの波（？）もあって、npm-scriptsを利用するようになってくると、Sassのコンパイルやビルドが面倒に…
そこで、色々と検索してみると、自分の開発環境ではSassよりもPostCSSの方が使いやすそうだったので、PostCSSへ移行することにしました。
インストール
まずは本体であるPostCSSをインストールします。
npm install --save-dev postcss-cli
続いて、PostCSSで利用したいプラグインをインストールします。PostCSSはSassのようなワンパッケージではなく、必要なプラグインだけを選んで入れていきます。
私の場合、とりあえず下記の4つをインストールしました。
postcss-import
npm install --save-dev postcss-import
postcss-importは、別のCSSファイルをインポートできるようにするためのプラグインです。CSS内で@import "hoge.css";という形式で書けば、そのファイルをインポートしてくれます。
PostCSS Simple Variables
npm install --save-dev postcss-simple-vars
PostCSS Simple Variablesは、CSSファイル内で変数を扱えるようにするためのプラグインです。例えば下記のように変数に値を代入しておいて、それを別の場所で利用することができます。
$FontSizeL: 100px;
.logo {
font-size: $FontSizeL;
}
Autoprefixer
npm install --save-dev autoprefixer
Autoprefixerは、ベンダープレフィックスを自動で付与してくれるプラグインです。対応させたいブラウザを「last 2 versions（最新の2バージョン）」のように指定することもできます。
cssnano
npm install --save-dev cssnano
cssnanoは、CSSファイルをminify（圧縮）してくれるプラグインです。
圧縮と書くと単にファイルサイズを小さくするだけに思えますが、cssnanoはかなり強力な機能を持っていますので扱いにはちょっと注意が必要です。こちらの公式サイトでその機能が紹介されています。一例を上げると下記のようなことをしてくれます。
- 不要なベンダープレフィックスを削除
- 空白や改行やコメントを削除
- 重複しているコードを削除
- 同じセレクタに対するstyleをマージ
- SVGファイルを最適化（SVGO）
などのように、単に空白や改行を取り除くだけでなく、内部的には様々な処理をしてくれています。そのため、不要な機能に関してはオプションでfalseを指定しておくことをお勧めします。（圧縮時に必要なコードまで削除されていた…ということのないように）
設定ファイル作成
インストールを終えたら、次にPostCSS用の設定ファイルを作成します。プロジェクトのルートにpostcss.config.jsという名前でファイルを用意し、下記のように設定を記述していきます。
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-simple-vars')(),
require('autoprefixer')(),
require('cssnano')({
autoprefixer: false
})
]
}
利用するプラグインをpluginsに記述します。この際それぞれのプラグインごとにオプション値を渡すこともできます。上記の場合ですと、cssnanoでautoprefixer（不要なベンダープレフィックスの削除）をOFF（false）に設定しています。
コンパイル/ビルド実行
最後にCSSファイルを用意して、PostCSSを実行してやれば完了です。
例えば元のCSSファイルをsrc/css/app.cssとし、コンパイルしてdist/bundle.cssにビルドする場合は下記のようなコマンドになります。
./node_modules/.bin/postcss -c ./postcss.config.js src/css/app.css -o dist/bundle.css
-cの後に設定ファイル./postcss.config.jsを指定しています- 変更を監視（ウォッチ）したい場合は、コマンドに
-wを追加すればOKです