pantoken / mangle-custom-props
mangle-custom-props
Beta
@pantoken/plugin-mangle-custom-props — rename long custom property names to minimal sequential identifiers.
Token names like --instui-component-alert-border-top-style are human-readable but expensive in minified bundles: the name itself is 40+ bytes, repeated in the definition, every var() call, and every @property registration. This plugin replaces every matching name — across definitions, var() references, and @property params — with a minimal identifier (--a, --b, …, --aa, …), cutting name overhead by ~90%.
Names are collected from the full stylesheet, sorted alphabetically for a deterministic mapping, then assigned sequentially. A MangleCustomPropsOptions.sharedManifest option lets multiple separate PostCSS passes share one consistent mapping, so separately processed CSS files that will be loaded together can safely be mangled with the same names.
Example
import postcss from "postcss";
import { mangleCustomProps } from "@pantoken/plugin-mangle-custom-props";
const out = postcss([mangleCustomProps()]).process(css, { from: undefined }).css;