@atomico/postcss-tokens

Allows importing tokens as json files to be embedded in CSS as customProperties.

Usage

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

Syntax

@tokens "./tokens.json" (prefix: my-dsprefix);

Options

Prefix

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

Default

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

Use

allows to filter the tokens to use

@tokens "./tokens.json" (use: "size|font|color.primary");