CSS非拡張ツール Wlite 0.2.0 リリース

開発

最近、LESSとかSCSSとかCSS系のメタ言語が流行っています。特にSCSSの拡張機能Compassのベンダープレフィックスとかすごくいい感じです。ほしい……。

でも、イマイチ踏みきれない点があります。それは

いつまで言語として生き続けるかわからない

ことです。この手のDSLにはよくある問題ですが、10年後もそのメタ言語で書いたソースコードを維持し続けることはできるのだろうか、と考えるとなかなか手を出しづらいのが実情です。特に今は勃興期で、どれがスタンダードになるかわかりません。

そんなわけで（どんなわけだ）Wlite（ウィライト）という新たなツールを作ってみました*1。このツールの特徴は、次の通りです。

文法はCSSのサブセット

文法はあくまで普通のCSSです。CSSは仕様上、結構適当な文法でも大丈夫なので、ちょっとだけチェックを厳しくしてます。例えば、次のような場合でもCSSはエラーになりませんが、Wliteではエラーにしてます。

  • 括弧が閉じていない。
  • 宣言の末尾にセミコロンがない
  • 宣言が空。
  • 「!important」の「!」と「important」の間に空白やコメントを許さない*2。

また、次のような場合は警告を出すようにしています。

  • キーワードにエスケープされた文字や大文字を含む

ベンダープレフィックスの自動付与

CSS3用にベンダープレフィックスを自動的に付与します。そのうち一覧化しますが、メジャーな奴はだいたいカバーしてます。

レガシーブラウザ対応

古いIE用に opacity を filter:alpha(opacity=X) に変換します。また、@-wlite-legacy-support という拡張ルールを使うことで、ブロックの中に書かれたCSSにCSSハックを自動適用します（値として指定できるのは、ie6、ie7、ie8、modernの4つのみです）。

@-wlite-legacy-support ie6, ie7 {
   table { width: 100%; }
}

CSS圧縮

YUI Compressor とまったく同じ事を車輪の再発明でまったく違う形で実装してあります。

使い方

java -cp "wlite-0.2.0.jar:antlr-runtime-4.0.jar" net.arnx.wlite.css.CssCompiler [-o dest] [-encoding encoding] src ...
  • o オプションを指定しない場合は、標準出力に表示します。
  • encoding は出力のエンコーディングです。入力はCSS仕様に基づいて自動判別します。

最近、話題になっている機能はひと通り実装してみたつもりですが、こんな機能が足りないんだけど、みたいな話があれば教えていただきたく。

今後の予定としては、以下の機能追加を予定していますが時間が（以下略）

  • URLへのコンテキストパスの追加機能
  • ベンダープレフィックスの拡充
  • IEのtext-shadowフィルタや古い-webkit-gradientへの対応

*1:サイトにはJavaScriptとか書かれていますが将来対応したいだけで、今はCSSだけです

*2:CSS規約上は許されていますが、Webkitでは空白のみOKでコメントは駄目とかサポート状況もまちまちなのが実情のようです。