Getting Started - green-coder/girouette GitHub Wiki

Quickstart

Here is a sample configuration file using reagent and shadow-cljs. Feel free to just copy and paste this.

{:paths ["src"]

 :deps
 {org.clojure/clojurescript {:mvn/version "1.10.844"}
  thheller/shadow-cljs      {:mvn/version "2.12.4"}
  reagent/reagent           {:mvn/version "1.0.0"}
  girouette/girouette       {:mvn/version "0.0.3"}}

 :aliases {:girouette {:extra-deps {girouette/processor {:mvn/version "0.0.3"}}
                       :ns-default girouette.processor
                       :exec-fn    process
                       :exec-args  {:css       {:output-file "public/style/girouette.css"}
                                    :garden-fn acme.frontend.my-grammar/class-name->garden
                                    :watch?    true}}}}

Setup

To begin, add the dependency.

;; Clojure CLI/deps.edn
{girouette/girouette       {:mvn/version "0.0.3"}}
;; Leiningen
[girouette "0.0.3"]

Next, you'll want to configure an alias to use girouette on the command line.

Here are some optional parameters.

  • Change :output-file if you need the stylesheet in a different path.
  • :garden-fn is the function turns class names into CSS classes.
    • You can define this in your own custom grammar.
      In the meantime, use the default grammar from the reagent example.
  • Finally, set :watch? to true so that your CSS can update as you edit your hiccup code.
:aliases {:girouette {:extra-deps {girouette/processor {:mvn/version "0.0.3"}}
                      :ns-default girouette.processor
                      :exec-fn    process
                      :exec-args  {:css       {:output-file "public/style/girouette.css"}
                                   :garden-fn acme.frontend.my-grammar/class-name->garden
                                   :watch?    true}}}