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

ตัวแปร: mangleCustomProps ​

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

เบต้า

สร้างปลั๊กอิน PostCSS ชื่อ mangle-custom-properties.

รวบรวมชื่อ custom property ทั้งหมดที่ตรงกับ prefix จาก declaration props, การอ้างอิง var(), และพารามิเตอร์ @property. จัดเรียงตามลำดับตัวอักษรเพื่อสร้างการแมปที่เสถียรและกำหนดได้ จากนั้น มอบชื่อสั้นโดยใช้ method ที่เลือกไว้ แทนที่ทุกการเกิดขึ้นตลอด stylesheet.

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