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

変数: mangleCustomProps ​

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

ベータ

mangle-custom-properties PostCSS プラグインを作成します。

宣言の props から 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;

読み込まれた2つのファイル間でマッピングを共有する

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