CSS Escopado no Verniz

Um bloco <style> dentro de componente é escopado a ele por padrão. O compilador analisa regras CSS, iça a folha uma vez e carimba markup e cada compound selector com uma classe determinística.

CSS de componente¶

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

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

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

O elemento style não renderiza onde foi escrito. As regras aparecem uma vez no head. O hash depende do nome do arquivo e do componente, não do conteúdo CSS; editar estilo não muda a identidade do componente.

Valores dinâmicos com @()¶

@(expressão) vira uma custom property na folha e um valor serializado na raiz do componente. É uma ponte de valor, não splice arbitrário de texto CSS.

Use calc() quando o valor dinâmico participa de uma expressão. @(largura)px produz TE733 porque uma referência var() não pode ser concatenada assim.

CSS global¶

Use opt-out explícito para resets, seletores de documento e estilos externos:

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

:global(seletor) abre apenas parte de uma regra escopada. Prefira estilos locais; o global é visível de propósito.

CSS assistido pelo compilador¶

Como enxerga seletor e markup juntos, o compilador oferece diagnósticos que um arquivo CSS separado não consegue:

• TE735 avisa quando um seletor local não casa elemento e pode sugerir uma classe próxima.
• TE738 avisa propriedade desconhecida.
• TE731 exige global para children de style fornecidos em runtime.
• TE733 explica concatenação inválida de @().
• TE734 aponta :global() malformado.
• TE736 e TE737 detectam posição inválida e componente sem raiz.

Sintaxe CSS desconhecida é preservada de forma conservadora. Warnings não quebram o build.

Ilhas e variáveis CSS¶

Quando @() lê signal numa ilha, o runtime recalcula a custom property. Classes de escopo sobrevivem à revalidação e à hidratação.

Próximo: Fluxo de Desenvolvimento.