From 7bfe5a90e6fec01ad0358f02a9ab067c02ee751f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 10 May 2021 09:54:41 +0200
Subject: [PATCH] (fix) don't snip tag inside other tag (#220)

Fixes #219
Fixes the comment case of #70
Closes #72
---
 src/index.ts                                  |  5 +-
 src/lib/snipTagContent.ts                     | 56 ++++++++++++++++---
 test/printer/samples/style-inside-script.html |  3 +
 .../samples/style-unclosed-inside-script.html |  5 ++
 4 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 test/printer/samples/style-inside-script.html
 create mode 100644 test/printer/samples/style-unclosed-inside-script.html

diff --git a/src/index.ts b/src/index.ts
index d1b11f60..af3c060e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,7 @@ import { SupportLanguage, Parser, Printer } from 'prettier';
 import { print } from './print';
 import { ASTNode } from './print/nodes';
 import { embed } from './embed';
-import { snipTagContent } from './lib/snipTagContent';
+import { snipScriptAndStyleTagContent } from './lib/snipTagContent';
 
 function locStart(node: any) {
     return node.start;
@@ -40,8 +40,7 @@ export const parsers: Record<string, Parser> = {
             }
         },
         preprocess: (text, options) => {
-            text = snipTagContent('style', text);
-            text = snipTagContent('script', text, '{}');
+            text = snipScriptAndStyleTagContent(text);
             text = text.trim();
             // Prettier sets the preprocessed text as the originalText in case
             // the Svelte formatter is called directly. In case it's called
diff --git a/src/lib/snipTagContent.ts b/src/lib/snipTagContent.ts
index b61757af..e3557f56 100644
--- a/src/lib/snipTagContent.ts
+++ b/src/lib/snipTagContent.ts
@@ -1,14 +1,54 @@
 export const snippedTagContentAttribute = '✂prettier:content✂';
 
-export function snipTagContent(tagName: string, source: string, placeholder = ''): string {
-    const regex = new RegExp(`<!--[^]*?-->|<${tagName}([^]*?)>([^]*?)<\/${tagName}>`, 'g');
-    return source.replace(regex, (match, attributes, content) => {
-        if (match.startsWith('<!--')) {
-            return match;
+export function snipScriptAndStyleTagContent(source: string): string {
+    const scriptMatchSpans = getMatchIndexes('script');
+    const styleMatchSpans = getMatchIndexes('style');
+
+    return snipTagContent(
+        snipTagContent(source, 'script', '{}', scriptMatchSpans, styleMatchSpans),
+        'style',
+        '',
+        styleMatchSpans,
+        scriptMatchSpans,
+    );
+
+    function getMatchIndexes(tagName: string) {
+        const regex = getRegexp(tagName);
+        const indexes: [number, number][] = [];
+        let match = null;
+        while ((match = regex.exec(source)) != null) {
+            indexes.push([match.index, regex.lastIndex]);
         }
-        const encodedContent = Buffer.from(content).toString('base64');
-        return `<${tagName}${attributes} ${snippedTagContentAttribute}="${encodedContent}">${placeholder}</${tagName}>`;
-    });
+        return indexes;
+    }
+
+    function snipTagContent(
+        _source: string,
+        tagName: string,
+        placeholder: string,
+        ownSpans: [number, number][],
+        otherSpans: [number, number][],
+    ) {
+        const regex = getRegexp(tagName);
+        let idx = 0;
+        return _source.replace(regex, (match, attributes, content) => {
+            if (match.startsWith('<!--') || withinOtherSpan(idx)) {
+                return match;
+            }
+            const encodedContent = Buffer.from(content).toString('base64');
+            return `<${tagName}${attributes} ${snippedTagContentAttribute}="${encodedContent}">${placeholder}</${tagName}>`;
+        });
+
+        function withinOtherSpan(idx: number) {
+            return otherSpans.some(
+                (otherSpan) => ownSpans[idx][0] > otherSpan[0] && ownSpans[idx][1] < otherSpan[1],
+            );
+        }
+    }
+
+    function getRegexp(tagName: string) {
+        return new RegExp(`<!--[^]*?-->|<${tagName}([^]*?)>([^]*?)<\/${tagName}>`, 'g');
+    }
 }
 
 export function hasSnippedContent(text: string) {
diff --git a/test/printer/samples/style-inside-script.html b/test/printer/samples/style-inside-script.html
new file mode 100644
index 00000000..d12761ea
--- /dev/null
+++ b/test/printer/samples/style-inside-script.html
@@ -0,0 +1,3 @@
+<script>
+    const str = "<style> .foo { color: blue; } </style>";
+</script>
diff --git a/test/printer/samples/style-unclosed-inside-script.html b/test/printer/samples/style-unclosed-inside-script.html
new file mode 100644
index 00000000..3f1fbec0
--- /dev/null
+++ b/test/printer/samples/style-unclosed-inside-script.html
@@ -0,0 +1,5 @@
+<script>
+    //<style>
+</script>
+
+<style></style>