pantoken-root / formats/css/src / toCss

Функция: toCss() ​

toCss(tokens, options?): string

Бета

Генерировать CSS для IR токенов.

Параметры ​

tokens ​

только для чтения Token[]

IR (например, из @pantoken/tokens).

options? ​

ToCssOptions = {}

ToCssOptions.

Возвращаемое значение ​

string

Строка CSS.

Примеры ​

Собрать стандартную таблицу стилей

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

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

Привязать декларации к классу и собрать другую тему

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

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

Выполнить постобработку с помощью CSS-хука плагина

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