Fix wrong autofix in shorthand-attribute rule (#100)

Author: ota-meshi

src/rules/shorthand-attribute.ts

@@ -1,4 +1,5 @@
 import { createRule } from "../utils"
+import { getAttributeValueQuoteAndRange } from "../utils/ast-utils"
 
 export default createRule("shorthand-attribute", {
   meta: {
@@ -45,8 +46,28 @@ export default createRule("shorthand-attribute", {
                 node,
                 messageId: "expectedShorthand",
                 *fix(fixer) {
-                  yield fixer.remove(node.key)
-                  yield fixer.remove(sourceCode.getTokenAfter(node.key)!)
+                  const quoteAndRange = getAttributeValueQuoteAndRange(
+                    node,
+                    sourceCode,
+                  )
+                  if (!quoteAndRange) {
+                    return
+                  }
+                  if (
+                    quoteAndRange.quote === "double" ||
+                    quoteAndRange.quote === "single"
+                  ) {
+                    yield fixer.removeRange([
+                      node.range[0],
+                      quoteAndRange.firstToken.range[1],
+                    ])
+                    yield fixer.remove(quoteAndRange.lastToken)
+                  } else {
+                    yield fixer.removeRange([
+                      node.range[0],
+                      quoteAndRange.range[0],
+                    ])
+                  }
                 },
               })
             }

tests/fixtures/rules/shorthand-attribute/invalid/always/test01-errors.json

@@ -8,5 +8,15 @@
     "message": "Expected shorthand attribute.",
     "line": 10,
     "column": 9
+  },
+  {
+    "message": "Expected shorthand attribute.",
+    "line": 13,
+    "column": 9
+  },
+  {
+    "message": "Expected shorthand attribute.",
+    "line": 15,
+    "column": 9
   }
 ]

tests/fixtures/rules/shorthand-attribute/invalid/always/test01-input.svelte

@@ -9,3 +9,9 @@
 <!-- prettier-ignore -->
 <button disabled  =  {disabled}>...</button>
 <button {disabled}>...</button>
+<!-- prettier-ignore -->
+<button disabled="{disabled}">...</button>
+<!-- prettier-ignore -->
+<button disabled  =  "{disabled}">...</button>
+<!-- prettier-ignore -->
+<button disabled  =  " {disabled} ">...</button>

tests/fixtures/rules/shorthand-attribute/invalid/always/test01-output.svelte

@@ -7,5 +7,11 @@
 <button {disabled}>...</button>
 
 <!-- prettier-ignore -->
-<button     {disabled}>...</button>
 <button {disabled}>...</button>
+<button {disabled}>...</button>
+<!-- prettier-ignore -->
+<button {disabled}>...</button>
+<!-- prettier-ignore -->
+<button {disabled}>...</button>
+<!-- prettier-ignore -->
+<button disabled  =  " {disabled} ">...</button>

tests/fixtures/rules/shorthand-attribute/invalid/test01-output.svelte

@@ -7,5 +7,5 @@
 <button {disabled}>...</button>
 
 <!-- prettier-ignore -->
-<button     {disabled}>...</button>
+<button {disabled}>...</button>
 <button {disabled}>...</button>