Improve autofix of prefer-class-directive (#101)

Author: ota-meshi

docs-svelte-kit/src/lib/components/ESLintPlayground.svelte

@@ -58,7 +58,7 @@
 
 <button
   type=button
-  class={current === 'foo' ? 'selected' : ''}
+  class="{active ? 'active' : ''} {current === 'foo' ? 'selected' : ''}"
   on:click="{() => current = 'foo'}"
 >foo</button>
 

src/rules/prefer-class-directive.ts

@@ -2,6 +2,7 @@ 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 type { Rule } from "eslint"
 
 export default createRule("prefer-class-directive", {
   meta: {
@@ -217,7 +218,7 @@ export default createRule("prefer-class-directive", {
 
     /** Report */
     function report(
-      node: AST.SvelteMustacheTag,
+      node: AST.SvelteMustacheTagText,
       map: Map<Expr, string>,
       attr: AST.SvelteAttribute,
     ) {
@@ -237,10 +238,56 @@ export default createRule("prefer-class-directive", {
               space = className
             }
           }
-          if (attr.value.length === 1) {
+
+          const fixesBuffer: Rule.Fix[] = []
+          const index = attr.value.indexOf(node)
+          const beforeAttrValues = attr.value.slice(0, index)
+          const afterAttrValues = attr.value.slice(index + 1)
+          let valueNode
+          while ((valueNode = beforeAttrValues[beforeAttrValues.length - 1])) {
+            if (valueNode.type === "SvelteLiteral") {
+              if (!valueNode.value.trim()) {
+                // Before spaces
+                beforeAttrValues.pop()
+                fixesBuffer.push(fixer.remove(valueNode))
+                continue
+              }
+              if (valueNode.value.trimEnd() !== valueNode.value) {
+                // Before spaces
+                fixesBuffer.push(
+                  fixer.replaceText(valueNode, valueNode.value.trimEnd()),
+                )
+              }
+            }
+            break
+          }
+          while ((valueNode = afterAttrValues[0])) {
+            if (valueNode.type === "SvelteLiteral") {
+              if (!valueNode.value.trim()) {
+                // After spaces
+                afterAttrValues.shift()
+                fixesBuffer.push(fixer.remove(valueNode))
+                continue
+              }
+              if (valueNode.value.trimStart() !== valueNode.value) {
+                // After spaces
+                fixesBuffer.push(
+                  fixer.replaceText(valueNode, valueNode.value.trimStart()),
+                )
+              }
+            }
+            break
+          }
+
+          if (!beforeAttrValues.length && !afterAttrValues.length) {
             yield fixer.replaceText(attr, classDirectives.join(" "))
           } else {
-            yield fixer.replaceText(node, space)
+            yield* fixesBuffer
+            if (beforeAttrValues.length && afterAttrValues.length) {
+              yield fixer.replaceText(node, space || " ")
+            } else {
+              yield fixer.remove(node)
+            }
             yield fixer.insertTextAfterRange(
               [attr.range[1], attr.range[1]],
               ` ${classDirectives.join(" ")}`,
@@ -252,7 +299,7 @@ export default createRule("prefer-class-directive", {
 
     /** verify */
     function verify(
-      node: AST.SvelteMustacheTag,
+      node: AST.SvelteMustacheTagText,
       index: number,
       attr: AST.SvelteAttribute,
     ) {

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

@@ -5,3 +5,5 @@
 <button class={selected ? "selected" : ""}>foo</button>
 <button class="a {selected ? 'selected' : ''} b">foo</button>
 <button class="a{selected ? ' selected ' : ' '}b">foo</button>
+
+<!-- test01-input.svelte -->

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

@@ -3,5 +3,7 @@
 </script>
 
 <button class:selected={selected}>foo</button>
-<button class="a  b" class:selected={selected}>foo</button>
 <button class="a b" class:selected={selected}>foo</button>
+<button class="a b" class:selected={selected}>foo</button>
+
+<!-- test01-input.svelte -->

tests/fixtures/rules/prefer-class-directive/invalid/trim-test01-errors.json

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

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

@@ -0,0 +1,10 @@
+<script>
+  let current = "foo"
+  let active = true
+</script>
+
+<button class="{active ? 'active' : ''} {current === 'foo' ? 'selected' : ''}"
+  >foo</button
+>
+
+<!-- trim-test01-input.svelte -->

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

@@ -0,0 +1,10 @@
+<script>
+  let current = "foo"
+  let active = true
+</script>
+
+<button class="{current === 'foo' ? 'selected' : ''}" class:active={active}
+  >foo</button
+>
+
+<!-- trim-test01-input.svelte -->

tests/fixtures/rules/prefer-class-directive/invalid/trim-test01.2-errors.json

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

tests/fixtures/rules/prefer-class-directive/invalid/trim-test01.2-input.svelte

@@ -0,0 +1,8 @@
+<script>
+  let current = "foo"
+  let active = true
+</script>
+
+<button class={current === "foo" ? "selected" : ""} class:active>foo</button>
+
+<!-- trim-test01.2-input.svelte -->

tests/fixtures/rules/prefer-class-directive/invalid/trim-test01.2-output.svelte

@@ -0,0 +1,8 @@
+<script>
+  let current = "foo"
+  let active = true
+</script>
+
+<button class:selected={current === "foo"} class:active>foo</button>
+
+<!-- trim-test01.2-input.svelte -->