CSS

ascent-css is typed CSS-in-Scala: property objects, classes, and at-rules. Authoring is platform-neutral; on the browser, DomStyleSink injects <style> into <head> as the tree mounts. Class names are derived automatically from the Scala object.

Declarations and classes

Use S.padding.px(8), S.display.flex, and nested Selectors. Extend CssClass and pass the object as an element arg; E.div(Card, "hello").

{
  object Card
      extends CssClass(
        S.padding.px(16),
        S.display.flex,
        Selector(":hover", S.color("cyan")),
      )

  E.div(Card, "hello")
}

hello

{
  object Card
      extends CssClass(
        S.padding.px(16),
        S.display.flex,
      )

  Card.className.nonEmpty
}

true

Style sink

Mount collects every CssClass / style attr into a per-render StyleRegistry. The JS entry (AscentApp.mount) supplies DomStyleSink; SSR (Html.renderPage) snapshots CSS into a string beside the markup. Two mounts never share a registry, but both dedup into the same <head> by class key.

{
  E.p("See ", E.a(A.href("html.html"), "HTML / SSR"), " for ", E.code("renderPage"), ".")
}

See HTML / SSR for renderPage.