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

वैरिएबल: mangleCustomProps ​

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

बीटा

mangle-custom-properties PostCSS प्लगइन बनाएं.

घोषणा props से prefix से मेल खाने वाले सभी कस्टम प्रॉपर्टी नाम एकत्र करता है, var() संदर्भों, और @property पैरामीटरों से। स्थिर, निर्धारक मैपिंग के लिए उन्हें वर्णानुक्रम में क्रमबद्ध करता है, फिर चुने हुए method का उपयोग करके संक्षिप्त नाम आवंटित करता है। स्टाइलशीट भर में हर स्थान को बदल देता है।

Type Declaration ​

पैरामीटर ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

वापसी ​

Plugin

एक PostCSS Plugin।

postcss ​

postcss: true

आवश्यक 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");