Compilador de estilos · Docs

Los estilos del usuario son CSS simple guardado como datos y compilado por @malla/renderer. Panda CSS solo da estilo al propio editor; no puede ver los estilos del usuario, que viven en la base de datos.

Formato de almacenamiento

Primero el punto de quiebre, nombres de propiedad en camelCase y valores de texto con unidades. Las claves son <breakpoint> o <breakpoint>:<state>; los componentes añaden variant:<name>.

json

"styles": {
  "base":       { "display": "flex", "gap": "12px", "color": "var(--color-brand)" },
  "base:hover": { "opacity": "0.9" },
  "tablet":     { "paddingBlock": "80px" },
  "mobile":     { "flexDirection": "column" }
}

Cada clave se compila exactamente a una regla o un bloque de media, y el panel lee y escribe styles[breakpoint] directamente.
“Sobrescrito en tablet” significa que la propiedad existe en styles.tablet; borrar la clave la restablece. Los objetos vacíos se eliminan.
Los tokens son variables CSS: --color-*, --font-*, --space-*.
Los valores enlazados viven aparte en styleBindings y se compilan a variables CSS por elemento que se asignan en tiempo de ejecución.

Cascada

Capas de la cascada, de menor a mayor

@layer reset

@layer tokens

@layer classes

@layer nodes

css

@layer reset, tokens, classes, nodes;

@layer classes {
  .btn { padding: 12px 20px; background: var(--color-brand); }
  .btn:hover { opacity: .9; }
  .btn.btn-ghost { background: transparent; }
}
@layer nodes {
  .n-hero { padding-block: 120px; }
  @media (max-width: 767px) { .n-hero { padding-block: 64px; } }
}

La precedencia nunca depende de accidentes de especificidad: clase → clase combinada → nodo. Las clases combinadas se compilan a selectores compuestos, porque CSS ignora el orden de los nombres en el atributo class. Los puntos de quiebre van de escritorio hacia abajo (max-width: 991 px tablet, 767 px móvil) y se emiten en orden dentro de cada capa.

html

<section class="hero n-hero" data-node="hero">…</section>

En el editor

Cada frame del lienzo tiene sus propias capas de estilo; editar un nodo recompila solo la regla de ese nodo, así que arrastrar un slider nunca vuelve a parsear el CSS de la página.
En el editor, las unidades de viewport se reescriben como calc(n * var(--malla-vh)) para que los frames que se ajustan al contenido nunca crezcan sin fin; el CSS publicado conserva las unidades reales.

Al publicar

El CSS compartido (tokens, reset, clases) se compila una vez por snapshot con nombres basados en el hash del contenido; las clases sin usar se descartan y la salida se minifica.