Skip to content

pantoken / mangle-custom-props

mangle-custom-props

Bêta

@pantoken/plugin-mangle-custom-props — renommer les longs noms de propriétés personnalisées en identifiants séquentiels minimaux.

Les noms de tokens comme --instui-component-alert-border-top-style sont lisibles par les humains mais coûteux dans les bundles minifiés : le nom lui‑même fait 40+ octets, répété dans la définition, à chaque appel var(), et à chaque enregistrement @property. Ce plugin remplace chaque nom correspondant — dans les définitions, les références var() et les paramètres @property — par un identifiant minimal (--a, --b, …, --aa, …), réduisant ainsi le surcoût des noms d’environ 90 %.

Les noms sont collectés depuis la feuille de style complète, triés alphabétiquement pour obtenir un mappage déterministe, puis attribués séquentiellement. L’option MangleCustomPropsOptions.sharedManifest permet à plusieurs passes PostCSS séparées de partager un mappage cohérent, de sorte que des fichiers CSS traités séparément qui seront chargés ensemble peuvent être manglés en toute sécurité avec les mêmes noms.

Exemple

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

Interfaces

Alias de type

Variables