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

Variabele: mangleCustomProps ​

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

Bèta

Maak de mangle-custom-properties PostCSS-plugin.

Verzamelt alle custom property-namen die overeenkomen met prefix uit declaratie-eigenschappen, var() referenties, en @property parameters. Sorteert ze alfabetisch voor een stabiele, deterministische mapping, en kent vervolgens korte namen toe met behulp van de gekozen method. Vervangt elke instantie in het hele stylesheet.

Type Declaration ​

Parameters ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

Retourneert ​

Plugin

Een PostCSS plugin.

postcss ​

postcss: true

Vereist marker voor PostCSS-plugin.

Voorbeelden ​

Mangle met standaardwaarden (--instui-\*, base26)

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

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

De mapping delen tussen twee samen geladen bestanden

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

Gebruik base36-namen en geef de mapping via result.messages door

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