SuperAPI AI 工具集

tailwind-token-consolidation

前端与建站

查看项目

更新于 10-16 01:16

技能介绍

用途:在 Tailwind v4 的 globals.css 中减少设计令牌数量,同时保持视觉保真度。适用于合并、去重或精简 CSS 自定义属性与设计令牌的任务。

主要能力与流程:要求先审计再编辑。将 globals.css 解析为结构化块(@theme inline、:root、.dark 及其他作用域块),统计令牌数量,并扫描所有 .ts/.tsx/.css/.mdx 文件(排除 globals.css)中的类名与 var(--...) 引用,构建使用映射。通过传递闭包计算活跃令牌集合:后缀作为 Tailwind 类出现、被 var(--name) 引用、或被其他活跃令牌值引用,迭代至不动点。同时扫描 globals.css 自身工具类中的 var(--...) 硬依赖。构建确定性的重命名映射(old_suffix -> new_suffix 或 DELETE),用脚本一次性应用到 globals.css 与代码,不手工改类名。

两个缩减手段:一是删除零使用且无内部依赖的死令牌;二是合并明暗两种模式下数值相近(约 5% 内)的令牌。明确反对把令牌内联为 Tailwind 任意值(如 px-[17px]),认为这只是把噪音换个文件。

使用方式:每次重命名映射变更后运行验证循环:git checkout -- apps/web、python3 /tmp/transform.py、pnpm typecheck && pnpm lint && pnpm format && pnpm --filter web build。全部通过才算完成。最终用 rg 统计令牌数并报告前后数量与缩减百分比。

限制与注意事项:资料列出八类常见缺陷,包括值优先级、作用域覆盖、globals 内部消费者、类别交叉污染、图标颜色过度合并、条件透明表面、bg-X 颜色/图片冲突、常暗表面等,并给出对应处理原则。资料强调不要手工编辑生成产物,应修改脚本;若用户要求更高缩减比例,应如实说明仅靠命名令牌通常为 50–60%。