pantoken / formats/css/src / toCss

函式: toCss()

toCss(tokens, options?): string

Beta（測試）

為 token IR 輸出 CSS。

參數

tokens

唯讀 Token[]

IR（例如來自 @pantoken/tokens）。

options?

ToCssOptions = {}

ToCssOptions.

回傳

string

CSS 字串。

範例

建立預設樣式表

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

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

將宣告限定於一個 class 並建立另一個主題

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

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

使用插件的 css hook 進行後處理

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