Hey composers! Since the `Stylesheet.css` function was deleted (<https://github.com/JetBrains/compos...

# compose-web

[salomonbrys]

Hey composers!
Since the Stylesheet.css function was deleted (https://github.com/JetBrains/compose-jb/commit/cd7691a53fc73ed41abda6de604eb1f9a08af48b), I can find no way in Compose Web to have Css-In-JS, that is to have a component style classes defined within the component (I would usually use the syntax described in this issue: https://github.com/JetBrains/compose-jb/issues/1207).
This type of syntax (aka CSS-In-JS) is supported in Kotlin React with https://github.com/JetBrains/kotlin-wrappers/blob/master/kotlin-styled/README.md and is an important design decision in how we've been building our web apps with it.
Is Jetbrains Compose Web going to support it back ? Is there a workaround we can use in the meantime ?
Note that using style is insufficient as it does not allow full css selection (hover, children, etc.).
Note that when we were using Kotlin-React, the difference between css and style was important: the former described "stable" style (in order to avoid class regeneration) while the second described "moving" style.

[Oleksandr Karpovich [JB]]

It was really experimental and had corresponding annotation. There is no plan to work on that api any time soon.

The suggested approach is to use Stylesheet https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Style_Dsl#stylesheet
It's not "within component", unfortunately. But you can have 1 Stylesheet per component

I'll have a look at possible migration options. Maybe some solution can be implemented in app code bases

[salomonbrys]

This is unfortunate that there is no plan to support a pattern that Kotlin/React encourages. CSS-in-JS is very useful !

[David Herman]

My project provides this: https://bitspittle.dev/blog/2022/kotlinsite#organizing-styles Would it work for you?

You basically write component styles next to your component, before a Gradle script stitches them all together for you at compile time.

There may be a use-case for you that I'm not aware of, but I'm OK with next to the component vs. within it?

[salomonbrys]

This looks a lot like having a Stylesheet object per component.

[David Herman]

I suppose! But a less obnoxious debugging experience when you use your browser tools.

[David Herman]

Just curious, what's the advantage for nested css that I'm missing?

[David Herman]

Maybe I'm not too sure what "moving" style is. In Kobweb, you have component styles (the core styles) and component variants (one-off tweaks)

[David Herman]

I don't talk about it in the blog post as it was already getting too long, but I went into it a bit more in my README: https://github.com/varabyte/kobweb#componentvariant