Experiment: add special syntax for CSS variables

[dhleong]

At compile time, keywords whose names are surrounded in *ear-muffs* get transformed to refer to CSS variables. When used as a map key, :*font-size* becomes :--font-size, and :my.namespace/*font-size* becomes :--my-namespace--font-size. Keywords used as map values get transformed the same, but are additionally wrapped by spade.runtime/->css-var, which results in garden transforming it to eg var(--my-namespace--font-size). The advantage of this approach compared to the original one (see below) is that any var usage creates just a single keyword object, instead of two, that can be reused throughout the compiled code.

This is basically compile-time syntactic sugar for people wanting to use CSS variables in a way a somewhat idiomatic way.

TODO:

• Handle keywords not in map-value position (for example, within vectors)

---

Original description:

At compile time, keywords with the namespace "var" get transformed
to refer to CSS variables. Map keys like :var/font-size become
:--font-size and map values become :var(font-size). This syntax
seems nice since, at least in the "resolve" version, it looks like
the equivalent CSS.

However, this syntax means that all vars are global, unnamespaced, which
is perhaps not ideal. So, this is sort of a proof of concept. Perhaps a
better syntax would be eg ::*font-size*. This is somewhat familiar due
to clojure's use of earmuffs for dynamic vars, and also allows
namespacing with native clojure namespaces. "Global" vars if desired
could still be created as eg :global/*font-size*.