Allows importing tokens as json files to be embedded in CSS as customProperties.
import postcss from "postcss";
import tokens from "@atomico/postcss-tokens";
const result = await postcss(tokens()).process(
`@tokens "./tokens.json" ( prefix: "my-dsprefix" );`,
{
from: "./tests/demo.css",
}
);
console.log(result.css);
@tokens "./tokens.json" (prefix: my-dsprefix);
create the custom properties with the assigned prefix
@tokens "./tokens.json" (prefix: my-dsprefix);
prefix can be defined globally when instantiating the plugin, example:
postcss(tokens({ prefix: "my-ds" }));
IF croot is equal to :host
, a default value will be defined for each custom properties depending on the token
@tokens "./tokens.json" (prefix: my-dsprefix);
allows to filter the tokens to use
@tokens "./tokens.json" (use: "size|font|color.primary");