Stylesheets: I used to have this code working with kotlinx.css ```object ComponentStyles : StyleShee...

# react

[iari]

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?

[turansky]

сс @Sergei Grishchenko

[iari]

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?

[turansky]

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

[turansky]

fun createClassName(block: PropertiesBuilder.() -> Unit): ClassName {
    val properties = ...
    return emotion.css.css(properties)
}

[iari]

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

[iari]

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 ...

[turansky]

fun createClassName(
    block: PropertiesBuilder.() -> Unit,
): ClassName =
    emotion.css.css(jso(block))

[iari]

ok and then i suppose I use them with the existing

PropsWithClassName.css(
    vararg classNames: ClassName?,
    crossinline block: PropertiesBuilder.() -> Unit,
)

?

[iari]

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
}

[turansky]

Yes

[turansky]

With ClassName alias more chances for sugar

[turansky]

DRAFT!

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

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

[iari]

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?

[turansky]

Looks like framework magic

[iari]

framework magic with the framework being styled i suppose?

[iari]

so not available ?

[turansky]

Not available. We don’t have internal style map

[iari]

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