2023-04-12 lambdaisland | Clojure Slack Archive

lambdaisland

Marius 2023-04-12T15:51:25.581169Z

Hi all! First of all thank you very much for Ornament, I really enjoy build nice components with it. Only one thing is not working yet: Using animation keyframes. I can get them into the CSS file. What is the correct way to output Garden keyframes, defined with defkeyframes along with the Ornament CSS in the build hook? I defined the keyframes like this:

(garden/defkeyframes spin
  [:from {:transform "rotate(0deg)"}]
  [:to {:transform "rotate(360deg)"}])

and then referenced them in defstyled

(o/defstyled spinner :div
  :animation [[spin "1.1s" :infinite :linear]])

But something seems to be missing….. any help or pointers are appreciated!

Marius 2023-04-13T07:10:55.594479Z

✅ After trying a bit more, I eventually found a working solution - although not so nice as I was hoping: Adding the animation to global styles (included in the Ornament build hook) does produce the necessary CSS:

(def global-styles
  [(at-keyframes "spin"
                 ["0%" {:transform "rotate(0deg)"}]
                 ["100%" {:transform "rotate(360deg)"}])])

Build hook excerpt (from the Ornament Readme):

(spit "resources/public/styles.css"
        (str
         (gc/compile-css (concat
                          girouette-preflight/preflight-v2_0_3
                          global-styles))
         "\n"
         (o/defined-styles)))

Marius 2023-04-13T07:11:26.601159Z

(leaving all those comments here for people having the same issue one day.. 🙂 )

plexus 2023-04-15T13:26:44.408349Z

hey Marius, that's pretty cool. It's clearly a use case we hadn't tried yet. I think using a global style sheet is correct, since it's not something that's necessarily tied to a single component. You can still use defkeyframes

(def/defkeyframes my-animation
  [:from {:background "red"}]
  [:to {:background "yellow"}])

(o/defstyled foo :div
  {:animation [[my-animation "5s"]]})

(println
 (gc/compile-css
  (cons
   my-animation
   (o/defined-styles))))

plexus 2023-04-15T13:28:26.181469Z

That said I think Ornament could offer its own defkeyframes which automatically uses fully qualified identifiers, like defstyled does, and which get included in (o/defined-styles). Feel free to open an issue for that, it's not entirely trivial, we'll have to rework some bits, but it shouldn't be too hard either.

Marius 2023-04-12T19:51:06.613819Z

I figured if I define it like this:

(garden/defkeyframes spin
  [:0% {:transform "rotate(0deg)"}]
  [:100% {:transform "rotate(360deg)"}])

(o/defstyled spinner :div
  [[spin "1.1s" :infinite :linear]]
  {:animation  "spin 1.1s infinite linear"})

Then I get the following CSS:

.website_components__spinner {
  animation: spin 1.1s infinite linear;
}
@keyframes spin {
  .website_components__spinner 0% {
    transform: rotate(0);
  }
  .website_components__spinner 100% {
    transform: rotate(360deg);
  }

The CSS is almost correct, I just have to get rid of the component name in front of the keyframe names (0% and 100% in this case), so it should be:

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }

Clojurians Log v2

lambdaisland