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

متغیر: mangleCustomProps ​

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

بتا

ایجاد پلاگین PostCSS با نام mangle-custom-properties.

همهٔ نام‌های پراپرتی سفارشی که با prefix تطابق دارند را از declaration props، ارجاعات var() و پارامترهای @property جمع‌آوری می‌کند. آن‌ها را به‌صورت الفبایی مرتب می‌کند تا نگاشتی پایدار و قطعی به‌دست آید، سپس با استفاده از method انتخاب‌شده نام‌های کوتاه تخصیص می‌دهد. هر وقوع را در سراسر stylesheet جایگزین می‌کند.

Type Declaration ​

پارامترها ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

مقدار بازگشتی ​

Plugin

یک پلاگین برای PostCSS.

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