Skip to content

pantoken / mangle-custom-props

mangle-custom-props

Beta

@pantoken/plugin-mangle-custom-props — rinominare i nomi lunghi delle proprietà personalizzate in identificatori sequenziali minimi.

I nomi dei token come --instui-component-alert-border-top-style sono leggibili dall'umano ma costosi nei bundle minimizzati: il nome stesso è di 40+ byte, ripetuto nella definizione, in ogni chiamata var(), e in ogni registrazione @property. Questo plugin sostituisce ogni nome corrispondente — attraverso definizioni, riferimenti var() e parametri @property — con un identificatore minimo (--a, --b, …, --aa, …), riducendo il sovraccarico dei nomi di circa ~90%.

I nomi vengono raccolti dall'intero foglio di stile, ordinati alfabeticamente per una mappatura deterministica, e poi assegnati in modo sequenziale. Un'opzione MangleCustomPropsOptions.sharedManifest permette a più passaggi PostCSS separati di condividere una mappatura coerente, così i file CSS processati separatamente che verranno caricati insieme possono essere manglati in sicurezza con gli stessi nomi.

Esempio

ts
import postcss from "postcss";
import { mangleCustomProps } from "@pantoken/plugin-mangle-custom-props";
const out = postcss([mangleCustomProps()]).process(css, { from: undefined }).css;

Interfacce

Alias di tipo

Variabili