how to add hover to property using `org.jetbrains.compose.web.css.StyleScope` ? ex: ```Span({ styl...

# compose-web

[dvdandroid]

how to add hover to property using org.jetbrains.compose.web.css.StyleScope ?
ex:

Span({
  style { // this is org.jetbrains.compose.web.css.StyleScope, not org.jetbrains.compose.web.css.CSSBuilder
    property("color", "#fff") // <-- hover??
  }
})

compose 1.1.0-alpha05

[Oleksandr Karpovich [JB]]

https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Style_Dsl#selectors-examples

there is an example with hover

[dvdandroid]

yeah, but i don't need (would not use) a stylesheet object for a single hover

can't understand why there are 2 different apis:
the one i would like to use: https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt#L43
i think should use org.jetbrains.compose.web.css.CSSBuilder interface instead of org.jetbrains.compose.web.css.StyleScope

the one you are suggesting: https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleSheet.kt#L48
org.jetbrains.compose.web.css.CSSBuilder (so hover etc..)

[David Herman]

That's not Compose for Web's fault, that's html / css

[David Herman]

Basically some things you can only define in style sheets

[David Herman]

You can search up and read about psuedo elements and pseudo classes

[David Herman]

These simply aren't allowed in inline styles, which is what you are using here.

In other words, your code above would translate to this element:

<span style="color:#fff" />

☝️ The style is defined "inline", e.g. inside the tag, vs. say <span class="external-style" /> where the style info is now detached and associated with that class name and can be defined elsewhere (often a style sheet).

[David Herman]

It's weird for us because, in the world of Compose for Web, we're just writing Kotlin, and everything looks like code. But in the world of html / css, stylesheets are encouraged and inline styles are discouraged (because I'd assume separation of concerns / decoupling -- in theory you can swap a new stylesheet in / out and completely change the look and feel of a well written site)

[David Herman]

FWIW, I'm working on my own layer on top of Compose for Web which approaches this in a slightly different direction. It's called Kobweb if you wanted to check it out.

With Kobweb, you could do something like this for your above example:

val MyHoverableSpanStyle = ComponentStyle("hoverable-span") {
  base { Modifier.color(Colors.White) }
  hover { Modifier.backgroundColor(Colors.Yellow) }
}

Span(MyHoverableSpanStyle.toModifier().asAttributesBuilder()) { ... }

[David Herman]

I'll leave things there for now -- let me know if you had any followup questions!