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

變數: mangleCustomProps ​

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

Beta（測試）

建立 mangle-custom-properties PostCSS 外掛。

從宣告屬性、var() 參考，和 @property 參數中，收集所有符合 prefix 的自訂屬性名稱。 將它們按字母順序排序以建立穩定且確定性的對應，然後使用所選的 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");