pantoken-root / 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;

Interfaces

• MangleCustomPropsOptions

Type Aliases

• MangleMethod

Variables

• mangleCustomProps