2011-10-21

PhantomJSからCSS Lintを使う

CSS LintのCLIはNodeやRhinoから使うようになっているので、Windowsだとちゃんと動くようにするまで結構面倒です(勿論ちゃんと動かせるようにはなります)。また、僕の場合はそもそもCSS Lintしか必要としていないので、Nodeを入れるのはちょっと大げさな気もします。そこでPhantomJSからCSS Lintを使うスクリプトを書いてみました。

var fs = require("fs"),
  f = phantom.args[0],
  css = fs.read(f);

if (phantom.injectJs("csslint.js")) {
  var i,
    r = CSSLint.verify(css),
    l = r.messages.length;

  if (l > 0) {
    for (i = 0; i < l; i++) {
      var e = r.messages[i];

      if (!e.rollup) {
        console.log([f, e.line, e.col, e.message].join(":"));
      }
    }
  }
}

phantom.exit();

今のPhantomJSにはfsモジュールがあり、ファイルの読み書きができるようになっています。CommonJS由来のやつですね。実装済みのfsモジュールのプロパティや関数はReleaseNotesに載っています。

CSS LintのJavaScriptライブラリを読み込むにはphantomオブジェクトのinjectJs()を使います。読み込みに成功した場合だけtrueが返るようになっているので普通にif文で使ってやります。

あとはCSSLint.verify()するだけ！　オプションを指定する場合はここで指定してやればいいので、引数でオプションを設定できるようにするのもそんなに難しくない……というかNode向けのCLIスクリプトからコピペするだけで動きそうです。

$ phantomjs /path/to/csslint-phantomjs.js style.css

あとはこのようにCSSファイルを引数にして実行してやれば叱ってくれます。

style.css:7:1:Don't use IDs in selectors.
style.css:15:1:Don't use IDs in selectors.
style.css:21:1:Don't use IDs in selectors.
style.css:30:1:Don't use IDs in selectors.
style.css:35:1:Don't use IDs in selectors.

うるさいよ。

PhantomJSは実行ファイルだけで動きますし、WindowsにおけるCSS LintやJSLintの実行環境としてなかなか良いんじゃないかと思いました。