SuperAPI AI 工具集

obsidian-arrow-css

前端与建站

查看项目

更新于 10-15 23:48

技能介绍

用途:为 Obsidian 插件中的 Arrow.js 组件编写样式,使界面外观贴近原生 Obsidian,并让每条自定义规则都“有存在价值”,即无法被已有类或工具类替代。

主要能力与用法:

  1. 前缀约定:oasbox-* 仅用于沙箱外壳(tools/sandbox/sandbox.css),不复制进插件;oas-* 位于 src/utilities.css,可随组件移植;oas-shell-* 用于视图与组件根的结构外壳。资料特别提醒 oasbox-* 类与 oasbox CLI 不是同一概念,仅共享项目名前缀。
  2. 决策层级:先查运行中沙箱的 /reference/classes 用 Obsidian 语义类(如 .setting-item、button.mod-cta、.checkbox-container、.modal、.callout 等);其次用 oas-* 工具类处理布局、间距、字号、颜色、溢出、边框、徽章、可折叠卡片等;最后才写自定义 CSS,且必须作用域受限。
  3. 令牌优先:自定义 CSS 使用 var(--) 令牌(如 --size-4-2、--radius-m、--text-muted、--interactive-accent),不硬编码颜色、尺寸和字体;令牌表在 /reference 实时解析 app.css 展示。
  4. 作用域与特异性:Obsidian 全局规则特异性为 (0,1,1),因此自定义规则应写成“容器类 + 元素类型”(如 .my-panel button.my-action),避免裸元素选择器泄漏样式。
  5. 覆盖与变量:共享视觉参数(面板宽度、强调色、圆角)应定义为容器上的 CSS 自定义属性,变体通过修饰类重定义变量。
  6. 审核与移植:完成前逐条自查能否被语义类或工具类替代、是否硬编码、是否裸选择器、是否重复;移植时用 pnpm port:css 配合 porting.config.json(含 cssPrefix、viewSubScope、include、outDir)自动加类名前缀。
  7. 保持同步:utilities.css 更新后,已移植插件需通过 parity-check 或 port-parity.json 清单检测偏离。

限制:资料未提供安装方式、收费信息或适用版本;若祖先类未实际挂载,CSS 会静默失效,孤立的 CSS 检查(orphaned-CSS lint)不会发现,需用 pnpm check:scope 或手动 grep 验证。