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.

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

Type Declaration ​

Paramètres ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

Retourne ​

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