Fix erroneous template string whitespace formatting in Svelte (tailwi…

…ndlabs#332) * Fix erroneous template string whitespace formatting in Svelte * Update test * Update changelog --------- Co-authored-by: Jordan Pittman <[email protected]>
MichaelDeBoey · Jan 6, 2025 · 9481dd0 · 9481dd0
1 parent a9201df
commit 9481dd0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for `@zackad/prettier-plugin-twig` ([#308](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/308))
 - Dropped support for `@zackad/prettier-plugin-twig-melody` ([#308](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/308))
 - Updated Prettier options types ([#325](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/325))
+- Don't remove whitespace inside template literals in Svelte ([#332](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/332))
 
 ## [0.6.9] - 2024-11-19
 

diff --git a/src/index.ts b/src/index.ts
@@ -537,7 +537,7 @@ function sortTemplateLiteral(
       // And does not end with a space
       ignoreLast: i < node.expressions.length && !/\s$/.test(quasi.value.raw),
 
-      collapseWhitespace: {
+      collapseWhitespace: collapseWhitespace && {
         start: collapseWhitespace && collapseWhitespace.start && i === 0,
         end:
           collapseWhitespace &&
@@ -553,7 +553,7 @@ function sortTemplateLiteral(
           ignoreFirst: i > 0 && !/^\s/.test(quasi.value.cooked),
           ignoreLast:
             i < node.expressions.length && !/\s$/.test(quasi.value.cooked),
-          collapseWhitespace: {
+          collapseWhitespace: collapseWhitespace && {
             start: collapseWhitespace && collapseWhitespace.start && i === 0,
             end:
               collapseWhitespace &&

diff --git a/tests/plugins.test.ts b/tests/plugins.test.ts
@@ -416,7 +416,6 @@ import Custom from '../components/Custom.astro'
           `<div class="sm:p-0 p-0 {someVar}sm:block md:inline flex" />`,
           `<div class="p-0 sm:p-0 {someVar}sm:block flex md:inline" />`,
         ],
-        ['<div class={`sm:p-0\np-0`} />', '<div class={`p-0 sm:p-0`} />'],
         t`{#await promise()} <div class="${yes}" /> {:then} <div class="${yes}" /> {/await}`,
         t`{#await promise() then} <div class="${yes}" /> {/await}`,
 
@@ -436,6 +435,15 @@ import Custom from '../components/Custom.astro'
 
         // Escapes
         t`<div class={"before:content-['\\\\2248']"}></div>`,
+
+        // Preserve whitespace in template strings
+        // This test has lots of whitespace to ensure that the Svelte
+        // parser doesn't produce invalid syntax as output since it breaks
+        // when changing the length of the text.
+        [
+          `<div\n class={\`underline \n flex\`}></div>`,
+          `<div\n  class={\`flex \n underline\`}\n></div>`,
+        ],
       ],
     },
   },