A modern programming language that makes developers happier.

kotlinlang

Stylesheets:
I used to have this code working with kotlinx.css
```object ComponentStyles : StyleSheet("common") {
    val framed by css {
        border(1.px, BorderStyle.solid, Green.color)
    }

    // a lot more css classes ...
}```
How can I do this with emotion Stylesheets?

This currently prevents my code form compiling - is there any code example - or a hint towards a type that needs to be instanciated in order to be able to add that class based css code to elements?

Hint - write class name factory, using `emotion.css.css`

```fun createClassName(block: PropertiesBuilder.() -&gt; Unit): ClassName {
    val properties = ...
    return emotion.css.css(properties)
}```

Thanks - how do I get an instance of `PropertiesBuilder`  to apply `block`  on?

Also how can I use the `ClassName` Instances?

With the kotlinx / CssBuilder / styled code I was able to do this within components css block:
```if (video == props.selectedItem) +ComponentStyles.selected
else +ComponentStyles.selectable```
which would add the class dynamically ...

```fun createClassName(
    block: PropertiesBuilder.() -&gt; Unit,
): ClassName =
    emotion.css.css(jso(block))```

ok and then i suppose I use them with the existing
```PropsWithClassName.css(
    vararg classNames: ClassName?,
    crossinline block: PropertiesBuilder.() -&gt; Unit,
)```
?

So my code then looks like this:
```css(
    if (video == props.selectedItem) ComponentStyles.selected
    else ComponentStyles.selectable
) {
    display = Display.flex
    justifyContent = JustifyContent.spaceBetween
    margin = 2.px
    padding = 10.px
}```

With `ClassName`  alias more chances for sugar

DRAFT!
```+if (video == props.selectedItem) ComponentStyles.selected
    else ComponentStyles.selectable

css {
    display = Display.flex
    justifyContent = JustifyContent.spaceBetween
    margin = 2.px
    padding = 10.px
}```


There is one thing that I was able to do:
reference a partial style block inside another style block
```"button, input[type=submit], .navlink" {
    +ComponentStyles.buttonStyle
}```
Is there any way to make that work as well?

framework magic with the framework being styled i suppose?

Not available. We don’t have internal style map

thx, ill just reerence the block and have th css duplicated then for now, whatever ^^