pantoken-root / 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;

함께 로드된 두 파일에서 매핑을 공유

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