preactile · v0.0.2

Styling

Styling

Preactile supports a few complementary approaches to styling.

CSS classes

The simplest approach is a standard class name:

import preactile.*

E.div(
  A.`class`("card"),
  E.h2(A.`class`("card-title"), "My Card"),
  E.p(A.`class`("card-body"), "Card content here."),
)

Inline styles

A.style takes CSS Declarations from S, not a Map:

import preactile.*

E.div(
  A.style(S.background("yellow"), S.padding("1rem")),
  "This box is highlighted!",
)

CSS-in-JS (CssClass)

preactile.dsl.css.CssClass generates a scoped class and injects the rules into the document. Use it for styles that belong to a component:

import preactile.*
import preactile.dsl.css.CssClass

object CardStyles extends CssClass(
  S.background("#fff"),
  S.borderRadius("8px"),
  S.boxShadow("0 2px 4px rgba(0,0,0,0.1)"),
)

StyledElement is a CssClass that also constructs a specific HTML tag, so you can write object Card extends StyledElement(E.div)(S.padding("1rem")) and then Card("…").

Live demo: CSS-in-JS and inline styles

This card uses CssClass for scoped styling plus inline styles for one-off overrides:

import preactile.*
import preactile.dsl.css.CssClass

object CardStyles
    extends CssClass(
      S.background("#fff"),
      S.borderRadius("8px"),
      S.boxShadow("0 2px 4px rgba(0,0,0,0.1)"),
      S.padding("16px"),
      S.maxWidth("300px"),
    )

object TitleStyles
    extends CssClass(
      S.marginBottom("8px"),
      S.color("#1f2937"),
    )

object BodyStyles
    extends CssClass(
      S.color("#6b7280"),
      S.fontSize("14px"),
      S.lineHeight("1.5"),
    )

object App extends Component[Unit]:
  def render(props: Unit): VNode = E.div(
    A.`class`("styling-demo"),
    E.div(
      CardStyles,
      E.h3(TitleStyles, "Styled Card"),
      E.p(BodyStyles, "This card uses Preactile's CSS-in-JS utilities for scoped styling."),
      E.div(
        A.style(S.marginTop("12px"), S.padding("8px"), S.background("#f3f4f6"), S.borderRadius("4px")),
        E.small("Inline styles work too!"),
      ),
    ),
  )
end App

This example runs in your browser; enable JavaScript to see it.

The CardStyles, TitleStyles, and BodyStyles objects compose CSS rules that are scoped to the component. Inline styles via A.style(S.marginTop("12px"), …) handle quick overrides without defining a separate style object.

See the Examples page for the other live demos.