Clojurians Log v2
garden
I can’t figure out how do to [:& pseudoelement {style}]
I’m trying to do this selector.. input::placeholder ..from a nested vector.
I figured it out. I can define a pseudoclass with (defpsuedoclass) which just returns the ":pseudoclass" string. To combine it you can do (& mypseudoclass) or (css-selector :& mypseudoclass) . Something like that..
(css-selector (a ":hover"))
;; => "a:hover"
Hi! What is the best way to use Garden for styling cljs+reagent+shadow-cljs project? I am trying to figure out how to use it, but its documentation does not have any tutorials. Do I have to "compile" garden code to CSS using build-hooks in shadow-cljs? Or is there any way to use Garden code directly in the Reagent components?
Thank you!
What did you decide to go with @hentai.exe?
I’m looking at the hook in combo with inlining a reactive style tag in the page.
There are likely many ways to do it, but it should probably be officially part of the build process, so shadow-cljs hooks might be the first place to start.
Here is an example.
https://github.com/beetleman/shadow-cljs-hooks/blob/master/src/shadow_cljs_hooks/garden.clj
Here is an example of mounting to dom.
https://tech.toryanderson.com/2020/03/14/my-garden-css-has-ascended/
Sometimes css doesn’t change that much, so you could just one-off compile the garden rules to a .css
file and include it like an other static resource. Or even set a separate watch process to reload the css comilation in another terminal window, along side the shadow-cljs build..
Garden tends to be for the static declaration of styles, whereas vanilla reagent more directly support dynamic reactive inline style declarations, but those don’t have the full syntax of selectors/rules (like :hover pseudo class).
You could update the <style> tag at runtime, but I don’t know the performance gotcha’s of that.