Fix false positives for component in prefer-style-directive rule (#174)

Author: ota-meshi

src/rules/prefer-style-directive.ts

@@ -222,7 +222,7 @@ export default createRule("prefer-style-directive", {
           parent: AST.SvelteStartTag
         },
       ) {
-        if (node.key.name !== "style") {
+        if (!isHTMLElement(node.parent.parent) || node.key.name !== "style") {
           return
         }
         const root = parseStyleAttributeValue(node, context)
@@ -231,5 +231,23 @@ 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
+    }
   },
 })

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

@@ -0,0 +1,7 @@
+[
+  {
+    "message": "Can use style directives instead.",
+    "line": 5,
+    "column": 42
+  }
+]

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

@@ -0,0 +1,5 @@
+<script>
+  let expression = "div"
+</script>
+
+<svelte:element this={expression} style="display:block" />

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

@@ -0,0 +1,5 @@
+<script>
+  let expression = "div"
+</script>
+
+<svelte:element this={expression} style:display="block" />

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

@@ -0,0 +1,5 @@
+<script>
+  import Component from "./Component.svelte"
+</script>
+
+<Component style="color: red;" />

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

@@ -0,0 +1,9 @@
+<script>
+  let foo = Math.random()
+</script>
+
+<div>
+  {#if foo > 0.5}
+    <svelte:self style="display:block" />
+  {/if}
+</div>