2015-01-10

postcss-single-charset

minifyしてからconcatという手順でCSSをビルドしているため、連結するそれぞれのCSSファイルにある@charsetルールが無意味になる。そこで最初の@charsetを先頭に持ってくるだけのPostCSSプラグインを書き、それをconcatした後に使うことにした。

PostCSSプラグインとして作ったのでパブリックなAPIはない。つまり必ずPostCSSのuse()でプロセッサーとして読み込んでやる必要がある。

var fs = require('fs');
var postcss = require('postcss');

var input = fs.readFileSync('input.css', 'utf8');
var output = postcss().use(
  require('postcss-single-charset')()
).process(input).css;
fs.writeFileSync('output.css', output);

PostCSSを知らないとよくわからないと思うけど、PostCSS界隈ではこれで普通な感じということになっている。実際にはgrunt-postcssやgulp-postcss経由で使うことになるだろう。

利用サンプルを兼ねてGruntプラグインも同梱しておいた。grunt-プリフィックスが付いていないため、load-grunt-tasksでは読み込んでくれない(と思う)ので、READMEにあるように書いてちゃんと読み込む必要がある。他は特に変なことはないが、あまり行儀良くはなさそうなので利用は非推奨ということにしておく。

あんまりパッケージ化するつもりはなかったけど、PostCSSプラグインというような形で書いたことがなかったので試しに書いてみた。特に何ということもなかった。