pantoken / flatten-property

flatten-property ​

Beta

@pantoken/plugin-flatten-property — konvertiert @property At-Regeln in einfache Custom-Property Deklarationen.

@property At-Regeln registrieren typisierte CSS-Custom-Properties mit syntax, inherits und initial-value Deskriptoren. Sie verursachen erheblichen Byte-Overhead — ~60 Bytes Boilerplate pro Property — und sind unnötig, wenn das Stylesheet ein in sich geschlossenes Bundle ist, bei dem die Typ Registrierung keinen Laufzeitnutzen bietet. Dieses Plugin ersetzt jeden @property Block durch eine einfache --name: value Deklaration innerhalb eines gewählten Selektors und holt so den gesamten Overhead zurück.

Semantischer Hinweis: Das Entfernen von @property entfernt die CSS-Typregistrierung. Typisierte Übergänge/Animationen, @starting-style und das CSS Typed OM sind darauf angewiesen. Nur auf Bundles anwenden, bei denen diese Semantik nicht benötigt wird.

Beispiel ​

ts
import postcss from "postcss";
import { flattenProperty } from "@pantoken/plugin-flatten-property";
const out = postcss([flattenProperty()]).process(css, { from: undefined }).css;

Schnittstellen ​

Variablen ​