本技能用于在 @wordpress/components 中规划或实施从 Emotion 到 SCSS Modules 的样式迁移。
使用方式
在 Gutenberg 检出目录中,从对应修订版本读取相关链接;若不在检出目录中,则从 GitHub 上 Gutenberg 的 .agents/skills/emotion-to-scss-modules/ 解析这些链接。编辑前应先阅读迁移指南以及该包的样式约定。
保持行为与消费者覆盖
确认目标组件与基线。搜索其包装组件的消费者、样式片段和公开类,包括 packages/components 之外的消费者。使用指南中的契约审计,选取受影响的状态与组合进行对比。
记录这些用例的基线。对于报告的回归问题,应首先复现。应用翻译规则,区分静态值、条件值和真正的动态值。保留包装组件所在的元素、props 和 ref 行为。
检查移除包装组件后哪些声明胜出。遵循指南中针对消费者覆盖和剩余 Emotion 组合的层叠检查。用实际冲突的声明来说明特异性变更的合理性。
将有意为之的 API、交互或视觉变更控制在约定范围内。仅在能够回答某个迁移问题时才参考已合并的示例;旧的例外并非本组件的规则。
验证迁移
复用现有测试与 story。保持行为的迁移可能不需要新增测试。仅针对迁移引入且尚未覆盖的风险添加聚焦测试;不要重复共享辅助工具或依赖套件。遵循指南中的验证方案以及测试总览。
对比受影响状态与消费者的实际样式,在相关时包括 RTL 或另一文档。类断言和模拟样式无法证明层叠或视觉一致性。在后续选择器变更或 rebase 导致相关样式变化后,应重新检查受影响的消费者。
遵循完成检查,包括范围清理、受影响的下游快照、生成文件、必需的检查项以及迁移变更日志。对于任何未验证的样式用例,报告时可复现的手动步骤。