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

Variable: mangleCustomProps ​

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

Bêta

Créer le plugin PostCSS mangle-custom-properties.

Collecte tous les noms de propriétés personnalisées correspondant à prefix à partir des props de déclaration, des références var(), et des paramètres @property. Les trie par ordre alphabétique pour une correspondance stable et déterministe, puis attribue des noms courts en utilisant le method choisi. Remplace chaque occurrence dans l'ensemble de la feuille de style.

Type Declaration ​

Paramètres ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

Renvoie ​

Plugin

Un Plugin PostCSS.

postcss ​

postcss: true

Marqueur requis pour le plugin PostCSS.

Exemples ​

Obfusquer avec les valeurs par défaut (--instui-\*, base26)

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

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

Partager la correspondance entre deux fichiers chargés ensemble

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

Utiliser des noms en base36 et émettre la correspondance via 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");