Awesome
Garden reloader component
Watch your Garden stylesheets for changes, and compiles them to CSS.
Quickstart
Add lambdaisland/garden-watcher
as a dependency in deps.edn
(Clojure CLI),
project.clj
(Leiningen) or build.boot
(Boot).
;; deps.edn
{lambdaisland/garden-watcher {:mvn/version "1.0.45"}}
;; project.clj/build.boot
[lambdaisland/garden-watcher "1.0.45"]
Create vars containing Garden-style declarations, and add a ^:garden
metadata
to the var.
(ns sesame.styles)
(def ^:garden main
(list
[:h1 {:color "blue"}]
[:h2 {:color "green"}]
[:h3 {:color "red"}]))
Now you start garden-watcher, passing it your namespace name, and it will
recompile the stylesheet and create a main.css
file whenever the namespace
changes. You can start garden-watcher in several ways. For more metadata options
(e.g. to control the output file) and a convenience macro (defstyles
), see
below.
Use with garden-watcher.main
There's a main namespace that's convenient if you want to simply run the watcher as its own process. You pass one or more namespace names as arguments.
;; leiningen
lein run -m garden-watcher.main name.of.your.namespace
;; clojure CLI
clj -m garden-watcher.main name.of.your.namespace
Use as a library
There are start/stop functions so you can hook this up however you like. Useful for use with Integrant, Mount, etc.
(require '[garden-watcher.core :as gw])
(def watcher (gw/start-garden-watcher! '[name.of.namespace name.of.other.namespace]))
(gw/stop-garden-watcher! watcher)
Use as a Component
If you're using com.stuartsierra.component
then you can use the built-in
component directly.
Use garden-watcher.core/new-garden-watcher
to create the component, passing it
a vector of namespace names. Once started this will watch and compile each var
with a :garden
metadata key in the given namespaces to a CSS file.
Also, hawk options map can be passed as a second argument.
(ns user
(:require [com.stuartsierra.component :as component]
[figwheel-sidecar.config :as fw-conf]
[figwheel-sidecar.system :as fw-sys]
[garden-watcher.core :refer [new-garden-watcher]])) ;; <------
(defn dev-system []
(component/system-map
:figwheel-system (fw-sys/figwheel-system (fw-conf/fetch-config))
:css-watcher (fw-sys/css-watcher {:watch-paths ["resources/public/css"]})
:garden-watcher (new-garden-watcher '[sesame.styles]))) ;; <------
The above will generate resources/public/css/main.css
, and recreate it
whenever styles.clj
is saved. By combining it with Figwheel's CSS reloader you
get instant reloading in the browser.
Use of metadata
Garden provides a macro, garden.def/defstylesheet
, that allows you to pass
compiler options to garde.core/css
. By adding :output-to
this allows writing
stylesheets that "automatically" create the corresponding CSS files. When using
garden-watcher you should not use defstylesheet
.
With defstylesheet
the compile-to-CSS happens as a side effect of loading the
namespace, which makes it impossible to load the namespace without generating
the CSS file, or generating the CSS without reloading the namespace. Therefore
garden-watcher
chose a different approach.
Instead create regular vars, adn tag them with a :garden
metadata key. You can
use a map to add compiler options, including :output-to
.
(def
^{:garden {:output-to "resources/public/styles.css"
:vendors ["webkit"]}}
my-stylesheet
(list
[:h1 {:color "blue"}]))
If you don't specify an output file, it defaults to resources/public/css/{{var-name}}.css
;; This creates resources/public/css/anja.css
(def ^:garden anja
(list
[:h1 {:color "blue"}]))
Note that Garden provides garden.def/defstyles
macro that allows you to get
rid of the (list ,,,)
(that's all that macro does), so this code is equivalent:
(require '[garden.def :refer [defstyles]])
(defstyles ^:garden anja
[:h1 {:color "blue"}])
Or you can use garden-watcher.def/defstyles
, which does the exact same thing,
but automatically adds the :garden
metadata, so this code is equivalent again:
(require '[garden-watcher.def :refer [defstyles]]) ;; <-- different namespace
(defstyles anja
[:h1 {:color "blue"}])
One-off Compiling to CSS
To generate CSS files from these vars, use
garden-watcher.core/compile-garden-namespaces
:
(compile-garden-namespaces '[sesame.styles])
garden-watcher also includes a "main" entry point to make it easy to invoke this as a build step.
lein run -m garden-watcher.main sesame.styles
E.g. say you're building an uberjar containing compiled ClojureScript and CSS.
(defproject sesame "0.1.0"
,,,
:uberjar-name "sesame.jar"
:profiles {,,,
:uberjar
{:prep-tasks ["compile"
["cljsbuild" "once" "min"]
["run" "-m" "garden-watcher.main" "sesame.styles"]]
:omit-source true
:aot :all}})
CLJC support
In order to share code with Clojurescript, cljc
files are fully supported.
However, note that priority is given to regular clj
files when both kind
exist for a given namespace.
License
Copyright © 2016-2019 Arne Brasseur
Distributed under the Mozilla Public License 2.0 (https://www.mozilla.org/en-US/MPL/2.0/)