AltCSSビルドツール「Alchemia」

Alchemiaという、AltCSS（CSSのメタ言語 or プリプロセッサー or ポストプロセッサー）をビルドするツールを作った。

CSS pre- vs. post-processing

似ているツールとして、ReworkとPostCSSがある。Reworkはプリプロセッサーをビルドするツールで、PostCSSはポストプロセッサーをビルドするツール。

CSSプリプロセッサーとポストプロセッサーの定義の境界はとても曖昧で、どちらもほぼ同じようなものなので、個人的にはAltCSSとかCSSメタ言語とか呼んでしまえばいいかなと思っている。だから、AlchemiaはAltCSSビルドツールと呼ぶことにした。

Alchemia

AlchemiaはRubyで作った。実装はReworkを参考にしていて、CSSパーサーにはcrassというものを使っている。Ruby製のCSSパーサーは他にはcss_parserというものがあって、こっちの方がGitHubのStar数が多いが、crassの方がパースが細かくて（？）PostCSSのパース結果に似ていたのでcrassを採用した。

インストールはgemから。

$ gem isntall alchemia

使い方は、

require "alchemia"

css = ".selector { padding: 10px; }"

# CSS -> AST
alchemia = Alchemia.new(css)

# Alchemiaプラグインの読み込み
alchemia.use(awesome_plugin)

# AST -> CSS
alchemia.to_s

こんな感じ。ReworkのAPIとまんま同じで、メソッドチェイン風に.use()できる。

Alchemia Plugins

開発者はAlchemiaのプラグインを書くことで、独自のシンタックスや機能を追加できる。 他の人が書いたプラグインと組み合わせることで、自分専用のAltCSSを作ることができる。

プラグインを作るときはAlchemia::Plugins::Baseを継承する。

require 'alchemia'

module YourAlchemiaPlugin < Alchemia::Plugin::Base
  def process(ast)
    # 追加したい構文とか
  end
end

YourAlchemiaPlugin.processというメソッドの中に追加したい構文や機能を記述する。

---

今後はcrassのASTを簡単に操作できるAPIを作っていく予定。テストも十分に書けていないし、バグもあると思う。プラグインも自分でいくつか作っておかないと誰も作ってくれなさそう。Alchemiaプラグインジェネレーターみたいな、Yeoman Generatorのようなインターフェースも作りたい。

初めてRubyでライブラリ書いて、自分で考えてクラス作って〜ってするのが難しかった。オブジェクト指向の勉強をしてもっと強くならないといけない。

オブジェクト指向入門 第2版 原則・コンセプト (IT Architect’Archive クラシックモダン・コンピューティング)

オブジェクト指向入門 第2版 方法論・実践 (IT Architects’Archive CLASSIC MODER)

あわせて読みたい

• CSSポストプロセッサーの必要性
• 世の中のCSSプリプロセッサーがどれもクソだから自作したった
• CSS pre- vs. post-processing