eslint-plugin-unicorn 的 no-duplicate-css-selectors 规则检测并修复重复 CSS 选择器【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn本篇技术指南围绕 eslint-plugin-unicorn 中面向 CSS 语言的核心规则no-duplicate-css-selectors展开讲解它如何发现样式表中的重复选择器与重复选择器列表、其上下文比较机制at-rule、嵌套、层叠上下文、自动修复能力以及与css/no-duplicate-keyframe-selectors的分工。读完本文你将掌握该规则的完整配置方式、检测边界与修复行为并能从源码与测试层面理解其实现原理直接应用于自己的 CSS 工程。规则概览与启用状态no-duplicate-css-selectors用于禁止重复的 CSS 选择器其官方说明见 docs/rules/no-duplicate-css-selectors.md。该规则的几个关键属性如下属性值规则类型meta.typeproblem是否可自动修复是fixable: code配合--fix使用是否带配置选项否schema: []适用语言CSSmeta.languages: [css/css]在recommended配置中关闭在unopinionated配置中关闭从源码 rules/no-duplicate-css-selectors.js 可以看到规则的meta.docs.recommended为false因此它不会随官方推荐配置自动开启需要在项目配置中按需显式启用。同时meta.languages声明为css/css说明这是一条非 JavaScript 语言规则必须与 ESLint 的 CSS 语言插件配合使用。为什么需要检测重复选择器样式表中的重复选择器块其来源通常是合并merge冲突多人协作或分支合并时同一段样式被同时添加复制粘贴从其他文件复制规则块后忘记删除原文不完整的重构拆分或抽取组件时旧选择器未被清理。重复选择器的危害不止于代码冗余它们会把本应集中在一起的声明拆分到样式表的不同位置而 CSS 的层叠规则决定了后出现的声明会意外覆盖先出现的声明在优先级相同时。例如下面这段代码中.card被声明了两次color: blue会覆盖前面的color: red/* ❌ 违反规则 */ .card { color: red; } .card { color: blue; }这类幽灵覆盖极难排查因为两处声明看似独立、都合法实际却在运行时互相打架。该规则的价值正是把这种隐患在 lint 阶段直接暴露出来。规则检测的两种重复模式该规则并非只做简单的同名选择器去重而是区分两种重复场景并给出不同的报错信息对应源码中的两个messageId见 rules/no-duplicate-css-selectors.jsmessageId报错文案触发场景duplicate-selectorThis selector duplicates the selector on line {{line}}.同一选择器列表内存在重复的单个选择器duplicate-selector-listThis selector list duplicates the selector list on line {{line}}.同一上下文at-rule / 嵌套 / 层叠上下文中出现重复的完整选择器列表模式一选择器列表内的重复选择器同一个选择器列表中一个选择器被写了两次/* ❌ 违反规则 */ .button, .button { padding: 8px; }报错信息会提示与首次出现位置的行号便于定位。模式二跨规则块的重复选择器列表分别位于两个规则块中的完全相同的选择器列表会被视为重复/* ❌ 违反规则 */ .card { color: red; } .card { color: blue; }这里的判定不是选择器名字符串相等而是比较序列化后的完整选择器列表源码中使用eslint/css-tree的generate()对rule.prelude进行规范化输出见 rules/no-duplicate-css-selectors.js。因此选择器内部的无关紧要空白差异会被忽略——下面两种写法会被判定为重复/* ❌ 违反规则 */ media (width 10px) { .card { color: red; } } media(width10px) { .card { color: blue; } }从测试用例 test/no-duplicate-css-selectors.js 可以看到media (width 10px)与media(width10px)是 invalid 用例证实了空白不敏感的比较行为。同理a b与a/* comment */b也会被判定为重复test/no-duplicate-css-selectors.js印证文档所述比较时忽略无关紧要的选择器空白和注释。上下文比较机制只在同一环境下判定重复这是本规则最核心的设计重复判定是上下文敏感的。两个规则块必须处于相同的 at-rule 与嵌套上下文中才会互相构成重复。匹配的条件上下文会被比较即使两个条件块是分开书写的只要条件相同其中的选择器仍会被互相比较/* ❌ 违反规则两个 media 条件一致.card 重复 */ media (width 40rem) { .card { color: red; } } media (width 40rem) { .card { color: blue; } }这里规则会把media (width 40rem)作为上下文键的一部分两个块共享同一上下文因此内部的.card被判定为重复。不同的上下文则被允许只要条件不同重复就不成立/* ✅ 符合规则断点条件不同属于不同上下文 */ media (width 40rem) { .card { color: red; } } media (width 60rem) { .card { color: blue; } }类似的比较也适用于其他 at-rule。测试用例覆盖了supports、container、scope以及命名layer的同类场景——例如supports (display: grid)与supports(display:grid)是 invalid而不同条件之间是 valid见 test/no-duplicate-css-selectors.js。嵌套上下文同样参与判定CSS 嵌套nesting形成的层级也是上下文的一部分。同一个父选择器下的重复嵌套子规则会被报告/* ❌ 违反规则 */ .component { .title { color: red; } } .component { .title { color: blue; } }而不同父容器下的同名子选择器是合法的/* ✅ 符合规则 */ .parent { .child { color: red; } } .other-parent { .child { color: blue; } }上述用例分别出现在 test/no-duplicate-css-selectors.js 与 test/no-duplicate-css-selectors.js。匿名 layer 的特殊处理匿名layer即不带名称的layer { ... }在源码中会被特殊处理getContextPart对无 prelude 的layer返回[anonymous-layer, 起始位置]用源码位置作为上下文标识rules/no-duplicate-css-selectors.js。因此不同位置的两个匿名 layer 中的同名选择器不会互相构成重复/* ✅ 符合规则两个匿名 layer 被视为不同上下文 */ layer { .card { color: red; } } layer { .card { color: blue; } }而命名layer如layer components因为名称相同会被视为同一上下文其中的重复选择器会被报告见 test/no-duplicate-css-selectors.js。不会被报告的情况规则的边界规则明确不报告以下几类看似相似但并非重复的选择器保证误报率可控1. 部分重叠的选择器列表/* ✅ 符合规则 */ .card, .featured {} .card {}它比较的是完整的选择器列表按原始顺序不会把[.card, .featured]与[.card]视为重复。2. 重排后的选择器列表/* ✅ 符合规则 */ .card, .featured {} .featured, .card {}列表顺序不同即视为不同列表[.card, .featured]与[.featured, .card]不会被互相判定为重复。3. 仅在选择器解析后才等价的情况嵌套/* ✅ 符合规则 */ .parent .child {} .parent { .child {} }generate()比较的是语法层面的原始选择器不会在解析 CSS 嵌套语义即把 .child展开为.parent .child之后再进行比较。因此.parent .child与嵌套写法 .child不会被判定为重复。4. 大小写不同、转义形式不同从测试用例可见.Card与.card是 validtest/no-duplicate-css-selectors.js.u-m\2b与.u-m\00002b也是 validtest/no-duplicate-css-selectors.js——即比较对大小写敏感且不同转义写法视为不同选择器。5. 关键帧keyframes选择器keyframes内部的from/to/ 百分比选择器会被整体跳过见下文专门说明。关键帧选择器交给专属规则处理规则对关键帧做了明确的职责划分。源码中通过正则keyframesNamePattern /^(?:-(?:o|moz|webkit)-)?keyframes$/iu识别keyframes及其带浏览器前缀的变体-o-keyframes、-moz-keyframes、-webkit-keyframes一旦某个 at-rule 匹配该模式getContextKey会直接返回undefined整个子树被跳过rules/no-duplicate-css-selectors.js。因此下面的代码不会触发本规则/* ✅ 本规则不检查 keyframes */ keyframes fade { from { opacity: 0; } from { opacity: 1; } }对应测试用例见 test/no-duplicate-css-selectors.js。文档明确建议关键帧选择器应交给css/no-duplicate-keyframe-selectors检查形成两条规则各司其职的组合方案。配置方法在 flat config 中启用由于该规则面向 CSS 语言需要与eslint/css中关于非 JavaScript 语言规则的配置指引完整示例如下import css from eslint/css; import unicorn from eslint-plugin-unicorn; import {defineConfig} from eslint/config; export default defineConfig([ { files: [**/*.js], plugins: { unicorn, }, extends: [ unicorn/recommended, ], }, { files: [**/*.css], plugins: { css, unicorn, }, language: css/css, rules: { unicorn/no-duplicate-css-selectors: error, }, }, ]);要点必须用files限定 CSS 文件并将 Unicorn 的 JavaScript 规则与 CSS 规则分置于不同配置对象避免把 JS 规则错误作用到 CSS 文件上language: css/css指定使用eslint/css语言插件该规则没有配置选项schema: []直接开启error或warn即可无需也不支持传参规则已注册在插件入口 rules/index.js 中启用后即可直接以unicorn/no-duplicate-css-selectors引用。自动修复与修复边界该规则支持--fix自动修复meta.fixable: code这是它的一大实用特性。修复逻辑在源码 rules/no-duplicate-css-selectors.js 中对于同一选择器列表内的重复选择器规则会计算并移除重复项保留首次出现项修复是保守的只有当重复选择器与前一选择器之间的分隔符是纯空白逗号匹配/^\s*,\s*$/u且该区间内不存在注释时才会生成移除修复getDuplicateSelectorRemovalRange返回undefined表示不修复修复通过重写整个rule.prelude选择器列表完成按从后往前的顺序逐个剪掉重复区间避免位置偏移问题。测试用例 test/no-duplicate-css-selectors.js 给出了修复的精确输出// 输入a, b, a, b { color: red; } → 输出a, b { color: red; }报 2 个错误 // 输入a /* keep */, b, a { color: red; } → 输出a /* keep */, b { color: red; }报 1 个错误 // 输入a, /* keep */ a, b, b { color: red; } → 输出a, /* keep */ a, b { color: red; }报 2 个错误可以看到凡是重复选择器紧邻注释的场景修复会保留注释所在的选择器项绝不贸然删除可能承载信息的代码。而跨规则块的重复选择器列表模式二只报告、不修复——因为删除哪个块属于无法自动决策的重构问题需要人工判断。源码实现剖析规则实现位于 rules/no-duplicate-css-selectors.js核心是create函数第 91-154 行整体流程如下监听Rule节点对每个规则先确认其prelude是SelectorList类型第 96-98 行计算上下文键getContextKey沿父节点链向上遍历收集所有Atrule与Rule节点用getContextPart生成各自的上下文片段at-rule 记录名称与 prelude、普通规则记录 prelude、匿名 layer 记录位置最终以 JSON 字符串作为上下文键第 54-86 行。这正是相同 at-rule 嵌套上下文才判定重复的机制来源检测列表内重复对当前SelectorList的每个子选择器用generate()序列化后存入seenSelectorsMap命中即为列表内重复第 109-133 行检测跨块重复列表以上下文键 → 选择器列表键的两级 Map 记录历史selectorListsByContext按上下文隔离记录同一上下文内出现相同generate(rule.prelude)即报告duplicate-selector-list第 135-152 行。值得注意的两点实现细节报告信息带行号报错数据中的line取自首次出现节点firstSelector/firstSelectorList的起始行方便快速定位原件上下文键使用序列化字符串at-rule 的条件部分prelude也经过generate()规范化因此media (width 10px)与media(width10px)会产生相同上下文键——这也解释了测试中这类用例被判为重复的原因。测试覆盖情况规则的测试文件为 test/no-duplicate-css-selectors.js通过getTester与 CSS 语言配置languages.css见 test/utils/languages.js运行并配合快照test/snapshots/no-duplicate-css-selectors.js.md与显式修复断言。覆盖维度包括不同选择器、部分重叠、重排列表均为valid大小写不同、转义形式不同的选择器为valid不同断点 / 不同父容器 / 匿名 layer / keyframes 内重复为valid同断点不同空白写法、同层命名 layer、同父嵌套子规则重复为invalid修复输出与错误数量的精确断言。快照中还可见该规则的报错形态例如.card { color: red; } .other { color: green; } .card { color: blue; }会报告This selector list duplicates the selector list on line 1.与源码中的消息模板一一对应。总结no-duplicate-css-selectors是 eslint-plugin-unicorn 面向 CSS 工程的重要质量规则它以上下文敏感的方式精准识别两种重复——选择器列表内的重复单项以及同一 at-rule / 嵌套 / 层叠上下文中的重复选择器列表同时刻意忽略空白与注释差异、跳过 keyframes、宽容不同上下文与不同列表顺序从而在查错与误报之间取得平衡。结合--fix的保守自动修复、eslint/css语言插件的配置范式以及关键帧场景下与css/no-duplicate-keyframe-selectors的职责分工它是一套可直接落地的 CSS 去重检测方案。【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考