Skip to content

pantoken-root / plugins/postcss/props-minify/src / mangleCustomProps

Μεταβλητή: mangleCustomProps ​

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

Βήτα

Δημιούργησε το plugin PostCSS mangle-custom-properties.

Συλλέγει όλα τα ονόματα προσαρμοσμένων ιδιοτήτων που ταιριάζουν με prefix από declaration props, αναφορές var(), και παραμέτρους @property. Τα ταξινομεί αλφαβητικά για έναν σταθερό, ντετερμινιστικό χάρτη, στη συνέχεια αναθέτει σύντομα ονόματα χρησιμοποιώντας το επιλεγμένο method. Αντικαθιστά κάθε εμφάνιση σε ολόκληρο το stylesheet.

Type Declaration ​

Παράμετροι ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

Επιστρέφει ​

Plugin

Ένα PostCSS Πρόσθετο.

postcss ​

postcss: true

Απαιτούμενος δείκτης plugin PostCSS.

Παραδείγματα ​

Συντόμευση με προεπιλογές (--instui-\*, base26)

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

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

Κοινή χρήση του χάρτη μεταξύ δύο αρχείων που φορτώνονται μαζί

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

Χρήση ονομάτων base36 και εξαγωγή του χάρτη μέσω 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");