Fix support for complex defkeyframes in the latest garden version

dhleong · Nov 1, 2024 · f82b772 · f82b772
1 parent cfa5241
commit f82b772
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git 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
@@ -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))
+