Fix false positive for @keyframes in astro/no-unused-css-selector…

… rule (#33)

src/rules/no-unused-css-selector.ts

@@ -2,6 +2,7 @@ import type { TSESTree } from "@typescript-eslint/types"
 import { AST_NODE_TYPES } from "@typescript-eslint/types"
 import type { AST } from "astro-eslint-parser"
 import { getStaticValue } from "eslint-utils"
+import type { Node as PostcssNode } from "postcss"
 import postcss from "postcss"
 import parser from "postcss-selector-parser"
 import type { RuleContext } from "../types"
@@ -62,7 +63,21 @@ export default createRule("no-unused-css-selector", {
       } catch (e) {
         return
       }
-      root.walkRules((rule) => {
+      const ignoreNodes = new Set<PostcssNode>()
+      root.walk((psNode) => {
+        if (psNode.parent && ignoreNodes.has(psNode.parent)) {
+          ignoreNodes.add(psNode)
+          return
+        }
+        if (psNode.type !== "rule") {
+          if (psNode.type === "atrule") {
+            if (psNode.name === "keyframes") {
+              ignoreNodes.add(psNode)
+            }
+          }
+          return
+        }
+        const rule = psNode
         const raws = rule.raws
         const rawSelectorText = raws.selector
           ? raws.selector.raw

tests/fixtures/rules/no-unused-css-selector/invalid/keyframe01-errors.json

@@ -0,0 +1,7 @@
+[
+  {
+    "message": "Unused CSS selector `.foo`",
+    "line": 16,
+    "column": 3
+  }
+]

tests/fixtures/rules/no-unused-css-selector/invalid/keyframe01-input.astro

@@ -0,0 +1,19 @@
+<div class="text-gradient"></div>
+
+<style>
+  .text-gradient {
+    animation: pulse 4s ease-in-out infinite;
+  }
+  @keyframes pulse {
+    0%,
+    100% {
+      background-position-y: 0%;
+    }
+    50% {
+      background-position-y: 80%;
+    }
+  }
+  .foo {
+    color: red;
+  }
+</style>

tests/fixtures/rules/no-unused-css-selector/valid/keyframe01-input.astro

@@ -0,0 +1,16 @@
+<div class="text-gradient"></div>
+
+<style>
+  .text-gradient {
+    animation: pulse 4s ease-in-out infinite;
+  }
+  @keyframes pulse {
+    0%,
+    100% {
+      background-position-y: 0%;
+    }
+    50% {
+      background-position-y: 80%;
+    }
+  }
+</style>