样式表示例
样式表的可用示例与编写接口。
CSS 指令会改变输出的样式表时，请使用 StylesheetExample。服务器会用当前 preset 编译字面值源代码，并显示完整结果，包括必要变量与 keyframes。这组呈现方式复用 DocumentCodeExample，提供键盘复制、可见焦点和剪贴板反馈，不会在页面上执行视觉效果。
原生规则使用的 token
@theme { --color-brand: #4f46e5;}.card { background-color: var(--color-brand);}生成的 CSS
.card { background-color: var(--color-brand);}@layer theme { :root, :host { --color-brand: #4f46e5 }}加入安全列表的 token
@theme { --color-brand: #4f46e5;}@safelist "bg-brand";生成的 CSS
@layer theme { :root, :host { --color-brand: #4f46e5 }}@layer utilities { .bg-brand { background-color: var(--color-brand) }}没有匹配 class 的资源
@layer theme { :root, :host { --color-brand: #4f46e5; }}@keyframes fade-in { to { opacity: 1; }}生成的 CSS
@layer theme { :root, :host { --color-brand: #4f46e5; }}@keyframes fade-in { to { opacity: 1; }}- selector
主题声明中的显式原生选择器。
<StylesheetExample title="A safelisted color token" source={"@theme { --color-brand: #4f46e5; }\n\n@safelist \"bg-brand\";"}/>组件接受标题与独立的 CSS 源代码。导入、引用或资源需要多个文件时，请使用有 fixture 支持的示例。编译器应保留在服务器端，可移植 Markdown 要保留每一行源代码与结果，并允许代码在自己的区块内滚动。构建错误必须在文档检查中明确呈现。
上方的 token、safelist 和原生资源示例共用同一种呈现方式。DocumentOptions 的说明也接受行内代码与链接，名称与可选的默认值仍分开呈现。两种组件都应放在测量用示例布局之外。