Add no-dupe-style-properties rule (#127)

Author: ota-meshi

README.md

@@ -243,6 +243,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/no-dupe-else-if-blocks](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks/) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
+| [@ota-meshi/svelte/no-dupe-style-properties](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-style-properties/) | disallow duplicate style properties | :star: |
 | [@ota-meshi/svelte/no-dynamic-slot-name](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dynamic-slot-name/) | disallow dynamic slot name | :star::wrench: |
 | [@ota-meshi/svelte/no-not-function-handler](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-not-function-handler/) | disallow use of not function in event handler | :star: |
 | [@ota-meshi/svelte/no-object-in-text-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: |

docs/rules.md

@@ -16,6 +16,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [@ota-meshi/svelte/no-dupe-else-if-blocks](./rules/no-dupe-else-if-blocks.md) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
+| [@ota-meshi/svelte/no-dupe-style-properties](./rules/no-dupe-style-properties.md) | disallow duplicate style properties | :star: |
 | [@ota-meshi/svelte/no-dynamic-slot-name](./rules/no-dynamic-slot-name.md) | disallow dynamic slot name | :star::wrench: |
 | [@ota-meshi/svelte/no-not-function-handler](./rules/no-not-function-handler.md) | disallow use of not function in event handler | :star: |
 | [@ota-meshi/svelte/no-object-in-text-mustaches](./rules/no-object-in-text-mustaches.md) | disallow objects in text mustache interpolation | :star: |

docs/rules/no-dupe-style-properties.md

@@ -0,0 +1,47 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "@ota-meshi/svelte/no-dupe-style-properties"
+description: "disallow duplicate style properties"
+---
+
+# @ota-meshi/svelte/no-dupe-style-properties
+
+> disallow duplicate style properties
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :gear: This rule is included in `"plugin:@ota-meshi/svelte/recommended"`.
+
+## :book: Rule Details
+
+This rule reports duplicate style properties.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint @ota-meshi/svelte/no-dupe-style-properties: "error" */
+  let red = "red"
+</script>
+
+<!-- ✓ GOOD -->
+<div style="background: green; background-color: {red};">...</div>
+<div style:background="green" style="background-color: {red}">...</div>
+
+<!-- ✗ BAD -->
+<div style="background: green; background: {red};">...</div>
+<div style:background="green" style="background: {red}">...</div>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/no-dupe-style-properties.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/no-dupe-style-properties.ts)

src/configs/recommended.ts

@@ -10,6 +10,7 @@ export = {
     "@ota-meshi/svelte/no-at-debug-tags": "warn",
     "@ota-meshi/svelte/no-at-html-tags": "error",
     "@ota-meshi/svelte/no-dupe-else-if-blocks": "error",
+    "@ota-meshi/svelte/no-dupe-style-properties": "error",
     "@ota-meshi/svelte/no-dynamic-slot-name": "error",
     "@ota-meshi/svelte/no-inner-declarations": "error",
     "@ota-meshi/svelte/no-not-function-handler": "error",

src/rules/no-dupe-style-properties.ts

@@ -0,0 +1,106 @@
+import type { AST } from "svelte-eslint-parser"
+import { createRule } from "../utils"
+import type { SvelteStyleInlineRoot, SvelteStyleRoot } from "../utils/css-utils"
+import { parseStyleAttributeValue } from "../utils/css-utils"
+
+export default createRule("no-dupe-style-properties", {
+  meta: {
+    docs: {
+      description: "disallow duplicate style properties",
+      category: "Possible Errors",
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      unexpected: "Duplicate property '{{name}}'.",
+    },
+    type: "problem",
+  },
+  create(context) {
+    type StyleDecl = {
+      prop: string
+      loc: AST.SourceLocation
+    }
+    type StyleDeclSet = {
+      decls: StyleDecl[]
+    }
+
+    return {
+      SvelteStartTag(node: AST.SvelteStartTag) {
+        const reported = new Set<StyleDecl>()
+        const beforeDeclarations = new Map<string, StyleDecl>()
+        for (const { decls } of iterateStyleDeclSetFromAttrs(node.attributes)) {
+          for (const decl of decls) {
+            const already = beforeDeclarations.get(decl.prop)
+            if (already) {
+              for (const report of [already, decl].filter(
+                (n) => !reported.has(n),
+              )) {
+                context.report({
+                  node,
+                  loc: report.loc,
+                  messageId: "unexpected",
+                  data: { name: report.prop },
+                })
+                reported.add(report)
+              }
+            }
+          }
+          for (const decl of decls) {
+            beforeDeclarations.set(decl.prop, decl)
+          }
+        }
+      },
+    }
+
+    /** Iterate the style decl set from attrs */
+    function* iterateStyleDeclSetFromAttrs(
+      attrs: AST.SvelteStartTag["attributes"],
+    ): Iterable<StyleDeclSet> {
+      for (const attr of attrs) {
+        if (attr.type === "SvelteStyleDirective") {
+          yield {
+            decls: [{ prop: attr.key.name.name, loc: attr.key.name.loc! }],
+          }
+        } else if (attr.type === "SvelteAttribute") {
+          if (attr.key.name !== "style") {
+            continue
+          }
+          const root = parseStyleAttributeValue(attr, context)
+          if (!root) {
+            continue
+          }
+          yield* iterateStyleDeclSetFromStyleRoot(root)
+        }
+      }
+    }
+
+    /** Iterate the style decl set from style root */
+    function* iterateStyleDeclSetFromStyleRoot(
+      root: SvelteStyleRoot | SvelteStyleInlineRoot,
+    ): Iterable<StyleDeclSet> {
+      for (const child of root.nodes) {
+        if (child.type === "decl") {
+          yield {
+            decls: [
+              {
+                prop: child.prop.name,
+                get loc() {
+                  return child.prop.loc
+                },
+              },
+            ],
+          }
+        } else if (child.type === "inline") {
+          const decls: StyleDecl[] = []
+          for (const root of child.getAllInlineStyles().values()) {
+            for (const set of iterateStyleDeclSetFromStyleRoot(root)) {
+              decls.push(...set.decls)
+            }
+          }
+          yield { decls }
+        }
+      }
+    }
+  },
+})

src/rules/no-shorthand-style-property-overrides.ts

@@ -1,6 +1,6 @@
 import type { AST } from "svelte-eslint-parser"
 import { createRule } from "../utils"
-import type { SvelteStyleRoot } from "../utils/css-utils"
+import type { SvelteStyleInlineRoot, SvelteStyleRoot } from "../utils/css-utils"
 import {
   getVendorPrefix,
   stripVendorPrefix,
@@ -92,7 +92,7 @@ export default createRule("no-shorthand-style-property-overrides", {
 
     /** Iterate the style decl set from style root */
     function* iterateStyleDeclSetFromStyleRoot(
-      root: SvelteStyleRoot,
+      root: SvelteStyleRoot | SvelteStyleInlineRoot,
     ): Iterable<StyleDeclSet> {
       for (const child of root.nodes) {
         if (child.type === "decl") {