Document CSS selector usage

[Schahen]

Currently all css selector helpers are public and global which does't make much sense so we need to hide anything that is possible to hide and document selectors and their usage.

[Queatz]

I still to this day cannot figure out how to add a :hover selector to a plain old Div( { style { } } )

[dzikoysk]

@Queatz did you find out? 😅

[Queatz]

@dzikoysk Yes 😂 It's impossible. Because plain old CSS doesn't support this either, lol. A class has to be used for hover effects.

Like:

object AppStyles : StyleSheet() {
  val myClassName by style {
    // Add your styles here
    self + hover style {
      // Add your hover styles here
    }
  }
}

And:

Div({
  classes(AppStyles.myClassName)
})

[dzikoysk]

Oh right, because it's translated directly to the style attribute, not an autogenerated class assigned to this attribute 🤦 Thanks :)

Too much React I guess, although it'd be probably a decent enhancement if it'd work the same way - way simpler than doing it via StyleSheets in most cases.

[Queatz]

Yeah, I was like why didn't they implement this, lol. I'm sure there's a way to do it buy adding rules to a StyleSheet dynamically and then having an extension function ex. fun AttrsScope<T>.hoverStyles(block: StyleScope.() -> Unit) Not sure how performant it'd be though, it would have to add only once but still recompose the style block.

[dzikoysk]

Yup, I was experimenting with web target to find something relatively similar to React, but eventually I kinda gave up as it's a little bit too "raw" for now. I'll try to give it a chance one more time once I'll find some extra time to play with it.

[Queatz]

Ah if you're looking for something more like React, what you want is Compose Web, here are some examples. Compose HTML is the pretty raw 😄

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.