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

Változó: mangleCustomProps

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

Béta

A mangle-custom-properties PostCSS bővítmény létrehozása.

Összegyűjti az összes prefix mintára illeszkedő egyéni tulajdonságnevet a deklarációk tulajdonságaiból, var() hivatkozásokból és @property paraméterekből. ABC-sorrendbe rendezi őket a stabil, determinisztikus leképezés érdekében, majd rövid neveket rendel hozzájuk a kiválasztott method használatával. Kicseréli az összes előfordulást a stíluslap egészében.

Type Declaration

Paraméterek

options?

MangleCustomPropsOptions

MangleCustomPropsOptions.

Visszatérés

Plugin

Egy PostCSS Plugin.

postcss

postcss: true

Kötelező PostCSS plugin jelölő.

Példák

Mangle alapértelmezett beállításokkal (--instui-*, base26)

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

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

A leképezés megosztása két együtt betöltött fájl között

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 nevek használata és a leképezés kiadása a result.messages használatával

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