(fix) adjust snipTagContent (#268)

Correctly deal with changing spans
Fixes #261

Author: dummdidumm

src/lib/snipTagContent.ts

@@ -1,8 +1,8 @@
 export const snippedTagContentAttribute = '✂prettier:content✂';
 
 export function snipScriptAndStyleTagContent(source: string): string {
-    const scriptMatchSpans = getMatchIndexes('script');
-    const styleMatchSpans = getMatchIndexes('style');
+    let scriptMatchSpans = getMatchIndexes('script');
+    let styleMatchSpans = getMatchIndexes('style');
 
     return snipTagContent(
         snipTagContent(source, 'script', '{}', styleMatchSpans),
@@ -29,32 +29,54 @@ export function snipScriptAndStyleTagContent(source: string): string {
         placeholder: string,
         otherSpans: [number, number][],
     ) {
-        // Replace valid matches
         const regex = getRegexp(tagName);
+        let newScriptMatchSpans = scriptMatchSpans;
+        let newStyleMatchSpans = styleMatchSpans;
+        // Replace valid matches
         const newSource = _source.replace(regex, (match, attributes, content, index) => {
             if (match.startsWith('<!--') || withinOtherSpan(index)) {
                 return match;
             }
             const encodedContent = Buffer.from(content).toString('base64');
-            return `<${tagName}${attributes} ${snippedTagContentAttribute}="${encodedContent}">${placeholder}</${tagName}>`;
+            const newContent = `<${tagName}${attributes} ${snippedTagContentAttribute}="${encodedContent}">${placeholder}</${tagName}>`;
+
+            // Adjust the spans because the source now has a different content length
+            const lengthDiff = match.length - newContent.length;
+            newScriptMatchSpans = adjustSpans(scriptMatchSpans, newScriptMatchSpans);
+            newStyleMatchSpans = adjustSpans(styleMatchSpans, newStyleMatchSpans);
+            function adjustSpans(
+                oldSpans: [number, number][],
+                newSpans: [number, number][],
+            ): [number, number][] {
+                return oldSpans.map((oldSpan, idx) => {
+                    const newSpan = newSpans[idx];
+                    // Do the check using the old spans because the replace function works
+                    // on the old spans. Replace oldSpans with newSpans afterwards.
+                    if (oldSpan[0] > index) {
+                        // span is after the match -> adjust start and end
+                        return [newSpan[0] - lengthDiff, newSpan[1] - lengthDiff];
+                    } else if (oldSpan[0] === index) {
+                        // span is the match -> adjust end only
+                        return [newSpan[0], newSpan[1] - lengthDiff];
+                    } else {
+                        // span is before the match -> nothing to adjust
+                        return newSpan;
+                    }
+                });
+            }
+
+            return newContent;
         });
 
-        // Adjust the spans because the source now has a different content length
-        adjustSpans(scriptMatchSpans);
-        adjustSpans(styleMatchSpans);
+        // Now that the replacement function ran, we can adjust the spans for the next run
+        scriptMatchSpans = newScriptMatchSpans;
+        styleMatchSpans = newStyleMatchSpans;
 
         return newSource;
 
         function withinOtherSpan(idx: number) {
             return otherSpans.some((otherSpan) => idx > otherSpan[0] && idx < otherSpan[1]);
         }
-        function adjustSpans(spans: [number, number][]) {
-            const lengthDiff = _source.length - newSource.length;
-            spans.forEach((span) => {
-                span[0] -= lengthDiff;
-                span[1] -= lengthDiff;
-            });
-        }
     }
 
     function getRegexp(tagName: string) {

test/printer/samples/script-style-script-snipping.html

@@ -0,0 +1,15 @@
+<script>
+    import MyFunction from "./this_is_a_long_import_path/this_is_a_long_import_name.svelte";
+
+    // a long, and useless comment
+</script>
+
+<style>
+    iframe {
+        width: 100%;
+    }
+</style>
+
+<svelte:head>
+    <script></script>
+</svelte:head>

test/printer/samples/script-style-script-snipping.options.json

@@ -0,0 +1,3 @@
+{
+    "svelteSortOrder": "options-scripts-styles-markup"
+}