fix(vite): svelte-scoped: search attributify candidates only on templ…

…ate (#2287)
unocss · Mar 1, 2023 · 9af4936 · 9af4936
1 parent d92ce42
commit 9af4936
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/vite/src/modes/svelte-scoped/transform.ts b/packages/vite/src/modes/svelte-scoped/transform.ts
@@ -145,15 +145,18 @@ export async function transformSvelteSFC(code: string, id: string, uno: UnoGener
     s.overwrite(start, start + match[1].length, `${className}={${token}}`)
   }
 
-  const { matched } = await uno.generate(code, { preflights: false, safelist: false, minify: true })
+  // search attributify candidates only on template
+  const templateCode = code
+    .replace(/<(script|style)[^>]*>[\s\S]*?<\/\1\s*>/g, match => Array(match.length).fill(' ').join(''))
+  const { matched } = await uno.generate(templateCode, { preflights: false, safelist: false, minify: true })
 
   for (const token of matched) {
     const match = token.match(attributifyRE)
     if (match) {
       const [,name, value] = match
       if (!value) {
         let start = 0
-        code.split(/([\s"'`;*]|:\(|\)"|\)\s)/g).forEach((i) => {
+        templateCode.split(/([\s"'`;*]|:\(|\)"|\)\s)/g).forEach((i) => {
           const end = start + i.length
           if (i === name && !processedMap.has(start)) {
             const className = queueCompiledClass([name])
@@ -165,7 +168,7 @@ export async function transformSvelteSFC(code: string, id: string, uno: UnoGener
       }
       else {
         const regex = new RegExp(`(${escapeRegExp(name)}=)(['"])[^\\2]*?${escapeRegExp(value)}[^\\2]*?\\2`, 'g')
-        for (const match of code.matchAll(regex)) {
+        for (const match of templateCode.matchAll(regex)) {
           const escaped = match[1]
           const body = match[0].slice(escaped.length)
           let bodyIndex = body.match(`[\\b\\s'"]${escapeRegExp(value)}[\\b\\s'"]`)?.index ?? -1

diff --git a/test/__snapshots__/svelte-scoped.test.ts.snap b/test/__snapshots__/svelte-scoped.test.ts.snap
@@ -237,6 +237,10 @@ exports[`svelte-scoped > everything 2`] = `
 "
 `;
 
+exports[`svelte-scoped > search attributify candidates only on template 1`] = `undefined`;
+
+exports[`svelte-scoped > search attributify candidates only on template 2`] = `undefined`;
+
 exports[`svelte-scoped > shortcut with icon 1`] = `
 "<span class=\\"logo\\" />
 

diff --git a/test/svelte-scoped.test.ts b/test/svelte-scoped.test.ts
@@ -225,10 +225,13 @@ describe('svelte-scoped', () => {
   })
 
   test('handles backticks and single quotes', async () => {
-    const backticks = await transform('<span class=`font-bold` />', { format: false })
+    const backticks = await transform(`<script></script>
+    <span class=\`font-bold\` />
+    <style></style>`, { format: false })
     expect(backticks).toMatchInlineSnapshot(`
-      "<span class=\`uno-k2ufqh\` />
-      <style>:global(.uno-k2ufqh){font-weight:700;}</style>"
+      "<script></script>
+          <span class=\`uno-k2ufqh\` />
+          <style>:global(.uno-k2ufqh){font-weight:700;}</style>"
     `)
     const singleQuotes = await transform(`
     <span class='font-bold' />`.trim())
@@ -345,6 +348,16 @@ describe('svelte-scoped', () => {
     expect(await transform(code, { combine: false })).toMatchSnapshot()
   })
 
+  test('search attributify candidates only on template', async () => {
+    const code = `<script lang="ts">
+    $: visible
+  </script>
+  
+  <Render {visible}></Render>`.trim()
+    expect(await transform(code)).toMatchSnapshot()
+    expect(await transform(code, { combine: false })).toMatchSnapshot()
+  })
+
   test('everything', async () => {
     const code = `
 <div class="bg-red-500 sm:text-xl dark:hover:bg-green-500 transform scale-5" />