silk-foundation/com.varabyte.kobweb.silk.init/CssStyleRegistrar/registerStyle

registerStyle

abstract fun registerStyle(cssSelector: String, init: StyleScope.() -> Unit)(source)

An alternate way to register global styles with Silk instead of using a Compose HTML StyleSheet directly.

So this:

@InitSilk
fun initStyles(ctx: InitSilkContext) {
  ctx.stylesheet.registerStyle("*") {
    base {
      Modifier.fontSize(48.px)
    }
    Breakpoint.MD {
      ...
    }
  }
}

is a replacement for all of this:

object MyStyleSheet : StyleSheet() {
  init {
    "*" style {
      fontSize(48.px)

      media(mediaMinWidth(...)) {
        style {
          ...
        }
      }
    }
  }
}

@App
@Composable
fun AppEntry(content: @Composable () -> Unit) {
  SilkApp {
    Style(MyStyleSheet)
    ...
  }
}

Note that, unlike CssStyle blocks, you cannot pass an extraModifier parameter here, because you never call toModifier() on these styles (which is when the extra modifier parameter is applied. If you get an error about an attribute modifier, you should work with the raw underlying elements instead:

// Before
ctx.stylesheet.registerStyle("html") { Modifier.draggable(false) } // error

// After
@Composable
@App
fun AppEntry {
  LaunchedEffect {
    val htmlElement = document.documentElement as HTMLElement
    htmlElement.draggable = false
  }
}