(fix) style directive with multiple values (#1632)

#1626
sveltejs · Sep 13, 2022 · 7ee04e5 · 7ee04e5
1 parent 4ea7edb
commit 7ee04e5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/MustacheTag.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/MustacheTag.ts
@@ -6,8 +6,8 @@ import { BaseNode } from '../../interfaces';
  * {a}  -->  a;
  */
 export function handleMustacheTag(str: MagicString, node: BaseNode, parent: BaseNode) {
-    if (parent.type === 'Attribute') {
-        // handles inside Attribute.ts
+    if (parent.type === 'Attribute' || parent.type === 'StyleDirective') {
+        // handled inside Attribute.ts / StyleDirective.ts
         return;
     }
     str.overwrite(node.start, node.start + 1, '', { contentOnly: true });

diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/StyleDirective.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/StyleDirective.ts
@@ -24,24 +24,18 @@ export function handleStyleDirective(
         return;
     }
 
-    let start = style.value[0].start;
-    if (style.value[0].type === 'MustacheTag') {
-        start++;
-    }
-    const last = style.value[style.value.length - 1];
-    let end = last.end;
-    if (last.type === 'MustacheTag') {
-        end--;
-    }
-
     if (style.value.length > 1) {
         // We have multiple attribute values, so we build a template string out of them.
         for (const n of style.value) {
             if (n.type === 'MustacheTag') {
                 str.appendRight(n.start, '$');
             }
         }
-        element.appendToStartEnd([ensureType + '`', [start, end], '`);']);
+        element.appendToStartEnd([
+            ensureType + '`',
+            [style.value[0].start, style.value[style.value.length - 1].end],
+            '`);'
+        ]);
         return;
     }
 
@@ -50,9 +44,13 @@ export function handleStyleDirective(
         const quote = ['"', "'"].includes(str.original[styleVal.start - 1])
             ? str.original[styleVal.start - 1]
             : '"';
-        element.appendToStartEnd([`${ensureType}${quote}`, [start, end], `${quote});`]);
+        element.appendToStartEnd([
+            `${ensureType}${quote}`,
+            [styleVal.start, styleVal.end],
+            `${quote});`
+        ]);
     } else {
         // MustacheTag
-        element.appendToStartEnd([ensureType, [start, end], ');']);
+        element.appendToStartEnd([ensureType, [styleVal.start + 1, styleVal.end - 1], ');']);
     }
 }
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expectedv2.js
@@ -4,10 +4,10 @@
   { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, value);  }
  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, " ");  }
  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, " ");  }
-  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed`);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed`);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, `mixed; `);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed; `);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` ${mixed}`);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` ${mixed}`);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, `${mixed} `);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` ${mixed} `);  }
  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, `template${literal}`);  }
 
   { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, shorthand);}