I am trying to use the > operator in garden and I am not sure how what is the moral equivalent of div > span { … }

I tried [“div > span” {…}] and [:div [:> [:span {…}]]] but nothing seems to work

[“div > span” {…}] should work actually. There’s also the garden.selectors/> function that you can look into.

when I look at what [“div > span”] produces it makes div &gt span

and I don’t get how to use the selectors/>, do you have any resource you can recommend that documents it or shows an example usage

@adamkowalski: I assume you’re using garden in ClojureScript and having sablono or something similar render your CSS? That explains why the > character is getting escaped. You’ll need to use sablono’s :dangerouslySetInnerHTML: https://github.com/r0man/sablono#setting-innerhtml-of-a-dom-node

To accomplish the same effect in pure garden without a string you would have to require the garden.selectors :as s namespace and then use the > function like so: (css [(s/> :div :span) {…}]

Thanks, that helps a lot. I am using reagent, and using a [:style (garden/css ...)] to actually load in the styles which seems to be the issue. Do you have a recommended way other than dangerously seting the inner html? I've heard of using the good.style/installStyles ... method, but I'm wondering if there is a best practice to follow.

@adamkowalski: Good question. I’m still experimenting with all of that myself. I don’t have experience with Reagent, but I’m sure there must be a way to do the setInnerHTML with it as well to solve the problem.

As for best practice, I imagine most would still advise handling CSS in external files. The dream for me is building some sort of macro that evaluates all of the styles inside each component and compiles that to an external file for use in production and the “setInnerHTML” hack can be used for development purposes.

Ultimately I think we’re headed to a place where all of your components and the styles for those components exist together in cljc files that can be rendered by both the server and the client. That way we’ll have the benefit of server-side rendering with external, cacheable stylesheets and the simplicity of having all of the styles for components be packaged in the component itself.

Now that I’m looking at the documentation, goog.style/installStyles may solve the problem: (style/installStyles (css [(s/> :div :span) {…}]))

But that may be tricky in development when you want to be changing styles as you’ll also need to manage the uninstalling of those styles as well.

What you could do if you wanted an aggregate css file from all your individual components is to use a core.async channel. Essentially have one channel which is waiting for arbitrary css to come to it, and then it can auto generate the external css. Then like what om next does, where the root component grabs the query it's children need. You could recursively grab the styles the child needs

And yeah that's my concern with goog.style, you need to uninstall the styles after each change and install the newest ones

I like that core.async idea. Need to find time to play around with this stuff more.