pantoken / plugins/postcss/props-minify/src / mangleCustomProps

Variable: mangleCustomProps

const mangleCustomProps: {(options?): Plugin; postcss: true; }

Beta

Create the mangle-custom-properties PostCSS plugin.

Collects all custom property names matching prefix from declaration props, var() references, and @property params. Sorts them alphabetically for a stable, deterministic mapping, then assigns short names using the chosen method. Replaces every occurrence throughout the stylesheet.

Type Declaration

Parameters

options?

MangleCustomPropsOptions

MangleCustomPropsOptions.

Returns

Plugin

A PostCSS Plugin.

postcss

postcss: true

Required PostCSS plugin marker.

Examples

Mangle with defaults (--instui-*, base26)

import postcss from "postcss";
import { mangleCustomProps } from "@pantoken/plugin-mangle-custom-props";

const out = postcss([mangleCustomProps()]).process(css, { from: undefined }).css;

Share the mapping across two files loaded together

import postcss from "postcss";
import { mangleCustomProps } from "@pantoken/plugin-mangle-custom-props";

const manifest = new Map<string, string>();
const tokenCss = postcss([mangleCustomProps({ sharedManifest: manifest })]).process(tokens, { from: undefined }).css;
const componentCss = postcss([mangleCustomProps({ sharedManifest: manifest })]).process(components, { from: undefined }).css;
// both files use the same --instui-* → --a mapping

Use base36 names and emit the mapping via result.messages

import postcss from "postcss";
import { mangleCustomProps } from "@pantoken/plugin-mangle-custom-props";

const result = postcss([mangleCustomProps({ method: "base36", propertyMap: true })]).process(css, { from: undefined });
const msg = result.messages.find((m) => m.type === "mangle-map");