CssStyle

A class which allows a user to define styles that will be added into the site's CSS stylesheet.

This is important because some functionality is only available when defined in the stylesheet, e.g. link colors, media queries, and pseudo classes. The name for the style is generated automatically based on the style property's name (possibly tweaked by a prefix and/or containing singleton class).

For example, you can declare a style like this:

val NonInteractiveStyle = CssStyle {
  hover { Modifier.cursor(Cursor.NotAllowed) }
}

which will result in a CSS rule in your site's stylesheet like this:

.non-interactive:hover {
  cursor: not-allowed;
}

While most developers will never see that this is happening, it's still very helpful for debugging, for if you inspect an element that is applying this style in your browser's dev tools, you'll see it applied like so:

<div class="non-interactive">...</div>

This is much easier to understand at a glance than if all the styles were inlined directly into the HTML.

You can also subclass CssStyle to create a way to limit the parameters that users can specify in order to generate a style:

class WidgetSize(
    fontSize: CSSLengthNumericValue,
    height: CSSLengthNumericValue,
) : CssStyle.Restricted.Base(Modifier.fontSize(fontSize).height(height) ) {
    companion object {
        val XS = WidgetSize(...)
        val SM = WidgetSize(...)
        val MD = WidgetSize(...)
        val LG = WidgetSize(...)
    }
}

which here will create four classes: widget-size_xs, widget-size_sm, widget-size_md, and widget-size_lg.

This is a particularly useful pattern for when you want to allow users to pass in a parameter into a method that you provide:

@Composable
fun Widget(..., size: WidgetSize, ...) {
  val modifier = WidgetStyle.toModifier().then(size.toModifier())
  ...
}

which would result in an element like <div class="widget widget-size_md">...</div>.

You can use CssName and CssPrefix annotations to customize the name of the CSS class generated for a style.

Inheritors