Skip to content

pantoken / mangle-custom-props

mangle-custom-props

ベータ

@pantoken/plugin-mangle-custom-props — 長いカスタムプロパティ名を最小の連番識別子にリネームします。 identifiers.

--instui-component-alert-border-top-style のようなトークン名は人間には読みやすいですが、最小化されたバンドルではコストがかかります:名前自体が40バイト以上になり、定義内、各 var() 呼び出し、そして各 @property 登録で繰り返されます。このプラグインは、定義、var() 参照、および @property パラメータを含む一致するすべての名前を、最小の識別子(--a, --b, …, --aa, …)に置き換え、名前のオーバーヘッドを約90%削減します。

名前はスタイルシート全体から収集され、決定論的なマッピングのためにアルファベット順にソートされてから順番に割り当てられます。MangleCustomPropsOptions.sharedManifest オプションを使うと、複数の別個の PostCSS パスで同じマッピングを共有できるため、一緒に読み込まれる別々に処理された CSS ファイルも同じ名前で安全にマングリングできます。

ts
import postcss from "postcss";
import { mangleCustomProps } from "@pantoken/plugin-mangle-custom-props";
const out = postcss([mangleCustomProps()]).process(css, { from: undefined }).css;

インターフェース

型エイリアス

変数