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

变量: mangleCustomProps ​

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

Beta

创建 mangle-custom-properties PostCSS 插件。

从声明属性匹配 prefix、var() 引用和 @property 参数中收集所有自定义属性名。 按字母顺序排序以获得稳定且确定性的映射，然后使用所选的 method 分配短名称。替换样式表中出现的每一个实例。

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