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

Zmienna: mangleCustomProps ​

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

Beta

Utwórz wtyczkę PostCSS mangle-custom-properties.

Zbiera wszystkie nazwy zmiennych niestandardowych pasujące do prefix z właściwości deklaracji, var() odwołań, i parametrów @property. Sortuje je alfabetycznie dla stabilnego, deterministycznego mapowania, następnie przypisuje krótkie nazwy używając wybranego method. Zastępuje każde wystąpienie w całym arkuszu stylów.

Type Declaration ​

Parametry ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

Zwraca ​

Plugin

PostCSS wtyczka.

postcss ​

postcss: true

Wymagany znacznik wtyczki PostCSS.

Przykłady ​

Mangle z domyślnymi ustawieniami (--instui-*, base26)

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

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

Udostępnij mapowanie między dwoma plikami ładowanymi razem

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

Użyj nazw base36 i wyemituj mapowanie przez result.messages

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