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

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>