Skip to content

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

Variable: mangleCustomProps

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

Behta

Gulahat mangle-custom-properties PostCSS-plugin.

Gávdná buot custom-property-namme maid bargga leat prefix deklarasuvnna props-ista, var() referanssa-barguist, ja @property parametrrain. Ráhkisttas dát alfabetalaččat stabiilja, deterministalaš mapping-juvvon, de dássá doppe dássásuvvot láhttit nammat áigge method. Veahkehaččat buot dálkkádusat čujuhusa sijás.

Type Declaration

Parametera

options?

MangleCustomPropsOptions

MangleCustomPropsOptions.

Gullii / Gávdnat

Plugin

PostCSS Plugin.

postcss

postcss: true

Dárbbuheapmi PostCSS-plugga-márgga.

Exempla

Mangle čađa doalvuođaid (--instui-*, base26)

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

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

Divvut mapping nuppi fállat fállin bargguid jagi buohkat

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

Gulahat base36-nammid ja váldde mapping result.messages-issa

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