From 4685d75964105e78f64ad84a2abf898c7c91e8d8 Mon Sep 17 00:00:00 2001
From: Derek Yang <dereky@umich.edu>
Date: Wed, 4 Dec 2024 23:48:25 -0500
Subject: [PATCH] Fix CSS errors when using HTML escaped quotes

---
 .../server/src/modes/embeddedSupport.ts               | 11 +++++++++++
 .../server/src/test/embedded.test.ts                  |  7 +++++++
 2 files changed, 18 insertions(+)

diff --git a/extensions/html-language-features/server/src/modes/embeddedSupport.ts b/extensions/html-language-features/server/src/modes/embeddedSupport.ts
index 26ef68439da..a6874e043b4 100644
--- a/extensions/html-language-features/server/src/modes/embeddedSupport.ts
+++ b/extensions/html-language-features/server/src/modes/embeddedSupport.ts
@@ -198,6 +198,17 @@ function updateContent(c: EmbeddedRegion, content: string): string {
 	if (!c.attributeValue && c.languageId === 'javascript') {
 		return content.replace(`<!--`, `/* `).replace(`-->`, ` */`);
 	}
+	if (c.languageId === 'css') {
+		const quoteEscape = /(&quot;|&#34;)/g;
+		return content.replace(quoteEscape, (match, _, offset) => {
+			const spaces = ' '.repeat(match.length - 1);
+			const afterChar = content[offset + match.length];
+			if (!afterChar || afterChar.includes(' ')) {
+				return `${spaces}"`;
+			}
+			return `"${spaces}`;
+		});
+	}
 	return content;
 }
 
diff --git a/extensions/html-language-features/server/src/test/embedded.test.ts b/extensions/html-language-features/server/src/test/embedded.test.ts
index 87698f39718..c5b7bca17ea 100644
--- a/extensions/html-language-features/server/src/test/embedded.test.ts
+++ b/extensions/html-language-features/server/src/test/embedded.test.ts
@@ -128,4 +128,11 @@ suite('HTML Embedded Support', () => {
 		assertEmbeddedLanguageContent('<div onKeyUp=return\n/><script>foo();</script>', 'javascript', '             return;\n          foo();         ');
 	});
 
+	test('Script content - HTML escape characters', function (): any {
+		assertEmbeddedLanguageContent('<div style="font-family: &quot;Arial&quot;"></div>', 'css', '         __{font-family: "     Arial     "}       ');
+		assertEmbeddedLanguageContent('<div style="font-family: &#34;Arial&#34;"></div>', 'css', '         __{font-family: "    Arial    "}       ');
+		assertEmbeddedLanguageContent('<div style="font-family: &quot;Arial&#34;"></div>', 'css', '         __{font-family: "     Arial    "}       ');
+		assertEmbeddedLanguageContent('<div style="font-family:&quot; Arial &quot; "></div>', 'css', '         __{font-family:     " Arial      " }       ');
+	});
+
 });