Fix false positives for component in prefer-class-directive rule (#178)

* Fix false positives for component in `prefer-class-directive` rule

* refactor

Author: ota-meshi

src/rules/prefer-class-directive.ts

@@ -1,7 +1,11 @@
 import type { AST } from "svelte-eslint-parser"
 import type * as ESTree from "estree"
 import { createRule } from "../utils"
-import { getStringIfConstant, needParentheses } from "../utils/ast-utils"
+import {
+  getStringIfConstant,
+  isHTMLElementLike,
+  needParentheses,
+} from "../utils/ast-utils"
 import type { Rule } from "eslint"
 
 export default createRule("prefer-class-directive", {
@@ -348,12 +352,15 @@ export default createRule("prefer-class-directive", {
     }
 
     return {
-      "SvelteElement > SvelteStartTag > SvelteAttribute"(
+      "SvelteStartTag > SvelteAttribute"(
         node: AST.SvelteAttribute & {
-          parent: AST.SvelteStartTag & { parent: AST.SvelteElement }
+          parent: AST.SvelteStartTag
         },
       ) {
-        if (node.key.name !== "class") {
+        if (
+          !isHTMLElementLike(node.parent.parent) ||
+          node.key.name !== "class"
+        ) {
           return
         }
 

src/rules/prefer-style-directive.ts

@@ -8,6 +8,7 @@ import type {
 } from "../utils/css-utils"
 import { parseStyleAttributeValue } from "../utils/css-utils"
 import type { RuleFixer } from "../types"
+import { isHTMLElementLike } from "../utils/ast-utils"
 
 /** Checks wether the given node is string literal or not  */
 function isStringLiteral(
@@ -222,7 +223,10 @@ export default createRule("prefer-style-directive", {
           parent: AST.SvelteStartTag
         },
       ) {
-        if (!isHTMLElement(node.parent.parent) || node.key.name !== "style") {
+        if (
+          !isHTMLElementLike(node.parent.parent) ||
+          node.key.name !== "style"
+        ) {
           return
         }
         const root = parseStyleAttributeValue(node, context)
@@ -231,23 +235,5 @@ export default createRule("prefer-style-directive", {
         }
       },
     }
-
-    /** Checks whether the given node is the html element node. */
-    function isHTMLElement(
-      node:
-        | AST.SvelteElement
-        | AST.SvelteScriptElement
-        | AST.SvelteStyleElement,
-    ) {
-      if (node.type === "SvelteElement") {
-        if (node.kind === "html") {
-          return true
-        }
-        if (node.kind === "special") {
-          return node.name.name === "svelte:element"
-        }
-      }
-      return false
-    }
   },
 })

src/utils/ast-utils.ts

@@ -98,6 +98,31 @@ export function needParentheses(
   return false
 }
 
+/** Checks whether the given node is the html element node or <svelte:element> node. */
+export function isHTMLElementLike(
+  node:
+    | SvAST.SvelteElement
+    | SvAST.SvelteScriptElement
+    | SvAST.SvelteStyleElement,
+): node is
+  | SvAST.SvelteHTMLElement
+  | (SvAST.SvelteSpecialElement & {
+      name: SvAST.SvelteName & { name: "svelte:element" }
+    }) {
+  if (node.type !== "SvelteElement") {
+    return false
+  }
+
+  switch (node.kind) {
+    case "html":
+      return true
+    case "special":
+      return node.name.name === "svelte:element"
+    default:
+      return false
+  }
+}
+
 /**
  * Find the attribute from the given element node
  */

tests/fixtures/rules/prefer-class-directive/invalid/svelte-element01-errors.json

@@ -0,0 +1,7 @@
+[
+  {
+    "message": "Unexpected class using the ternary operator.",
+    "line": 6,
+    "column": 41
+  }
+]

tests/fixtures/rules/prefer-class-directive/invalid/svelte-element01-input.svelte

@@ -0,0 +1,6 @@
+<script>
+  let expression = "div"
+  let current = "foo"
+</script>
+
+<svelte:element this={expression} class={current === "foo" ? "selected" : ""} />

tests/fixtures/rules/prefer-class-directive/invalid/svelte-element01-output.svelte

@@ -0,0 +1,6 @@
+<script>
+  let expression = "div"
+  let current = "foo"
+</script>
+
+<svelte:element this={expression} class:selected={current === "foo"} />

tests/fixtures/rules/prefer-class-directive/valid/ignore-component01-input.svelte

@@ -0,0 +1,6 @@
+<script>
+  import Component from "./Component.svelte"
+  let current = "foo"
+</script>
+
+<Component class={current === "foo" ? "selected" : ""} />

tests/fixtures/rules/prefer-class-directive/valid/ignore-svelte-self01-input.svelte

@@ -0,0 +1,10 @@
+<script>
+  let foo = Math.random()
+  let current = "foo"
+</script>
+
+<div>
+  {#if foo > 0.5}
+    <svelte:self class={current === "foo" ? "selected" : ""} />
+  {/if}
+</div>