SuperAPI AI 工具集

css-token-use-validator

前端与建站

查看项目

更新于 10-16 08:45

技能介绍

用途:校验 CSS 自定义属性(CSS 变量)是否在 token 文件中正确定义,并找出未使用或疑似拼错的 token,适用于组件库、设计系统与 token 化样式迁移项目。

主要能力:检测未定义属性(var() 引用但无定义);区分组件内局部定义(component-scoped,属正常模式);结合类别与相似度给出上下文相关建议;统计未使用 token;输出覆盖率报告;支持单文件、目录或整个项目范围。

使用方式:通过配套工具 scripts/validator.js 运行,参数包括 --tokens(必填,token 定义文件路径或 glob)、--css(必填,待校验 CSS)、--format(json/summary/detailed,默认 json)、--threshold(拼写相似度阈值,默认 0.7)、--ignore(忽略的属性列表)。示例:--tokens "src/tokens/.css" --css "src/components/**/.css";忽略浏览器默认属性:--ignore "scrollbar-color,scrollbar-width"。当存在未定义属性时返回退出码 1,可用于 CI/CD。

结果解读:undefined 为真实错误;componentScoped 为信息性内容,不算错误,不计入 token 覆盖率;unused 为已定义未引用;stats 提供 totalTokens、tokensUsed、totalUndefined、totalUnused、tokenCoverage 等指标。建议:高相似度(>0.85)可提示拼写修正,语义类选择应列出同类别 token 交由用户决定,不自动替换;应用修改前先展示差异并征得确认。

实现要点:使用正则解析 CSS,支持嵌套 var(),以 Levenshtein 距离做拼写检测,按名称前缀识别 color、spacing 等类别。

限制:不分析 JavaScript 中对 CSS 变量的使用(如 getComputedStyle),只校验存在性不校验取值,无法识别动态生成的属性名,不跟随 @import,glob 需正确加引号。

分类:其他 AI 工具(other-ai-tools),因该技能为面向 CSS/设计 token 的开发者辅助工具,未明确适配已有分类。