pantoken / formats/css/src / toCss

Függvény: toCss()

toCss(tokens, options?): string

Béta

CSS kibocsátása egy token IR-hez.

Paraméterek

tokens

readonly Token[]

Az IR (pl. @pantoken/tokens-ből).

options?

ToCssOptions = {}

ToCssOptions.

Visszatérés

string

A CSS karakterlánc.

Példák

Az alapértelmezett stíluslap létrehozása

import { toCss } from "@pantoken/css";
import { tokens } from "@pantoken/tokens";

const stylesheet = toCss(tokens); // declarations under :root

Deklarációk hatókörzése egy osztályra és másik téma létrehozása

import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";

toCss(byTheme("canvas"), { scope: '[class*="instui"]' });

Utófeldolgozás egy plugin css hook-al

import { toCss } from "@pantoken/css";
import { tokens } from "@pantoken/tokens";

toCss(tokens, {
  plugins: [
    {
      name: "focus",
      css: () => ({ append: ":focus-visible { outline: 2px solid var(--instui-focus-color); }" }),
    },
  ],
});