From 7010d75165def3c44d906da23ee5a1c848530385 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 16 Apr 2025 12:53:58 +0100
Subject: [PATCH 1/2] test: add failing test for quotes in template
 interpolations

---
 test/template.test.ts | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/test/template.test.ts b/test/template.test.ts
index ce42397..6c9c318 100644
--- a/test/template.test.ts
+++ b/test/template.test.ts
@@ -184,6 +184,32 @@ describe('transform typescript template', () => {
     expect(output).toBe(`'test'`)
   })
 
+  it('handles quotes in interpolations', async () => {
+    expect(
+      await fixture(`
+        <template>
+          <div>
+            <div :class="$test('foobar', \`Foobar 'test'\`)" />
+            <div>{{ $test('foobar', "Foobar 'test'") }}</div>
+            <div>{{ $test('foobar', 'Foobar test') }}</div>
+            <div>{{ $test('foobar', \`Foobar ' " ''" test\`) }}</div>
+          </div>
+        </template>
+        `),
+    ).toMatchInlineSnapshot(`
+      "
+              <template>
+                <div>
+                  <div :class="$test('foobar', \`Foobar \\'test\\'\`)" />
+                  <div>{{ $test("foobar", "Foobar \\"test\\"") }}</div>
+                  <div>{{ $test("foobar", "Foobar test") }}</div>
+                  <div>{{ $test("foobar", \`Foobar ' " ''" test\`) }}</div>
+                </div>
+              </template>
+              "
+    `)
+  })
+
   async function fixture(src: string) {
     const requireFromVue = createRequire(resolveModulePath('vue'))
     const { parse } = requireFromVue('@vue/compiler-dom') as typeof import('@vue/compiler-dom')

From a2eba239983ac1cbc239b4a139421811fe0fe7cd Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Wed, 16 Apr 2025 22:21:25 +0800
Subject: [PATCH 2/2] fix: skip quote replacement in interpolation

---
 src/utils/template.ts | 18 ++++++++++++++++++
 test/template.test.ts |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/utils/template.ts b/src/utils/template.ts
index 52bf568..f3beff0 100644
--- a/src/utils/template.ts
+++ b/src/utils/template.ts
@@ -164,6 +164,10 @@ export async function transpileVueTemplate(
   for (const item of expressions) {
     item.replacement = transformMap.get(item) ?? item.src
 
+    if (!shouldReplaceQuote(item)) {
+      continue
+    }
+
     // the source should only have one of the quotes
     const sourceQuote = getSourceQuote(
       content,
@@ -212,6 +216,20 @@ export function replaceQuote(code: string, target: string, replace: string): str
   return res
 }
 
+function shouldReplaceQuote(expression: Expression): boolean {
+  if (!expression.src.includes(`'`) && !expression.src.includes(`"`)) {
+    return false
+  }
+
+  // skip the expression in the interpolation, it doesn't care about the quote
+  const secondLastTrack = expression.track.at(-2)
+  if (secondLastTrack?.type === NodeTypes.INTERPOLATION) {
+    return false
+  }
+
+  return true
+}
+
 function getSourceQuote(code: string, start: number, end: number): string | null {
   const source = code.slice(start, end)
   const quotes = ['"', '\'']
diff --git a/test/template.test.ts b/test/template.test.ts
index 6c9c318..815dbbf 100644
--- a/test/template.test.ts
+++ b/test/template.test.ts
@@ -201,7 +201,7 @@ describe('transform typescript template', () => {
               <template>
                 <div>
                   <div :class="$test('foobar', \`Foobar \\'test\\'\`)" />
-                  <div>{{ $test("foobar", "Foobar \\"test\\"") }}</div>
+                  <div>{{ $test("foobar", "Foobar 'test'") }}</div>
                   <div>{{ $test("foobar", "Foobar test") }}</div>
                   <div>{{ $test("foobar", \`Foobar ' " ''" test\`) }}</div>
                 </div>