Skip to content

pantoken / flatten-property

flatten-property

Beta

@pantoken/plugin-flatten-property — convertire le at-rule @property in semplici dichiarazioni di custom-property dichiarazioni.

@property at-rule registrano proprietà CSS personalizzate tipizzate con i descrittori syntax, inherits e initial-value. Portano con sé un overhead di byte significativo — ~60 byte di boilerplate per proprietà — e sono inutili quando il foglio di stile è un bundle autocontenuto in cui la registrazione del tipo non fornisce benefici a runtime. Questo plugin sostituisce ogni blocco @property con una semplice dichiarazione --name: value all'interno di un selettore scelto, recuperando tutto quell'overhead.

Nota semantica: rimuovere @property comporta la perdita della registrazione dei tipi CSS. Transizioni/animazioni tipizzate, @starting-style e la CSS Typed OM dipendono da essa. Applicare solo ai bundle in cui tali semantiche non sono necessarie.

Esempio

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

Interfacce

Variabili