Support for svelte v3.46.1 (#93)

Author: ota-meshi

package.json

@@ -56,7 +56,7 @@
     "debug": "^4.3.1",
     "eslint-utils": "^3.0.0",
     "sourcemap-codec": "^1.4.8",
-    "svelte-eslint-parser": "^0.10.0"
+    "svelte-eslint-parser": "^0.11.0"
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0-0",
@@ -118,7 +118,7 @@
     "semver": "^7.3.5",
     "stylelint": "^14.0.0",
     "stylelint-config-standard": "^24.0.0",
-    "svelte": "^3.37.0",
+    "svelte": "^3.46.1",
     "svelte-adapter-ghpages": "0.0.2",
     "ts-node": "^10.0.0",
     "typescript": "^4.5.2",

src/rules/html-quotes.ts

@@ -148,17 +148,17 @@ export default createRule("html-quotes", {
     }
 
     /** Verify for standard attribute */
-    function verifyForValues(attr: AST.SvelteAttribute) {
+    function verifyForValues(
+      attr: AST.SvelteAttribute | AST.SvelteStyleDirective,
+    ) {
       const quoteAndRange = getAttributeValueQuoteAndRange(attr, sourceCode)
       verifyQuote(preferQuote, quoteAndRange)
     }
 
     /** Verify for dynamic attribute */
     function verifyForDynamicMustacheTag(
-      attr: AST.SvelteAttribute,
-      valueNode: AST.SvelteMustacheTag & {
-        kind: "text"
-      },
+      attr: AST.SvelteAttribute | AST.SvelteStyleDirective,
+      valueNode: AST.SvelteMustacheTagText,
     ) {
       const quoteAndRange = getAttributeValueQuoteAndRange(attr, sourceCode)
       const text = sourceCode.text.slice(...valueNode.range)
@@ -192,7 +192,9 @@ export default createRule("html-quotes", {
     }
 
     return {
-      SvelteAttribute(node) {
+      "SvelteAttribute, SvelteStyleDirective"(
+        node: AST.SvelteAttribute | AST.SvelteStyleDirective,
+      ) {
         if (
           node.value.length === 1 &&
           node.value[0].type === "SvelteMustacheTag"

src/rules/indent-helpers/svelte.ts

@@ -87,6 +87,7 @@ export function defineVisitor(context: IndentContext): NodeListener {
       node:
         | AST.SvelteAttribute
         | AST.SvelteDirective
+        | AST.SvelteStyleDirective
         | AST.SvelteSpecialDirective,
     ) {
       const keyToken = sourceCode.getFirstToken(node)
@@ -102,7 +103,11 @@ export function defineVisitor(context: IndentContext): NodeListener {
         ) {
           offsets.setOffsetToken(valueStartToken, 1, keyToken)
 
-          const values = node.type === "SvelteAttribute" ? node.value : []
+          const values =
+            node.type === "SvelteAttribute" ||
+            node.type === "SvelteStyleDirective"
+              ? node.value
+              : []
           // process quoted
           let processedValues = false
           if (valueStartToken.type === "Punctuator") {
@@ -134,6 +139,9 @@ export function defineVisitor(context: IndentContext): NodeListener {
     SvelteDirective(node: AST.SvelteDirective) {
       visitor.SvelteAttribute(node)
     },
+    SvelteStyleDirective(node: AST.SvelteStyleDirective) {
+      visitor.SvelteAttribute(node)
+    },
     SvelteSpecialDirective(node: AST.SvelteSpecialDirective) {
       visitor.SvelteAttribute(node)
     },

src/rules/max-attributes-per-line.ts

@@ -72,6 +72,7 @@ export default createRule("max-attributes-per-line", {
         attribute.type === "SvelteAttribute" ||
         attribute.type === "SvelteShorthandAttribute" ||
         attribute.type === "SvelteDirective" ||
+        attribute.type === "SvelteStyleDirective" ||
         attribute.type === "SvelteSpecialDirective"
       ) {
         name = sourceCode.text.slice(...attribute.key.range!)

src/rules/mustache-spacing.ts

@@ -193,6 +193,8 @@ export default createRule("mustache-spacing", {
         let option: OptionValue
         if (node.parent.type === "SvelteAttribute") {
           option = options.attributesAndProps
+        } else if (node.parent.type === "SvelteStyleDirective") {
+          option = options.directiveExpressions
         } else {
           option = options.textExpressions
         }

src/rules/no-useless-mustaches.ts

@@ -126,7 +126,10 @@ export default createRule("no-useless-mustaches", {
 
           const unescaped = text.replace(/\\([\s\S])/g, "$1")
 
-          if (node.parent.type === "SvelteAttribute") {
+          if (
+            node.parent.type === "SvelteAttribute" ||
+            node.parent.type === "SvelteStyleDirective"
+          ) {
             const div = sourceCode.text.slice(
               node.parent.key.range[1],
               node.parent.value[0].range[0],

src/utils/ast-utils.ts

@@ -239,6 +239,7 @@ export function getAttributeValueQuoteAndRange(
   attr:
     | SvAST.SvelteAttribute
     | SvAST.SvelteDirective
+    | SvAST.SvelteStyleDirective
     | SvAST.SvelteSpecialDirective,
   sourceCode: SourceCode,
 ): QuoteAndRange | null {
@@ -372,10 +373,11 @@ function getAttributeValueRangeTokens(
   attr:
     | SvAST.SvelteAttribute
     | SvAST.SvelteDirective
+    | SvAST.SvelteStyleDirective
     | SvAST.SvelteSpecialDirective,
   sourceCode: SourceCode,
 ) {
-  if (attr.type === "SvelteAttribute") {
+  if (attr.type === "SvelteAttribute" || attr.type === "SvelteStyleDirective") {
     if (!attr.value.length) {
       return null
     }

tests/fixtures/rules/html-quotes/invalid/test01-errors.json

@@ -21,7 +21,12 @@
   },
   {
     "message": "Unexpected to be enclosed by any quotes.",
-    "line": 16,
+    "line": 14,
+    "column": 20
+  },
+  {
+    "message": "Unexpected to be enclosed by any quotes.",
+    "line": 18,
     "column": 10
   }
 ]

tests/fixtures/rules/html-quotes/invalid/test01-input.svelte

@@ -10,6 +10,8 @@
 <input type="text" bind:value />
 <!-- prettier-ignore -->
 <input type='text' bind:value="{value}" />
+<!-- prettier-ignore -->
+<input style:color="{value}" />
 
 <img {src} alt="{name} dances." />
 <!-- prettier-ignore -->

tests/fixtures/rules/html-quotes/invalid/test01-output.svelte

@@ -10,6 +10,8 @@
 <input type="text" bind:value />
 <!-- prettier-ignore -->
 <input type="text" bind:value={value} />
+<!-- prettier-ignore -->
+<input style:color={value} />
 
 <img {src} alt="{name} dances." />
 <!-- prettier-ignore -->