pantoken-root / plugins/postcss/mangle-custom-props/src / mangleCustomProps

Variable: mangleCustomProps ​

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

Beta

Erstellt das PostCSS-Plugin mangle-custom-properties.

Sammelt alle Custom-Property-Namen, die mit prefix übereinstimmen, aus Deklarations-Props, var()-Verweisen und @property-Parametern. Sortiert sie alphabetisch für eine stabile, deterministische Zuordnung und weist anschließend kurze Namen mit dem gewählten method zu. Ersetzt jedes Vorkommen im gesamten Stylesheet.

Type Declaration ​

Parameter ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

Rückgabe ​

Plugin

Ein PostCSS-Plugin.

postcss ​

postcss: true

Erforderliches PostCSS-Plugin-Kennzeichen.

Beispiele ​

Mangle mit Standardwerten (--instui-\*, base26)

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

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

Mapping über zwei gleichzeitig geladene Dateien teilen

ts
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

Verwende Base36-Namen und gib das Mapping über result.messages aus

ts
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");