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

Biến: mangleCustomProps ​

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

Beta

Tạo plugin PostCSS mangle-custom-properties.

Thu thập tất cả tên thuộc tính tuỳ chỉnh khớp với prefix từ props khai báo, var() tham chiếu, và tham số @property. Sắp xếp chúng theo thứ tự chữ cái để có ánh xạ ổn định, xác định, sau đó gán tên ngắn bằng cách sử dụng method đã chọn. Thay thế mọi xuất hiện khắp stylesheet.

Type Declaration ​

Tham số ​

options? ​

MangleCustomPropsOptions

MangleCustomPropsOptions.

Trả về ​

Plugin

Một Plugin cho PostCSS.

postcss ​

postcss: true

Ký hiệu bắt buộc của plugin PostCSS.

Các ví dụ ​

Xáo tên với mặc định (--instui-\*, base26)

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

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

Chia sẻ ánh xạ giữa hai tệp được nạp cùng nhau

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

Sử dụng tên base36 và xuất ánh xạ qua 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");