Clojure Web Development勉強 - Garden（その１）最低限の設定でCSSをコンパイルしてみる

前回に続いてCSSの話。

Reagent/Hiccupを使ってHTML/DOMをedn形式で定義しているのだから、できればCSSも同じくednで定義したい！という末期症状な人間のために、gardenというライブラリが存在している。

github.com

Hiccupと同じように、Clojureのデータ構造であるVectorとMapでCSSを定義できる。最近は生のCSSで書くのではなく、より表現力の高いPreprocessorなどを使って記述するケースが増えているようだが、そのようなPreprocessorよりもさらに強力なClojureのデータ構造処理の機能や関数化・データ再利用がすべて使えるというのは一つの強みである。

個人的にはそういったまっとうな理由よりも「どうせだったら全部ednで書こう」という思いのほうがgarden導入の強い動機になっているが。

今回は最低限gardenを使うための設定について。

Project.clj

(defproject min-garden "0.0.1"
  :dependencies [[org.clojure/clojure "1.8.0"]
                 [garden "1.3.2"]]
  :main min-garden.core)

今回はあくまでgardenデータの定義とコンパイルについてのみなので、ClojureScriptやそれに関係するライブラリはまったく使わない。ClojureそのものとGardenをdependenciesに入れて、コンパイルさせるためにmain関数のありかを指定している。

core.clj

今回は.cljsではなく.cljファイルを定義：

(ns min-garden.core
  (:require [garden.core :refer [css]]))

(def style
  [:body {:font-size "16px"}])

(defn -main []
  (css {:output-to "resources/public/css/main.css"}
    style))

garden.coreからcssマクロをreferしている。styleというのはただのデータ構造で、vectorに:bodyキーワードとmapが入っていて、mapに:bodyに対して適用するスタイルの宣言が入っている。

-mainには、styleデータに基づいたcssをresources/public/css/main.cssというファイルにコンパイルする、という指示が入っている。ちなみにファイル指定なしで(css style)などとするとstyleデータをcssフォーマットに直した文字列が返される。

ディレクトリ構造とコンパイル指示

resources/public/cssというディレクトリが存在しないとエラーになるので、mkdirなどでディレクトリ構造をちゃんと整える必要がある。

cssをコンパイルする前のディレクトリ構造は以下のとおり：

.
├── project.clj
├── resources
│   └── public
│       └── css
└── src
    └── min_garden
        └── core.clj

あとはシェルからlein runを実行：

$lein run
Wrote: resources/public/css/main.css

-main関数が走り、resources/public/cssに以下のmain.cssファイルが作成される：

body {
  font-size: 16px;
}

次回はこのコンパイルプロセスを自動化するlein-gardenの話。