feat: add new rule no-duplicate-keyframe-selectors

.gitignore

@@ -57,3 +57,5 @@ pnpm-lock.yaml
 
 # Build
 dist/
+
+test.css

README.md

@@ -65,17 +65,18 @@ export default defineConfig([
 
 <!-- Rule Table Start -->
 
-| **Rule Name**                                                            | **Description**                        | **Recommended** |
-| :----------------------------------------------------------------------- | :------------------------------------- | :-------------: |
-| [`no-duplicate-imports`](./docs/rules/no-duplicate-imports.md)           | Disallow duplicate @import rules       |       yes       |
-| [`no-empty-blocks`](./docs/rules/no-empty-blocks.md)                     | Disallow empty blocks                  |       yes       |
-| [`no-important`](./docs/rules/no-important.md)                           | Disallow !important flags              |       yes       |
-| [`no-invalid-at-rules`](./docs/rules/no-invalid-at-rules.md)             | Disallow invalid at-rules              |       yes       |
-| [`no-invalid-properties`](./docs/rules/no-invalid-properties.md)         | Disallow invalid properties            |       yes       |
-| [`prefer-logical-properties`](./docs/rules/prefer-logical-properties.md) | Enforce the use of logical properties  |       no        |
-| [`relative-font-units`](./docs/rules/relative-font-units.md)             | Enforce the use of relative font units |       no        |
-| [`use-baseline`](./docs/rules/use-baseline.md)                           | Enforce the use of baseline features   |       yes       |
-| [`use-layers`](./docs/rules/use-layers.md)                               | Require use of layers                  |       no        |
+| **Rule Name**                                                                        | **Description**                                     | **Recommended** |
+| :----------------------------------------------------------------------------------- | :-------------------------------------------------- | :-------------: |
+| [`no-duplicate-imports`](./docs/rules/no-duplicate-imports.md)                       | Disallow duplicate @import rules                    |       yes       |
+| [`no-duplicate-keyframe-selectors`](./docs/rules/no-duplicate-keyframe-selectors.md) | Disallow duplicate selectors within keyframe blocks |       yes       |
+| [`no-empty-blocks`](./docs/rules/no-empty-blocks.md)                                 | Disallow empty blocks                               |       yes       |
+| [`no-important`](./docs/rules/no-important.md)                                       | Disallow !important flags                           |       yes       |
+| [`no-invalid-at-rules`](./docs/rules/no-invalid-at-rules.md)                         | Disallow invalid at-rules                           |       yes       |
+| [`no-invalid-properties`](./docs/rules/no-invalid-properties.md)                     | Disallow invalid properties                         |       yes       |
+| [`prefer-logical-properties`](./docs/rules/prefer-logical-properties.md)             | Enforce the use of logical properties               |       no        |
+| [`relative-font-units`](./docs/rules/relative-font-units.md)                         | Enforce the use of relative font units              |       no        |
+| [`use-baseline`](./docs/rules/use-baseline.md)                                       | Enforce the use of baseline features                |       yes       |
+| [`use-layers`](./docs/rules/use-layers.md)                                           | Require use of layers                               |       no        |
 
 <!-- Rule Table End -->
 

docs/rules/no-duplicate-keyframe-selectors.md

@@ -0,0 +1,95 @@
+# no-duplicate-keyframe-selectors
+
+Disallow duplicate selectors within keyframe blocks.
+
+## Background
+
+The [`@keyframes` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) in CSS defines intermediate steps in an animation sequence. Each keyframe selector (like `0%`, `50%`, `100%`, `from`, or `to`) represents a point in the animation timeline and contains styles to apply at that point.
+
+```css
+@keyframes test {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+```
+
+If a selector is repeated within the same @keyframes block, the last declaration wins, potentially causing unintentional overrides or confusion.
+
+## Rule Details
+
+This rule warns when it finds a keyframe block that contains duplicate selectors.
+
+Examples of **incorrect** code for this rule:
+
+```css
+/* eslint css/no-duplicate-keyframe-selectors: "error" */
+
+@keyframes test {
+	0% {
+		opacity: 0;
+	}
+
+	0% {
+		opacity: 1;
+	}
+}
+
+@keyframes test {
+	from {
+		opacity: 0;
+	}
+
+	from {
+		opacity: 1;
+	}
+}
+
+@keyframes test {
+	from {
+		opacity: 0;
+	}
+
+	from {
+		opacity: 1;
+	}
+}
+```
+
+Examples of **correct** code for this rule:
+
+```css
+/* eslint css/no-duplicate-keyframe-selectors: "error" */
+
+@keyframes test {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes test {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+```
+
+## When Not to Use It
+
+If you aren't concerned with duplicate selectors within keyframe blocks, you can safely disable this rule.
+
+## Prior Art
+
+- [`keyframe-block-no-duplicate-selectors`](https://stylelint.io/user-guide/rules/keyframe-block-no-duplicate-selectors/)

eslint.config.js

@@ -11,6 +11,7 @@ import eslintConfigESLint from "eslint-config-eslint";
 import eslintPlugin from "eslint-plugin-eslint-plugin";
 import json from "@eslint/json";
 import { defineConfig, globalIgnores } from "eslint/config";
+import css from "./src/index.js";
 
 //-----------------------------------------------------------------------------
 // Helpers
@@ -30,7 +31,7 @@ const eslintPluginTestsRecommendedConfig =
 //-----------------------------------------------------------------------------
 
 export default defineConfig([
-	globalIgnores(["**/tests/fixtures/", "**/dist/"]),
+	globalIgnores(["**/tests/fixtures/", "**/dist/", "test.css"]),
 
 	...eslintConfigESLint.map(config => ({
 		files: ["**/*.js"],
@@ -115,4 +116,9 @@ export default defineConfig([
 			"eslint-plugin/test-case-shorthand-strings": "error",
 		},
 	},
+	{
+		files: ["**/*.css"],
+		language: "css/css",
+		...css.configs.recommended,
+	},
 ]);

src/index.js

@@ -11,6 +11,7 @@ import { CSSLanguage } from "./languages/css-language.js";
 import { CSSSourceCode } from "./languages/css-source-code.js";
 import noEmptyBlocks from "./rules/no-empty-blocks.js";
 import noDuplicateImports from "./rules/no-duplicate-imports.js";
+import noDuplicateKeyframeSelectors from "./rules/no-duplicate-keyframe-selectors.js";
 import noImportant from "./rules/no-important.js";
 import noInvalidProperties from "./rules/no-invalid-properties.js";
 import noInvalidAtRules from "./rules/no-invalid-at-rules.js";
@@ -34,6 +35,7 @@ const plugin = {
 	rules: {
 		"no-empty-blocks": noEmptyBlocks,
 		"no-duplicate-imports": noDuplicateImports,
+		"no-duplicate-keyframe-selectors": noDuplicateKeyframeSelectors,
 		"no-important": noImportant,
 		"no-invalid-at-rules": noInvalidAtRules,
 		"no-invalid-properties": noInvalidProperties,
@@ -50,6 +52,7 @@ const plugin = {
 				"css/no-duplicate-imports": "error",
 				"css/no-important": "error",
 				"css/no-invalid-at-rules": "error",
+				"css/no-duplicate-keyframe-selectors": "error",
 				"css/no-invalid-properties": "error",
 				"css/use-baseline": "warn",
 			}),

src/rules/no-duplicate-keyframe-selectors.js

@@ -0,0 +1,74 @@
+/**
+ * @fileoverview Rule to disallow duplicate selectors within keyframe blocks.
+ * @author Nitin Kumar
+ */
+
+//-----------------------------------------------------------------------------
+// Type Definitions
+//-----------------------------------------------------------------------------
+
+/**
+ * @import { CSSRuleDefinition } from "../types.js"
+ * @typedef {"duplicateKeyframeSelector"} DuplicateKeyframeSelectorMessageIds
+ * @typedef {CSSRuleDefinition<{ RuleOptions: [], MessageIds: DuplicateKeyframeSelectorMessageIds }>} DuplicateKeyframeSelectorRuleDefinition
+ */
+
+//-----------------------------------------------------------------------------
+// Rule Definition
+//-----------------------------------------------------------------------------
+
+/** @type {DuplicateKeyframeSelectorRuleDefinition} */
+export default {
+	meta: {
+		type: "problem",
+
+		docs: {
+			description: "Disallow duplicate selectors within keyframe blocks",
+			recommended: true,
+			url: "https://github.com/eslint/css/blob/main/docs/rules/no-duplicate-keyframe-selectors.md",
+		},
+
+		messages: {
+			duplicateKeyframeSelector:
+				"Unexpected duplicate selector '{{selector}}' found within keyframe block.",
+		},
+	},
+
+	create(context) {
+		return {
+			Atrule(node) {
+				if (node.name === "keyframes" && node.block) {
+					const selectorNodes = node.block.children.map(child => {
+						const selector =
+							// eslint-disable-next-line dot-notation -- bracket notation to avoid type error even though it's valid
+							child["prelude"].children[0].children[0];
+						let value;
+						if (selector.type === "Percentage") {
+							value = `${selector.value}%`;
+						} else if (selector.type === "TypeSelector") {
+							value = selector.name.toLowerCase();
+						} else {
+							value = selector.value;
+						}
+						return { value, loc: selector.loc };
+					});
+
+					const seen = new Map();
+					selectorNodes.forEach((selectorNode, index) => {
+						if (seen.has(selectorNode.value)) {
+							context.report({
+								loc: selectorNode.loc,
+								messageId: "duplicateKeyframeSelector",
+								data: {
+									selector: selectorNode.value,
+								},
+							});
+						} else {
+							seen.set(selectorNode.value, index);
+						}
+					});
+				}
+			},
+		};
+	},
+};