Applying conditional .active styles in Kobweb feels unergonomic

[goransipic]

Right now, if I want to apply an “active” variant of a style in Kobweb, I usually have to fall back to raw strings, like this:

val PageLoadingStyle = CssStyle {
	base {
		Modifier
			.position(Position.Fixed)
			.top(0.px)
			.right(0.px)
			.bottom(0.px)
			.left(0.px)
			.styleModifier {
				property("-webkit-transition", "all .4s .2s ease-in-out")
			}
			.transition(Transition.of("all", 0.4.s, TransitionTimingFunction.EaseInOut, 0.2.s))
			.backgroundColor(Color.rgb(0x1f1b2d))
			.opacity(0)
			.visibility(Visibility.Hidden)
			.zIndex(9999)
			.fillMaxSize()
	}
	cssRule(".active") {
		Modifier
			.opacity(1)
			.visibility(Visibility.Visible)
	}
}

@Composable
fun LoadingOverlay(isActive: Boolean) {
    Box(
        PageLoadingStyle
            .toModifier()
            .classNames(if (isActive) "active" else "")
    ) {
        // spinner / content here
    }
}

This works, but it doesn’t feel very “Kobweb native” since I’m relying on a raw "active" string.

Proposal

It would be more idiomatic to define separate CssStyles with @CssName annotations and then compose them.

For example:

val PageLoadingStyle = CssStyle.base {
    Modifier
        .position(Position.Fixed)
        .top(0.px)
        .right(0.px)
        .bottom(0.px)
        .left(0.px)
        .styleModifier { property("-webkit-transition", "all .4s .2s ease-in-out") }
        .transition(Transition.of("all", 0.4.s, TransitionTimingFunction.EaseInOut, 0.2.s))
        .backgroundColor(Color.rgb(0x1f1b2d))
        .opacity(0)
        .visibility(Visibility.Hidden)
        .zIndex(9999)
        .fillMaxSize()
}

@CssName("active")
val PageLoadingActiveStyle = CssStyle.base {
    Modifier
        .opacity(1)
        .visibility(Visibility.Visible)
}

And then conditionally apply them like this:

@Composable
fun LoadingOverlay(isActive: Boolean) {
    Box(
        PageLoadingStyle
            .toModifier()
            .thenIf(isActive) { PageLoadingActiveStyle.toModifier() }
    ) {
        // spinner / content here
    }
}