fix(svelte-scoped): escape template literal characters in placeholder…

… replacement (#3253)
unocss · Oct 23, 2023 · c15a29d · c15a29d
1 parent 901f10c
commit c15a29d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/packages/svelte-scoped/src/_vite/global.ts b/packages/svelte-scoped/src/_vite/global.ts
@@ -18,7 +18,10 @@ export function replaceGlobalStylesPlaceholder(code: string, stylesTag: string)
   const matchCapturedQuoteMark = '\\1'
   const QUOTES_WITH_PLACEHOLDER_RE = new RegExp(captureQuoteMark + GLOBAL_STYLES_PLACEHOLDER + matchCapturedQuoteMark)
 
-  const escapedStylesTag = stylesTag.replaceAll(/`/g, '\\`')
+  const escapedStylesTag = stylesTag
+    .replaceAll(/\\(?![`$])/g, '\\\\')
+    .replaceAll(/(?<!\\)([`$])/g, '\\$1')
+
   return code.replace(QUOTES_WITH_PLACEHOLDER_RE, `\`${escapedStylesTag}\``)
   // preset-web-fonts doesn't heed the minify option and sends through newlines (\n) that break if we use regular quotes here. Always using a backtick here is easier than removing newlines, which are actually kind of useful in dev mode. I might consider turning minify off altogether in dev mode.
 }

diff --git a/packages/svelte-scoped/test/fixtures/escaped-unicode.css b/packages/svelte-scoped/test/fixtures/escaped-unicode.css
@@ -0,0 +1,3 @@
+li::before {
+  content: "\200B";
+}
diff --git a/packages/svelte-scoped/test/index.test.ts b/packages/svelte-scoped/test/index.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { preprocess } from 'svelte/compiler'
 import { format as prettier } from 'prettier'
+import fs from 'fs-extra'
 
 // @ts-expect-error missing types
 import prettierSvelte from 'prettier-plugin-svelte'
@@ -9,6 +10,8 @@ import presetIcons from '@unocss/preset-icons'
 import presetTypography from '@unocss/preset-typography'
 import UnocssSveltePreprocess from '../src/preprocess'
 import type { UnocssSveltePreprocessOptions } from '../src/preprocess'
+import { replaceGlobalStylesPlaceholder } from '../src/_vite/global'
+import { GLOBAL_STYLES_PLACEHOLDER } from '../src/_vite/constants'
 
 const defaultOptions: UnocssSveltePreprocessOptions = {
   configOrPath: {
@@ -49,3 +52,16 @@ describe('svelte-preprocessor', () => {
     })
   }
 })
+
+describe('svelte-scoped helpers', () => {
+  it('escape template literal characters in placeholder replacement', async () => {
+    const css = await fs.readFile('packages/svelte-scoped/test/fixtures/escaped-unicode.css', 'utf8')
+
+    const escaped = replaceGlobalStylesPlaceholder(
+      `'${GLOBAL_STYLES_PLACEHOLDER}'`
+      , `<style type="text/css">${css}</style>`,
+    )
+
+    expect(escaped).toContain('"\\\\200B"')
+  })
+})