Compilateur de styles · Docs

Les styles des utilisateurs sont du CSS simple, stocké sous forme de données et compilé par @malla/renderer. Panda CSS ne sert qu'à styler l'éditeur lui-même ; il ne voit pas les styles des utilisateurs, qui vivent dans la base de données.

Format de stockage

Organisé d'abord par point de rupture, avec des noms de propriétés en camelCase et des valeurs sous forme de chaînes avec unités. Les clés sont <breakpoint> ou <breakpoint>:<state> ; les composants ajoutent variant:<name>.

json

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

Chaque clé se compile en exactement une règle ou un bloc media, et le panneau lit et écrit directement styles[breakpoint].
« Remplacé sur tablette » signifie que la propriété existe dans styles.tablet ; supprimer la clé la réinitialise. Les objets vides sont supprimés.
Les jetons sont des variables CSS : --color-*, --font-*, --space-*.
Les valeurs liées sont stockées à part dans styleBindings et se compilent en variables CSS par élément, définies à l'exécution.

Cascade

Couches de cascade, de la plus faible à la plus forte

@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 priorité ne dépend jamais des hasards de la spécificité : classe → classe combinée → nœud. Les classes combinées se compilent en sélecteurs composés, car CSS ignore l'ordre des noms dans l'attribut class. Les points de rupture partent du bureau (max-width : 991 px pour la tablette, 767 px pour le mobile) et sont émis dans l'ordre à l'intérieur de chaque couche.

html

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

Dans l'éditeur

Chaque cadre du canevas reçoit ses propres couches de styles ; modifier un nœud ne recompile que la règle de ce nœud, si bien que déplacer un curseur ne réanalyse jamais le CSS de la page.
Dans l'éditeur, les unités de viewport sont réécrites en calc(n * var(--malla-vh)), pour que les cadres dimensionnés par leur contenu ne grandissent jamais indéfiniment ; le CSS publié conserve les vraies unités.

À la publication

Le CSS partagé (jetons, reset, classes) est compilé une seule fois par instantané, avec des noms basés sur un hachage du contenu ; les classes inutilisées sont supprimées ; le résultat est minifié.