diff --git a/src/spade/core.cljc b/src/spade/core.cljc index 119421d..59fbeb0 100644 --- a/src/spade/core.cljc +++ b/src/spade/core.cljc @@ -5,7 +5,8 @@ #?@(:clj [[garden.stylesheet] [net.cgrand.macrovich :as macros] [spade.runtime]]) - [spade.util :refer [factory->name build-style-name]])) + [spade.util :refer [factory->name build-style-name + unpack-keyframes-nesting]])) (defn- extract-key [style] (:key (meta (first style)))) @@ -169,10 +170,16 @@ style params style-name-var) info-map (cond-> `{:css (when ~name-var - (spade.runtime/compile-css - (garden.stylesheet/at-keyframes - ~name-var - ~(or base-style-var (vec style))))) + ~(if base-style-var + `(spade.runtime/compile-css + (apply garden.stylesheet/at-keyframes + ~name-var + (#'unpack-keyframes-nesting ~base-style-var))) + `(spade.runtime/compile-css + (garden.stylesheet/at-keyframes + ~name-var + ~@style)))) + :style ~(str (vec style)) :name ~name-var} key-var (assoc ::key key-var))] diff --git a/src/spade/util.cljc b/src/spade/util.cljc index b1582ec..8d45ac8 100644 --- a/src/spade/util.cljc +++ b/src/spade/util.cljc @@ -49,3 +49,18 @@ ; easiest case: no key is necessary :else base)) + +(defn unpack-keyframes-nesting + "In the latest versions of garden, using [:&] to return multiple + style rules from within a conditional or other structure like + `(let)` in an `(at-keyframes)` structure keeps that `&` in the + output CSS. This function 'unpacks' such structures so the compiled CSS is clean." + [style-rules] + (mapcat + (fn maybe-unpack-keyframes-nesting [style-rule] + (if (and (vector? style-rule) + (= :& (first style-rule))) + (next style-rule) + [style-rule])) + style-rules)) +