Scoped CSS in Verniz

A <style> block inside a component is scoped to that component by default. The compiler parses CSS rules, hoists the stylesheet once and stamps both the component markup and every compound selector with a deterministic class.

Component CSS¶

fn Card(label: str, accent: str) -> View {
    <article class="card">
        <h2 class="title">{label}</h2>

        <style>
          .card {
            border: 1px solid @(accent);
            border-radius: 12px;
            padding: 1rem;
          }

          .card .title {
            color: @(accent);
          }
        </style>
    </article>
}

The style element does not render at its source position. Its rules are emitted once in the document head. The generated scope hash depends on the source file name and component name, not the CSS contents, so editing styles does not change component identity.

Dynamic values with @()¶

@(expression) becomes a CSS custom property in the stylesheet and a serialized value on the component root. It is a value bridge, not arbitrary CSS text splicing.

Use calc() when the dynamic value participates in an expression. Writing @(width)px produces TE733 because a var() reference cannot be concatenated that way.

Global CSS¶

Use an explicit opt-out for resets, document selectors and third-party styles:

<style global>
  :root { color-scheme: dark; }
  body { margin: 0; }
</style>

:global(selector) can open only part of an otherwise scoped rule. Prefer local styles; global is deliberately visible in source.

Compiler-assisted CSS¶

The CSS parser powers diagnostics that a separate stylesheet cannot provide because the compiler sees both the selector and the component markup:

• TE735 warns when a local selector matches no element and can suggest a nearby class.
• TE738 warns about an unknown property.
• TE731 requires global for runtime-provided style children.
• TE733 explains invalid @() concatenation.
• TE734 reports malformed :global().
• TE736 and TE737 catch style placement and missing-root errors.

Unknown CSS syntax is preserved conservatively rather than discarded. Warnings do not break the build.

Islands and CSS variables¶

When @() reads a signal inside an island, the client runtime recomputes the matching custom property. Scoped classes are preserved across revalidation and island hydration.

Next: Development Workflow.