Example with @atomico/vite

With @atomico/vite you can use @atomico/postcss-tokens in your cssLiterals with the following configuration:

  1. Enable the use of postcss for cssLiterals in the vite.config.js file

atomico({
    cssLiterals: { postcss: true }
});

2. Add @atomico/postcss-tokensto your postcss config, example:

"postcss": {
        "plugins": {
            "@atomico/postcss-tokens": {
                "prefix": "a"
            }
        }
}

3. ready to use

export const GenericTokens = css`
    @tokens "./tokens.yaml" (import: generic);
`

Last updated