pantoken / formats/css/src / toCss

ฟังก์ชัน: toCss() ​

toCss(tokens, options?): string

เบต้า

สร้าง CSS สำหรับ token 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"]' });

ประมวลผลหลังด้วย hook ของปลั๊กอิน 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); }" }),
    },
  ],
});