pantoken / formats/css/src / toCss

함수: toCss() ​

toCss(tokens, options?): string

베타

토큰 IR에 대한 CSS를 생성합니다.

매개변수 ​

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