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

.gitignore

@@ -57,4 +57,6 @@ pnpm-lock.yaml
 
 # Build
 dist/
+
 src/build
+test.css

README.md

@@ -65,19 +65,20 @@ 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-rule-placement`](./docs/rules/no-invalid-at-rule-placement.md) | Disallow invalid placement of at-rules |       yes       |
-| [`no-invalid-at-rules`](./docs/rules/no-invalid-at-rules.md)                   | Disallow invalid at-rules              |       yes       |
-| [`no-invalid-named-grid-areas`](./docs/rules/no-invalid-named-grid-areas.md)   | Disallow invalid named grid areas      |       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-rule-placement`](./docs/rules/no-invalid-at-rule-placement.md)       | Disallow invalid placement of at-rules              |       yes       |
+| [`no-invalid-at-rules`](./docs/rules/no-invalid-at-rules.md)                         | Disallow invalid at-rules                           |       yes       |
+| [`no-invalid-named-grid-areas`](./docs/rules/no-invalid-named-grid-areas.md)         | Disallow invalid named grid areas                   |       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,6 +116,12 @@ export default defineConfig([
 			"eslint-plugin/test-case-shorthand-strings": "error",
 		},
 	},
+	{
+		files: ["**/*.css"],
+		language: "css/css",
+		plugins: { css },
+		extends: ["css/recommended"],
+	},
 	{
 		files: ["tools/**/*.js"],
 		rules: {

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

@@ -0,0 +1,81 @@
+/**
+ * @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) {
+		let insideKeyframes = false;
+		const seen = new Map();
+
+		return {
+			"Atrule[name=keyframes]"() {
+				insideKeyframes = true;
+				seen.clear();
+			},
+
+			"Atrule[name=keyframes]:exit"() {
+				insideKeyframes = false;
+			},
+
+			Rule(node) {
+				if (!insideKeyframes) {
+					return;
+				}
+
+				// @ts-ignore - children is a valid property for prelude
+				const selector = node.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;
+				}
+
+				if (seen.has(value)) {
+					context.report({
+						loc: selector.loc,
+						messageId: "duplicateKeyframeSelector",
+						data: {
+							selector: value,
+						},
+					});
+				} else {
+					seen.set(value, true);
+				}
+			},
+		};
+	},
+};