Compiler

The css function optionally takes a map of compiler output flags.

Flags

Printing

Often you are interested in saving a fully expanded result of compilation for development and a compressed version for production. This is controlled by the :pretty-print? flag which may either be true or false. By default this flag is set to true.

Assuming:

(def styles
  [[:h1 {:font-weight "normal"}]
    [:a {:text-decoration "none"}]])

(css {:pretty-print? true} styles) results in the following output when compiled:

h1 {
  font-weight: normal;
}

a {
  text-decoration: none;
}

(css {:pretty-print? false} styles) results in the following output when compiled:

"h1{font-weight:normal}a{text-decoration:none}"

For Clojure generated stylesheets are compressed using the YUI Compressor which yields much better results when compared with the previous versions.

user=> (css {:pretty-print? false} [:body {:background "#ff0000"}])
"body{background:#f00}"
user> (css {:pretty-print? false} [:div {:box-shadow [[(px 0) (px 0.5) (hsl 0 0 0)]]}])
"div{box-shadow:0 .5px #000}"

For ClojureScript compression mostly consists of whitespace elimination wherever possible.

Saving

Note: This is currently not available for ClojureScript, but support is planned.

To save a stylesheet to disk simply set the :output-to flag to the desired path.

user=> (css {:output-to "foo.css"} [:h1 {:font-weight "normal"}])
Wrote: foo.css
"h1 {\n  font-weight: normal;\n}"

Vendors

Vendor prefixing can be a pain but Garden can help with that in some cases if you set the :vendors flag. The value is expeced to be a vector of prefixes (ie ["webkit" "moz" "o"]). By specifying this, Garden will automatically prefix declarations tagged with the ^:prefix meta and @keyfames.

This:

(require '[garden.def :refer [defrule defkeyframes]])

(defkeyframes pulse
  [:from
   {:opacity 0}]

  [:to
   {:opacity 1}])

(css {:vendors ["webkit"]
      :output-to "foo.css"}

  ;; Include our keyframes
  pulse

  [:h1
   ;; Notice we don't need to quote pulse.
   ^:prefix {:animation [[pulse "2s" :infinite :alternate]]}])

will produce

@keyframes pulse {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

@-webkit-keyframes pulse {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

h1 {
  -webkit-animation: pulse 2s infinite alternate;
  animation: pulse 2s infinite alternate;
}

Auto-prefixing

If you want Garden to automatically vendor prefix specific properties, add them to the :auto-prefix set.

user=> (css
        {:vendors ["webkit"]
         :auto-prefix #{:border-radius}}
        [:.foo {:border-radius (px 3)}])
".foo{border-radius:3px;-webkit-border-radius:3px;}"

Dynamic Styles

To load styles dynamically in browser, you can use

(require '[goog.style] '[garden.core :refer [css]])
(import '[goog.html SafeStyleSheet] '[goog.string Const])
(goog.style/installSafeStyleSheet
 (SafeStyleSheet/fromConstant
  (Const/from
   (css [:body {:background "#ff0000"}]))))