Static CSS injection

[raystubbs]

It'd be awesome if we could re-use aliases when generating custom CSS. Any chance of supporting a macro like: (css-rule "custom selector" ...all the things) -> generated static CSS rule. The use case I have is for styling ::slotted targets from the shadow dom.

I have something like this:

[:style
"
::slotted([slot=\"my-thing\"]) {
  ...the rules...
}
"]
[:slot {:name \"my-thing\"}]

It would be sweet to be able to do:

[:style (css-rule "::slotted([slot=\"my-thing\"])" :flex :bg-yellow ...etc)]
[:slot {:name "my-thing"}]

As it stands, there's no easy way to borrow shadow-css aliases for stuff like this. It seems like having a catch-all for edgy cases like this might be a good idea.

[thheller]

My take is that you just use CSS, and let the build process include it. :shadow.css/include exists for that.

As done here:

• https://github.com/thheller/shadow-cljs/blob/3975248fd86713e9dea8aa7cb19a1e111458ed82/src/main/shadow/cljs/ui/main.cljs#L3
• https://github.com/thheller/shadow-cljs/blob/f8f0ce5ba4a649c671762acde247c0447d07e9b1/src/main/shadow/cljs/ui/components/code_editor.cljs#L2

You can just tell it to include any CSS file from the classpath, so like this file is just prepended as is into the output.

I'm not totally against creating global styles by some other way, but so far this has solved any need I had.

[:slot {:name "my-thing" :class (css ["&::slotted" :flex :bg-yellow)}] should also be fine?

[thheller]

Also note that the general idea for shadow-css is that elements style themselves. not others. So selectors like this likely will get you in trouble and create conflicting nightmares shadow-css was designed to prevent in the first place.

[raystubbs]

Wow, that include ability is cool. Didn't know about it. Yes something like what you mention above actually does generate the right CSS. The shadow root I was attaching it to didn't seem to like it though, so I'd started to wonder if ::slotted couldn't be nested under another selector... turns out the problem was something else entirely.

Anyway thanks for all the work you do on these projects man, they're really cool.

[raystubbs]

What do you think about allowing something like Tailwind's @apply in included CSS? Seems like it might be interesting to consider, would allow the styling setup for aliases to be re-used in custom CSS.

[thheller]

Currently out of scope. I simply don't want to maintain a CSS parser or anything that processes CSS in any way. Generating it is my limit for now.