From 0cd2213e6b9c792e4b7670c6edc1bfe838982f5d Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 26 Jan 2023 16:49:10 +0800
Subject: [PATCH] wip(vitest-migration): compiler-sfc tests passing

---
 .../__snapshots__/compileScript.spec.ts.snap  | 268 +++++++++---------
 .../compileScriptPropsTransform.spec.ts.snap  |  42 +--
 .../compileScriptRefTransform.spec.ts.snap    |  14 +-
 .../compileTemplate.spec.ts.snap              |  26 +-
 .../__snapshots__/cssVars.spec.ts.snap        |  54 ++--
 .../templateTransformAssetUrl.spec.ts.snap    |  90 +++---
 .../templateTransformSrcset.spec.ts.snap      | 216 +++++++-------
 .../compiler-sfc/__tests__/cssVars.spec.ts    |   2 +-
 8 files changed, 356 insertions(+), 356 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index a4306b42ec1..47d401eeea7 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`SFC analyze <script> bindings auto name inference basic 1`] = `
+exports[`SFC analyze <script> bindings > auto name inference > basic 1`] = `
 "export default {
   __name: 'FooBar',
   setup(__props, { expose }) {
@@ -12,7 +12,7 @@ return { a }
 }"
 `;
 
-exports[`SFC analyze <script> bindings auto name inference do not overwrite manual name (call) 1`] = `
+exports[`SFC analyze <script> bindings > auto name inference > do not overwrite manual name (call) 1`] = `
 "import { defineComponent } from 'vue'
         const __default__ = defineComponent({
           name: 'Baz'
@@ -28,7 +28,7 @@ return { a, defineComponent }
 })"
 `;
 
-exports[`SFC analyze <script> bindings auto name inference do not overwrite manual name (object) 1`] = `
+exports[`SFC analyze <script> bindings > auto name inference > do not overwrite manual name (object) 1`] = `
 "const __default__ = {
           name: 'Baz'
         }
@@ -43,7 +43,7 @@ return { a }
 })"
 `;
 
-exports[`SFC compile <script setup> <script> after <script setup> the script content not end with \`\\n\` 1`] = `
+exports[`SFC compile <script setup> > <script> after <script setup> the script content not end with \`\\n\` 1`] = `
 "import { x } from './x'
     const n = 1
 
@@ -58,7 +58,7 @@ return { n, get x() { return x } }
 }"
 `;
 
-exports[`SFC compile <script setup> <script> and <script setup> co-usage script first 1`] = `
+exports[`SFC compile <script setup> > <script> and <script setup> co-usage > script first 1`] = `
 "import { x } from './x'
       
       export const n = 1
@@ -77,7 +77,7 @@ return { n, get x() { return x } }
 })"
 `;
 
-exports[`SFC compile <script setup> <script> and <script setup> co-usage script setup first 1`] = `
+exports[`SFC compile <script setup> > <script> and <script setup> co-usage > script setup first 1`] = `
 "import { x } from './x'
       
       export const n = 1
@@ -96,12 +96,12 @@ return { n, get x() { return x } }
 })"
 `;
 
-exports[`SFC compile <script setup> <script> and <script setup> co-usage script setup first, lang="ts", script block content export default 1`] = `
+exports[`SFC compile <script setup> > <script> and <script setup> co-usage > script setup first, lang="ts", script block content export default 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { x } from './x'
       
       const __default__ = {
-        name: "test"
+        name: \\"test\\"
       }
       
 
@@ -118,7 +118,7 @@ return { get x() { return x } }
 })"
 `;
 
-exports[`SFC compile <script setup> <script> and <script setup> co-usage script setup first, named default export 1`] = `
+exports[`SFC compile <script setup> > <script> and <script setup> co-usage > script setup first, named default export 1`] = `
 "import { x } from './x'
       
       export const n = 1
@@ -140,7 +140,7 @@ return { n, def, get x() { return x } }
 })"
 `;
 
-exports[`SFC compile <script setup> <script> and <script setup> co-usage spaces in ExportDefaultDeclaration node with many spaces and newline 1`] = `
+exports[`SFC compile <script setup> > <script> and <script setup> co-usage > spaces in ExportDefaultDeclaration node > with many spaces and newline 1`] = `
 "import { x } from './x'
         
         export const n = 1
@@ -160,7 +160,7 @@ return { n, get x() { return x } }
 })"
 `;
 
-exports[`SFC compile <script setup> <script> and <script setup> co-usage spaces in ExportDefaultDeclaration node with minimal spaces 1`] = `
+exports[`SFC compile <script setup> > <script> and <script setup> co-usage > spaces in ExportDefaultDeclaration node > with minimal spaces 1`] = `
 "import { x } from './x'
         
         export const n = 1
@@ -180,7 +180,7 @@ return { n, get x() { return x } }
 })"
 `;
 
-exports[`SFC compile <script setup> async/await detection expression statement 1`] = `
+exports[`SFC compile <script setup> > async/await detection > expression statement 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -199,7 +199,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection multiple \`if for\` nested statements 1`] = `
+exports[`SFC compile <script setup> > async/await detection > multiple \`if for\` nested statements 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -234,7 +234,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection multiple \`if while\` nested statements 1`] = `
+exports[`SFC compile <script setup> > async/await detection > multiple \`if while\` nested statements 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -289,7 +289,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection multiple \`if\` nested statements 1`] = `
+exports[`SFC compile <script setup> > async/await detection > multiple \`if\` nested statements 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -366,7 +366,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection nested await 1`] = `
+exports[`SFC compile <script setup> > async/await detection > nested await 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -390,7 +390,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection nested await 2`] = `
+exports[`SFC compile <script setup> > async/await detection > nested await 2`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -414,7 +414,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection nested await 3`] = `
+exports[`SFC compile <script setup> > async/await detection > nested await 3`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -443,7 +443,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection nested leading await in expression statement 1`] = `
+exports[`SFC compile <script setup> > async/await detection > nested leading await in expression statement 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -469,7 +469,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection nested statements 1`] = `
+exports[`SFC compile <script setup> > async/await detection > nested statements 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -492,7 +492,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection ref 1`] = `
+exports[`SFC compile <script setup> > async/await detection > ref 1`] = `
 "import { withAsyncContext as _withAsyncContext, ref as _ref } from 'vue'
 
 export default {
@@ -512,7 +512,7 @@ return { a }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection should ignore await inside functions 1`] = `
+exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 1`] = `
 "export default {
   setup(__props, { expose }) {
   expose();
@@ -523,7 +523,7 @@ return { foo }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection should ignore await inside functions 2`] = `
+exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 2`] = `
 "export default {
   setup(__props, { expose }) {
   expose();
@@ -534,7 +534,7 @@ return { foo }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection should ignore await inside functions 3`] = `
+exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 3`] = `
 "export default {
   setup(__props, { expose }) {
   expose();
@@ -545,7 +545,7 @@ return { obj }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection should ignore await inside functions 4`] = `
+exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 4`] = `
 "export default {
   setup(__props, { expose }) {
   expose();
@@ -556,7 +556,7 @@ return { cls }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection single line conditions 1`] = `
+exports[`SFC compile <script setup> > async/await detection > single line conditions 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -575,7 +575,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> async/await detection variable 1`] = `
+exports[`SFC compile <script setup> > async/await detection > variable 1`] = `
 "import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
@@ -595,7 +595,7 @@ return { a }
 }"
 `;
 
-exports[`SFC compile <script setup> binding analysis for destructure 1`] = `
+exports[`SFC compile <script setup> > binding analysis for destructure 1`] = `
 "export default {
   setup(__props, { expose }) {
   expose();
@@ -608,7 +608,7 @@ return { foo, bar, baz, y, z }
 }"
 `;
 
-exports[`SFC compile <script setup> defineEmits() 1`] = `
+exports[`SFC compile <script setup> > defineEmits() 1`] = `
 "export default {
   emits: ['foo', 'bar'],
   setup(__props, { expose, emit: myEmit }) {
@@ -622,7 +622,7 @@ return { myEmit }
 }"
 `;
 
-exports[`SFC compile <script setup> defineExpose() 1`] = `
+exports[`SFC compile <script setup> > defineExpose() 1`] = `
 "export default {
   setup(__props, { expose }) {
 
@@ -634,7 +634,7 @@ return {  }
 }"
 `;
 
-exports[`SFC compile <script setup> defineProps w/ external definition 1`] = `
+exports[`SFC compile <script setup> > defineProps w/ external definition 1`] = `
 "import { propsModel } from './props'
     
 export default {
@@ -652,7 +652,7 @@ return { props, get propsModel() { return propsModel } }
 }"
 `;
 
-exports[`SFC compile <script setup> defineProps w/ leading code 1`] = `
+exports[`SFC compile <script setup> > defineProps w/ leading code 1`] = `
 "import { x } from './x'
     
 export default {
@@ -669,7 +669,7 @@ return { props, get x() { return x } }
 }"
 `;
 
-exports[`SFC compile <script setup> defineProps() 1`] = `
+exports[`SFC compile <script setup> > defineProps() 1`] = `
 "export default {
   props: {
   foo: String
@@ -688,7 +688,7 @@ return { props, bar }
 }"
 `;
 
-exports[`SFC compile <script setup> defineProps/defineEmits in multi-variable declaration (full removal) 1`] = `
+exports[`SFC compile <script setup> > defineProps/defineEmits in multi-variable declaration (full removal) 1`] = `
 "export default {
   props: ['item'],
   emits: ['a'],
@@ -705,7 +705,7 @@ return { props, emit }
 }"
 `;
 
-exports[`SFC compile <script setup> defineProps/defineEmits in multi-variable declaration 1`] = `
+exports[`SFC compile <script setup> > defineProps/defineEmits in multi-variable declaration 1`] = `
 "export default {
   props: ['item'],
   emits: ['a'],
@@ -722,7 +722,7 @@ return { props, a, emit }
 }"
 `;
 
-exports[`SFC compile <script setup> defineProps/defineEmits in multi-variable declaration fix #6757  1`] = `
+exports[`SFC compile <script setup> > defineProps/defineEmits in multi-variable declaration fix #6757  1`] = `
 "export default {
   props: ['item'],
   emits: ['a'],
@@ -739,7 +739,7 @@ return { a, props, emit }
 }"
 `;
 
-exports[`SFC compile <script setup> dev mode import usage check TS annotations 1`] = `
+exports[`SFC compile <script setup> > dev mode import usage check > TS annotations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { Foo, Bar, Baz, Qux, Fred } from './x'
         
@@ -756,7 +756,7 @@ return { a, b, get Baz() { return Baz } }
 })"
 `;
 
-exports[`SFC compile <script setup> dev mode import usage check attribute expressions 1`] = `
+exports[`SFC compile <script setup> > dev mode import usage check > attribute expressions 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { bar, baz } from './x'
         
@@ -772,7 +772,7 @@ return { cond, get bar() { return bar }, get baz() { return baz } }
 })"
 `;
 
-exports[`SFC compile <script setup> dev mode import usage check components 1`] = `
+exports[`SFC compile <script setup> > dev mode import usage check > components 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { FooBar, FooBaz, FooQux, foo } from './x'
         
@@ -788,7 +788,7 @@ return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux },
 })"
 `;
 
-exports[`SFC compile <script setup> dev mode import usage check directive 1`] = `
+exports[`SFC compile <script setup> > dev mode import usage check > directive 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { vMyDir } from './x'
         
@@ -803,7 +803,7 @@ return { get vMyDir() { return vMyDir } }
 })"
 `;
 
-exports[`SFC compile <script setup> dev mode import usage check js template string interpolations 1`] = `
+exports[`SFC compile <script setup> > dev mode import usage check > js template string interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { VAR, VAR2, VAR3 } from './x'
         
@@ -818,7 +818,7 @@ return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
 })"
 `;
 
-exports[`SFC compile <script setup> dev mode import usage check last tag 1`] = `
+exports[`SFC compile <script setup> > dev mode import usage check > last tag 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { FooBaz, Last } from './x'
         
@@ -833,7 +833,7 @@ return { get FooBaz() { return FooBaz }, get Last() { return Last } }
 })"
 `;
 
-exports[`SFC compile <script setup> dev mode import usage check vue interpolations 1`] = `
+exports[`SFC compile <script setup> > dev mode import usage check > vue interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { x, y, z, x$y } from './x'
       
@@ -848,7 +848,7 @@ return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
 })"
 `;
 
-exports[`SFC compile <script setup> errors should allow defineProps/Emit() referencing imported binding 1`] = `
+exports[`SFC compile <script setup> > errors > should allow defineProps/Emit() referencing imported binding 1`] = `
 "import { bar } from './bar'
         
 export default {
@@ -872,7 +872,7 @@ return { get bar() { return bar } }
 }"
 `;
 
-exports[`SFC compile <script setup> errors should allow defineProps/Emit() referencing scope var 1`] = `
+exports[`SFC compile <script setup> > errors > should allow defineProps/Emit() referencing scope var 1`] = `
 "export default {
   props: {
             foo: {
@@ -895,7 +895,7 @@ return { bar }
 }"
 `;
 
-exports[`SFC compile <script setup> imports dedupe between user & helper 1`] = `
+exports[`SFC compile <script setup> > imports > dedupe between user & helper 1`] = `
 "import { ref as _ref } from 'vue'
 import { ref } from 'vue'
       
@@ -911,7 +911,7 @@ return { foo, ref }
 }"
 `;
 
-exports[`SFC compile <script setup> imports import dedupe between <script> and <script setup> 1`] = `
+exports[`SFC compile <script setup> > imports > import dedupe between <script> and <script setup> 1`] = `
 "import { x } from './x'
         
 export default {
@@ -926,7 +926,7 @@ return { get x() { return x } }
 }"
 `;
 
-exports[`SFC compile <script setup> imports should allow defineProps/Emit at the start of imports 1`] = `
+exports[`SFC compile <script setup> > imports > should allow defineProps/Emit at the start of imports 1`] = `
 "import { ref } from 'vue'
       
 export default {
@@ -945,7 +945,7 @@ return { r, ref }
 }"
 `;
 
-exports[`SFC compile <script setup> imports should extract comment for import or type declarations 1`] = `
+exports[`SFC compile <script setup> > imports > should extract comment for import or type declarations 1`] = `
 "import a from 'a' // comment
         import b from 'b'
         
@@ -960,7 +960,7 @@ return { get a() { return a }, get b() { return b } }
 }"
 `;
 
-exports[`SFC compile <script setup> imports should hoist and expose imports 1`] = `
+exports[`SFC compile <script setup> > imports > should hoist and expose imports 1`] = `
 "import { ref } from 'vue'
           import 'foo/css'
         
@@ -975,8 +975,8 @@ return { ref }
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
-"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > avoid unref() when necessary 1`] = `
+"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         import Foo, { bar } from './Foo.vue'
@@ -1000,8 +1000,8 @@ return (_ctx, _cache) => {
       ]),
       _: 1 /* STABLE */
     }),
-    _createElementVNode("div", { onClick: fn }, _toDisplayString(count.value) + " " + _toDisplayString(constant) + " " + _toDisplayString(_unref(maybe)) + " " + _toDisplayString(_unref(lett)) + " " + _toDisplayString(_unref(other)), 1 /* TEXT */),
-    _createTextVNode(" " + _toDisplayString(tree.foo()), 1 /* TEXT */)
+    _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */),
+    _createTextVNode(\\" \\" + _toDisplayString(tree.foo()), 1 /* TEXT */)
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -1009,8 +1009,8 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode referencing scope components and directives 1`] = `
-"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
+"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import ChildComp from './Child.vue'
         import SomeOtherComp from './Other.vue'
@@ -1022,7 +1022,7 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
+    _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
       [_unref(vMyDir)]
     ]),
     _createVNode(ChildComp),
@@ -1034,10 +1034,10 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode should work 1`] = `
-"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "static", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
 
 import { ref } from 'vue'
         
@@ -1048,7 +1048,7 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
+    _createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */),
     _hoisted_1
   ], 64 /* STABLE_FRAGMENT */))
 }
@@ -1057,8 +1057,8 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode ssr codegen 1`] = `
-"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
+exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
+"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
 
 import { ref } from 'vue'
         
@@ -1070,7 +1070,7 @@ export default {
         
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
-  "--xxxxxxxx-count": (count.value)
+  \\"--xxxxxxxx-count\\": (count.value)
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)
@@ -1085,8 +1085,8 @@ return (_ctx, _push, _parent, _attrs) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode template assignment expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
+"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -1100,28 +1100,28 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[5] || (_cache[5] = () => {
               let a = '' + _unref(lett)
               _isRef(v) ? v.value = a : v = a
            })
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[6] || (_cache[6] = () => {
               // nested scopes
               (()=>{
@@ -1142,8 +1142,8 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode template destructure assignment codegen 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -1157,13 +1157,13 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
     })
   ], 64 /* STABLE_FRAGMENT */))
@@ -1173,8 +1173,8 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode template update expression codegen 1`] = `
-"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
+"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -1187,22 +1187,22 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[0] || (_cache[0] = $event => (count.value++))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[1] || (_cache[1] = $event => (--count.value))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[2] || (_cache[2] = $event => (maybe.value++))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[3] || (_cache[3] = $event => (--maybe.value))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[4] || (_cache[4] = $event => (_isRef(lett) ? lett.value++ : lett++))
     }),
-    _createElementVNode("div", {
+    _createElementVNode(\\"div\\", {
       onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? --lett.value : --lett))
     })
   ], 64 /* STABLE_FRAGMENT */))
@@ -1212,8 +1212,8 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode v-model codegen 1`] = `
-"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`SFC compile <script setup> > inlineTemplate mode > v-model codegen 1`] = `
+"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 import { ref } from 'vue'
         
@@ -1226,18 +1226,18 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _withDirectives(_createElementVNode("input", {
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((count).value = $event))
+    _withDirectives(_createElementVNode(\\"input\\", {
+      \\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((count).value = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, count.value]
     ]),
-    _withDirectives(_createElementVNode("input", {
-      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
+    _withDirectives(_createElementVNode(\\"input\\", {
+      \\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(maybe)]
     ]),
-    _withDirectives(_createElementVNode("input", {
-      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
+    _withDirectives(_createElementVNode(\\"input\\", {
+      \\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
     }, null, 512 /* NEED_PATCH */), [
       [_vModelText, _unref(lett)]
     ])
@@ -1248,7 +1248,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`SFC compile <script setup> inlineTemplate mode with defineExpose() 1`] = `
+exports[`SFC compile <script setup> > inlineTemplate mode > with defineExpose() 1`] = `
 "export default {
   setup(__props, { expose }) {
 
@@ -1261,7 +1261,7 @@ return () => {}
 }"
 `;
 
-exports[`SFC compile <script setup> should expose top level declarations 1`] = `
+exports[`SFC compile <script setup> > should expose top level declarations 1`] = `
 "import { x } from './x'
       
       import { xx } from './x'
@@ -1286,7 +1286,7 @@ return { get aa() { return aa }, set aa(v) { aa = v }, bb, cc, dd, get a() { ret
 }"
 `;
 
-exports[`SFC compile <script setup> with TypeScript const Enum 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > const Enum 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 const enum Foo { A = 123 }
         
@@ -1301,12 +1301,12 @@ return { Foo }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exported interface) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (exported interface) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export interface Emits { (e: 'foo' | 'bar'): void }
       
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar"],
+  emits: [\\"foo\\", \\"bar\\"],
   setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1318,12 +1318,12 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (exported type alias) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (exported type alias) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export type Emits = { (e: 'foo' | 'bar'): void }
       
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar"],
+  emits: [\\"foo\\", \\"bar\\"],
   setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1335,7 +1335,7 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (interface ts type) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (interface ts type) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Emits { (e: 'foo'): void }
       
@@ -1352,12 +1352,12 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (interface) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (interface) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Emits { (e: 'foo' | 'bar'): void }
       
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar"],
+  emits: [\\"foo\\", \\"bar\\"],
   setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1369,12 +1369,12 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referenced exported function type) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (referenced exported function type) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export type Emits = (e: 'foo' | 'bar') => void
       
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar"],
+  emits: [\\"foo\\", \\"bar\\"],
   setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1386,12 +1386,12 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (referenced function type) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (referenced function type) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Emits = (e: 'foo' | 'bar') => void
       
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar"],
+  emits: [\\"foo\\", \\"bar\\"],
   setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1403,12 +1403,12 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type alias) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (type alias) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Emits = { (e: 'foo' | 'bar'): void }
       
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar"],
+  emits: [\\"foo\\", \\"bar\\"],
   setup(__props, { expose, emit }: { emit: ({ (e: 'foo' | 'bar'): void }), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1420,11 +1420,11 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type (type literal w/ call signatures) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type (type literal w/ call signatures) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar", "baz"],
+  emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
   setup(__props, { expose, emit }: { emit: ({(e: 'foo' | 'bar'): void; (e: 'baz', id: number): void;}), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1436,11 +1436,11 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineEmits w/ type 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineEmits w/ type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
-  emits: ["foo", "bar"],
+  emits: [\\"foo\\", \\"bar\\"],
   setup(__props, { expose, emit }: { emit: ((e: 'foo' | 'bar') => void), expose: any, slots: any, attrs: any }) {
   expose();
 
@@ -1452,7 +1452,7 @@ return { emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ exported interface 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps w/ exported interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export interface Props { x?: number }
       
@@ -1471,7 +1471,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ exported interface in normal script 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps w/ exported interface in normal script 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
         export interface Props { x?: number }
@@ -1491,7 +1491,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ exported type alias 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps w/ exported type alias 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export type Props = { x?: number }
       
@@ -1510,7 +1510,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ extends interface 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps w/ extends interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Bar extends Foo { y?: number }
         interface Props extends Bar {
@@ -1537,7 +1537,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ interface 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps w/ interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Props { x?: number }
       
@@ -1556,7 +1556,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ type 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps w/ type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Test {}
 
@@ -1603,7 +1603,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ type alias 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps w/ type alias 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 type Props = { x?: number }
       
@@ -1622,7 +1622,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps/Emit w/ runtime options 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > defineProps/Emit w/ runtime options 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
@@ -1642,7 +1642,7 @@ return { props, emit }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript hoist type declarations 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > hoist type declarations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 export interface Foo {}
         type Bar = {}
@@ -1658,7 +1658,7 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript import type 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > import type 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import type { Foo } from './main.ts'
         import { type Bar, Baz } from './main.ts'
@@ -1674,7 +1674,7 @@ return { get Baz() { return Baz } }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript runtime Enum 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > runtime Enum 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 enum Foo { A = 123 }
         
@@ -1689,13 +1689,13 @@ return { Foo }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript runtime Enum in normal script 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > runtime Enum in normal script 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 enum Foo { A = 123 }
         
-          export enum D { D = "D" }
-          const enum C { C = "C" }
-          enum B { B = "B" }
+          export enum D { D = \\"D\\" }
+          const enum C { C = \\"C\\" }
+          enum B { B = \\"B\\" }
         
 export default /*#__PURE__*/_defineComponent({
   setup(__props, { expose }) {
@@ -1708,7 +1708,7 @@ return { D, C, B, Foo }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript withDefaults (dynamic) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > withDefaults (dynamic) 1`] = `
 "import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
 import { defaults } from './foo'
       
@@ -1735,7 +1735,7 @@ return { props, get defaults() { return defaults } }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript withDefaults (dynamic) w/ production mode 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > withDefaults (dynamic) w/ production mode 1`] = `
 "import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
 import { defaults } from './foo'
       
@@ -1764,7 +1764,7 @@ return { props, get defaults() { return defaults } }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript withDefaults (static) 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > withDefaults (static) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
@@ -1790,7 +1790,7 @@ return { props }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript withDefaults (static) w/ production mode 1`] = `
+exports[`SFC compile <script setup> > with TypeScript > withDefaults (static) w/ production mode 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index 77048203996..48040409d49 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`sfc props transform $$() escape 1`] = `
+exports[`sfc props transform > $$() escape 1`] = `
 "import { toRef as _toRef } from 'vue'
 
 export default {
@@ -20,8 +20,8 @@ return () => {}
 }"
 `;
 
-exports[`sfc props transform aliasing 1`] = `
-"import { toDisplayString as _toDisplayString } from "vue"
+exports[`sfc props transform > aliasing 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
 
 
 export default {
@@ -40,8 +40,8 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`sfc props transform basic usage 1`] = `
-"import { toDisplayString as _toDisplayString } from "vue"
+exports[`sfc props transform > basic usage 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
 
 
 export default {
@@ -59,8 +59,8 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`sfc props transform computed static key 1`] = `
-"import { toDisplayString as _toDisplayString } from "vue"
+exports[`sfc props transform > computed static key 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
 
 
 export default {
@@ -78,7 +78,7 @@ return (_ctx, _cache) => {
 }"
 `;
 
-exports[`sfc props transform default values w/ runtime declaration 1`] = `
+exports[`sfc props transform > default values w/ runtime declaration 1`] = `
 "import { mergeDefaults as _mergeDefaults } from 'vue'
 
 export default {
@@ -96,7 +96,7 @@ return () => {}
 }"
 `;
 
-exports[`sfc props transform default values w/ type declaration 1`] = `
+exports[`sfc props transform > default values w/ type declaration 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
@@ -114,7 +114,7 @@ return () => {}
 })"
 `;
 
-exports[`sfc props transform default values w/ type declaration, prod mode 1`] = `
+exports[`sfc props transform > default values w/ type declaration, prod mode 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
@@ -136,8 +136,8 @@ return () => {}
 })"
 `;
 
-exports[`sfc props transform multiple variable declarations 1`] = `
-"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`sfc props transform > multiple variable declarations 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 
 export default {
@@ -147,14 +147,14 @@ export default {
       const bar = 'fish', hello = 'world'
       
 return (_ctx, _cache) => {
-  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.foo) + " " + _toDisplayString(hello) + " " + _toDisplayString(bar), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
 }
 }
 
 }"
 `;
 
-exports[`sfc props transform nested scope 1`] = `
+exports[`sfc props transform > nested scope 1`] = `
 "export default {
   props: ['foo', 'bar'],
   setup(__props) {
@@ -171,8 +171,8 @@ return () => {}
 }"
 `;
 
-exports[`sfc props transform non-identifier prop names 1`] = `
-"import { toDisplayString as _toDisplayString } from "vue"
+exports[`sfc props transform > non-identifier prop names 1`] = `
+"import { toDisplayString as _toDisplayString } from \\"vue\\"
 
 
 export default {
@@ -180,24 +180,24 @@ export default {
   setup(__props) {
 
       
-      let x = __props["foo.bar"]
+      let x = __props[\\"foo.bar\\"]
       
 return (_ctx, _cache) => {
-  return _toDisplayString(__props["foo.bar"])
+  return _toDisplayString(__props[\\"foo.bar\\"])
 }
 }
 
 }"
 `;
 
-exports[`sfc props transform rest spread 1`] = `
+exports[`sfc props transform > rest spread 1`] = `
 "import { createPropsRestProxy as _createPropsRestProxy } from 'vue'
 
 export default {
   props: ['foo', 'bar', 'baz'],
   setup(__props) {
 
-const rest = _createPropsRestProxy(__props, ["foo","bar"]);
+const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]);
 
       
       
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
index 2e149fea60f..4c563fe3a86 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`sfc ref transform $ unwrapping 1`] = `
+exports[`sfc ref transform > $ unwrapping 1`] = `
 "import { ref, shallowRef } from 'vue'
     
 export default {
@@ -21,7 +21,7 @@ return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d
 }"
 `;
 
-exports[`sfc ref transform $ref & $shallowRef declarations 1`] = `
+exports[`sfc ref transform > $ref & $shallowRef declarations 1`] = `
 "import { ref as _ref, shallowRef as _shallowRef } from 'vue'
 
 export default {
@@ -42,7 +42,7 @@ return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d
 }"
 `;
 
-exports[`sfc ref transform usage /w typescript 1`] = `
+exports[`sfc ref transform > usage /w typescript 1`] = `
 "import { ref as _ref, defineComponent as _defineComponent } from 'vue'
 
 export default /*#__PURE__*/_defineComponent({
@@ -58,7 +58,7 @@ return { msg, bar }
 })"
 `;
 
-exports[`sfc ref transform usage in normal <script> 1`] = `
+exports[`sfc ref transform > usage in normal <script> 1`] = `
 "import { ref as _ref } from 'vue'
 
     export default {
@@ -71,7 +71,7 @@ exports[`sfc ref transform usage in normal <script> 1`] = `
     "
 `;
 
-exports[`sfc ref transform usage with normal <script> (has macro usage) + <script setup> (no macro usage) 1`] = `
+exports[`sfc ref transform > usage with normal <script> (has macro usage) + <script setup> (no macro usage) 1`] = `
 "import { ref as _ref } from 'vue'
 
     let data = _ref()
@@ -88,7 +88,7 @@ return { data }
 }"
 `;
 
-exports[`sfc ref transform usage with normal <script> + <script setup> 1`] = `
+exports[`sfc ref transform > usage with normal <script> + <script setup> 1`] = `
 "import { ref as _ref } from 'vue'
 
     let a = _ref(0)
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
index 05540795b28..51bedeba021 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
 exports[`dynamic v-on + static v-on should merged 1`] = `
-"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("input", _mergeProps({
+  return (_openBlock(), _createElementBlock(\\"input\\", _mergeProps({
     onBlur: _cache[0] || (_cache[0] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args)))
   }, {
     [_toHandlerKey(_ctx.validateEvent)]: _cache[1] || (_cache[1] = (...args) => (_ctx.onValidateEvent && _ctx.onValidateEvent(...args)))
@@ -13,19 +13,19 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`should not hoist srcset URLs in SSR mode 1`] = `
-"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
-import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
+"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
+import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
 import _imports_0 from './img/foo.svg'
 import _imports_1 from './img/bar.svg'
 
 
 export function ssrRender(_ctx, _push, _parent, _attrs) {
-  const _component_router_link = _resolveComponent("router-link")
+  const _component_router_link = _resolveComponent(\\"router-link\\")
 
   _push(\`<!--[--><picture><source\${
-    _ssrRenderAttr("srcset", _imports_0)
+    _ssrRenderAttr(\\"srcset\\", _imports_0)
   }><img\${
-    _ssrRenderAttr("src", _imports_0)
+    _ssrRenderAttr(\\"src\\", _imports_0)
   }></picture>\`)
   _push(_ssrRenderComponent(_component_router_link, null, {
     default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -33,21 +33,21 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<picture\${
           _scopeId
         }><source\${
-          _ssrRenderAttr("srcset", _imports_1)
+          _ssrRenderAttr(\\"srcset\\", _imports_1)
         }\${
           _scopeId
         }><img\${
-          _ssrRenderAttr("src", _imports_1)
+          _ssrRenderAttr(\\"src\\", _imports_1)
         }\${
           _scopeId
         }></picture>\`)
       } else {
         return [
-          _createVNode("picture", null, [
-            _createVNode("source", {
+          _createVNode(\\"picture\\", null, [
+            _createVNode(\\"source\\", {
               srcset: _imports_1
             }),
-            _createVNode("img", { src: _imports_1 })
+            _createVNode(\\"img\\", { src: _imports_1 })
           ])
         ]
       }
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
index 32980894ad6..32f3fc0a57b 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`CSS vars injection codegen <script> w/ default export 1`] = `
+exports[`CSS vars injection > codegen > <script> w/ default export 1`] = `
 "const __default__ = { setup() {} }
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  "xxxxxxxx-color": (_ctx.color)
+  \\"xxxxxxxx-color\\": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -15,7 +15,7 @@ __default__.setup = __setup__
 export default __default__"
 `;
 
-exports[`CSS vars injection codegen <script> w/ default export in strings/comments 1`] = `
+exports[`CSS vars injection > codegen > <script> w/ default export in strings/comments 1`] = `
 "
           // export default {}
           const __default__ = {}
@@ -23,7 +23,7 @@ exports[`CSS vars injection codegen <script> w/ default export in strings/commen
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  "xxxxxxxx-color": (_ctx.color)
+  \\"xxxxxxxx-color\\": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -33,13 +33,13 @@ __default__.setup = __setup__
 export default __default__"
 `;
 
-exports[`CSS vars injection codegen <script> w/ no default export 1`] = `
+exports[`CSS vars injection > codegen > <script> w/ no default export 1`] = `
 "const a = 1
 const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  "xxxxxxxx-color": (_ctx.color)
+  \\"xxxxxxxx-color\\": (_ctx.color)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -49,7 +49,7 @@ __default__.setup = __setup__
 export default __default__"
 `;
 
-exports[`CSS vars injection codegen should ignore comments 1`] = `
+exports[`CSS vars injection > codegen > should ignore comments 1`] = `
 "import { useCssVars as _useCssVars, unref as _unref } from 'vue'
 
 export default {
@@ -57,7 +57,7 @@ export default {
   expose();
 
 _useCssVars(_ctx => ({
-  "xxxxxxxx-width": (width)
+  \\"xxxxxxxx-width\\": (width)
 }))
 const color = 'red';const width = 100
 return { color, width }
@@ -66,7 +66,7 @@ return { color, width }
 }"
 `;
 
-exports[`CSS vars injection codegen should work with w/ complex expression 1`] = `
+exports[`CSS vars injection > codegen > should work with w/ complex expression 1`] = `
 "import { useCssVars as _useCssVars, unref as _unref } from 'vue'
 
 export default {
@@ -74,10 +74,10 @@ export default {
   expose();
 
 _useCssVars(_ctx => ({
-  "xxxxxxxx-foo": (_unref(foo)),
-  "xxxxxxxx-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'),
-  "xxxxxxxx-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'),
-  "xxxxxxxx-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
+  \\"xxxxxxxx-foo\\": (_unref(foo)),
+  \\"xxxxxxxx-foo\\\\ \\\\+\\\\ \\\\'px\\\\'\\": (_unref(foo) + 'px'),
+  \\"xxxxxxxx-\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\ \\\\/\\\\ 2\\\\ \\\\+\\\\ \\\\'px\\\\'\\": ((_unref(a) + _unref(b)) / 2 + 'px'),
+  \\"xxxxxxxx-\\\\(\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\)\\\\ \\\\/\\\\ \\\\(2\\\\ \\\\*\\\\ a\\\\)\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
 }))
 
         let a = 100
@@ -90,7 +90,7 @@ return { get a() { return a }, set a(v) { a = v }, get b() { return b }, set b(v
 }"
 `;
 
-exports[`CSS vars injection codegen w/ <script setup> 1`] = `
+exports[`CSS vars injection > codegen > w/ <script setup> 1`] = `
 "import { useCssVars as _useCssVars, unref as _unref } from 'vue'
 
 export default {
@@ -98,7 +98,7 @@ export default {
   expose();
 
 _useCssVars(_ctx => ({
-  "xxxxxxxx-color": (color)
+  \\"xxxxxxxx-color\\": (color)
 }))
 const color = 'red'
 return { color }
@@ -107,7 +107,7 @@ return { color }
 }"
 `;
 
-exports[`CSS vars injection codegen w/ <script setup> using the same var multiple times 1`] = `
+exports[`CSS vars injection > codegen > w/ <script setup> using the same var multiple times 1`] = `
 "import { useCssVars as _useCssVars, unref as _unref } from 'vue'
 
 export default {
@@ -115,7 +115,7 @@ export default {
   expose();
 
 _useCssVars(_ctx => ({
-  "xxxxxxxx-color": (color)
+  \\"xxxxxxxx-color\\": (color)
 }))
 
         const color = 'red'
@@ -126,14 +126,14 @@ return { color }
 }"
 `;
 
-exports[`CSS vars injection generating correct code for nested paths 1`] = `
+exports[`CSS vars injection > generating correct code for nested paths 1`] = `
 "const a = 1
 const __default__ = {}
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  "xxxxxxxx-color": (_ctx.color),
-  "xxxxxxxx-font\\.size": (_ctx.font.size)
+  \\"xxxxxxxx-color\\": (_ctx.color),
+  \\"xxxxxxxx-font\\\\.size\\": (_ctx.font.size)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
@@ -143,7 +143,7 @@ __default__.setup = __setup__
 export default __default__"
 `;
 
-exports[`CSS vars injection w/ <script setup> binding analysis 1`] = `
+exports[`CSS vars injection > w/ <script setup> binding analysis 1`] = `
 "import { useCssVars as _useCssVars, unref as _unref } from 'vue'
 import { ref } from 'vue'
         
@@ -155,9 +155,9 @@ export default {
   expose();
 
 _useCssVars(_ctx => ({
-  "xxxxxxxx-color": (color),
-  "xxxxxxxx-size": (size.value),
-  "xxxxxxxx-foo": (__props.foo)
+  \\"xxxxxxxx-color\\": (color),
+  \\"xxxxxxxx-size\\": (size.value),
+  \\"xxxxxxxx-foo\\": (__props.foo)
 }))
 
         const color = 'red'
@@ -170,7 +170,7 @@ return { color, size, ref }
 }"
 `;
 
-exports[`CSS vars injection w/ normal <script> binding analysis 1`] = `
+exports[`CSS vars injection > w/ normal <script> binding analysis 1`] = `
 "
       const __default__ = {
         setup() {
@@ -183,7 +183,7 @@ exports[`CSS vars injection w/ normal <script> binding analysis 1`] = `
 import { useCssVars as _useCssVars } from 'vue'
 const __injectCSSVars__ = () => {
 _useCssVars(_ctx => ({
-  "xxxxxxxx-size": (_ctx.size)
+  \\"xxxxxxxx-size\\": (_ctx.size)
 }))}
 const __setup__ = __default__.setup
 __default__.setup = __setup__
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index d92a24782f7..02d5bb8c4c5 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -1,45 +1,45 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`compiler sfc: transform asset url should allow for full base URLs, with paths 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > should allow for full base URLs, with paths 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/src/logo.png" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
 }"
 `;
 
-exports[`compiler sfc: transform asset url should allow for full base URLs, without paths 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > should allow for full base URLs, without paths 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/logo.png" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
 }"
 `;
 
-exports[`compiler sfc: transform asset url should allow for full base URLs, without port 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > should allow for full base URLs, without port 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("img", { src: "http://localhost/logo.png" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
 }"
 `;
 
-exports[`compiler sfc: transform asset url should allow for full base URLs, without protocol 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > should allow for full base URLs, without protocol 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("img", { src: "//localhost/logo.png" }))
+  return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
 }"
 `;
 
-exports[`compiler sfc: transform asset url support uri fragment 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from '@svg/file.svg'
 
 
 const _hoisted_1 = _imports_0 + '#fragment'
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
+const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
@@ -49,77 +49,77 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler sfc: transform asset url support uri is empty 1`] = `
-"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
+"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("use", { href: '' }))
+  return (_openBlock(), _createElementBlock(\\"use\\", { href: '' }))
 }"
 `;
 
-exports[`compiler sfc: transform asset url transform assetUrls 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > transform assetUrls 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './logo.png'
 import _imports_1 from 'fixtures/logo.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("img", { src: _imports_0 }),
-    _createElementVNode("img", { src: _imports_1 }),
-    _createElementVNode("img", { src: _imports_1 }),
-    _createElementVNode("img", { src: "http://example.com/fixtures/logo.png" }),
-    _createElementVNode("img", { src: "//example.com/fixtures/logo.png" }),
-    _createElementVNode("img", { src: "/fixtures/logo.png" }),
-    _createElementVNode("img", { src: "data:image/png;base64,i" })
+    _createElementVNode(\\"img\\", { src: _imports_0 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 }),
+    _createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"//example.com/fixtures/logo.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
-exports[`compiler sfc: transform asset url transform with stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
+"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", 5)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\"><img src=\\\\\\"\\" + _imports_1 + \\"\\\\\\"><img src=\\\\\\"https://foo.bar/baz.png\\\\\\"><img src=\\\\\\"//foo.bar/baz.png\\\\\\"><img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\">\\", 5)
 const _hoisted_6 = [
   _hoisted_1
 ]
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_6))
+  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_6))
 }"
 `;
 
-exports[`compiler sfc: transform asset url with explicit base 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > with explicit base 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from 'bar.png'
 import _imports_1 from '@theme/bar.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("img", { src: "/foo/bar.png" }),
-    _createElementVNode("img", { src: "bar.png" }),
-    _createElementVNode("img", { src: _imports_0 }),
-    _createElementVNode("img", { src: _imports_1 })
+    _createElementVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"bar.png\\" }),
+    _createElementVNode(\\"img\\", { src: _imports_0 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
-exports[`compiler sfc: transform asset url with includeAbsolute: true 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform asset url > with includeAbsolute: true 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _createElementVNode("img", { src: _imports_0 }),
-    _createElementVNode("img", { src: _imports_1 }),
-    _createElementVNode("img", { src: "https://foo.bar/baz.png" }),
-    _createElementVNode("img", { src: "//foo.bar/baz.png" })
+    _createElementVNode(\\"img\\", { src: _imports_0 }),
+    _createElementVNode(\\"img\\", { src: _imports_1 }),
+    _createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" }),
+    _createElementVNode(\\"img\\", { src: \\"//foo.bar/baz.png\\" })
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
index 293c9563b08..e505eb04134 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -1,14 +1,14 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`compiler sfc: transform srcset srcset w/ explicit base option 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform srcset > srcset w/ explicit base option 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from '@/logo.png'
 
 
 const _hoisted_1 = _imports_0 + ', ' + _imports_0 + ' 2x'
-const _hoisted_2 = _imports_0 + ' 1x, ' + "/foo/logo.png" + ' 2x'
-const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
+const _hoisted_2 = _imports_0 + ' 1x, ' + \\"/foo/logo.png\\" + ' 2x'
+const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
+const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
@@ -18,8 +18,8 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler sfc: transform srcset transform srcset 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform srcset > transform srcset 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './logo.png'
 
 
@@ -30,54 +30,54 @@ const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
 const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
 const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_8 = "/logo.png" + ', ' + _imports_0 + ' 2x'
-const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: ""
+const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x'
+const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_1
 }, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_2
 }, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_3
 }, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_4
 }, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_5
 }, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_6
 }, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_7
 }, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
-  src: "/logo.png",
-  srcset: "/logo.png, /logo.png 2x"
+const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"/logo.png\\",
+  srcset: \\"/logo.png, /logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
-  src: "https://example.com/logo.png",
-  srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
+const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"https://example.com/logo.png\\",
+  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
-  src: "/logo.png",
+const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"/logo.png\\",
   srcset: _hoisted_8
 }, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
-  src: "data:image/png;base64,i",
-  srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
+const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"data:image/png;base64,i\\",
+  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
@@ -98,56 +98,56 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler sfc: transform srcset transform srcset w/ base 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: ""
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: "/foo/logo.png"
+const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"/foo/logo.png\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: "/foo/logo.png 2x"
+const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"/foo/logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: "/foo/logo.png 2x"
+const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"/foo/logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_5 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: "/foo/logo.png, /foo/logo.png 2x"
+const _hoisted_5 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"/foo/logo.png, /foo/logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_6 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: "/foo/logo.png 2x, /foo/logo.png"
+const _hoisted_6 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"/foo/logo.png 2x, /foo/logo.png\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_7 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: "/foo/logo.png 2x, /foo/logo.png 3x"
+const _hoisted_7 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_8 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: "/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x"
+const _hoisted_8 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
-  src: "/logo.png",
-  srcset: "/logo.png, /logo.png 2x"
+const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"/logo.png\\",
+  srcset: \\"/logo.png, /logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
-  src: "https://example.com/logo.png",
-  srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
+const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"https://example.com/logo.png\\",
+  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
-  src: "/logo.png",
-  srcset: "/logo.png, /foo/logo.png 2x"
+const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"/logo.png\\",
+  srcset: \\"/logo.png, /foo/logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
-  src: "data:image/png;base64,i",
-  srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
+const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"data:image/png;base64,i\\",
+  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
@@ -168,8 +168,8 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler sfc: transform srcset transform srcset w/ includeAbsolute: true 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: true 1`] = `
+"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
@@ -183,53 +183,53 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
 const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
-  srcset: ""
+const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
+  srcset: \\"\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_1
 }, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_2
 }, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_3
 }, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_4
 }, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_5
 }, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_6
 }, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
-  src: "./logo.png",
+const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"./logo.png\\",
   srcset: _hoisted_7
 }, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
-  src: "/logo.png",
+const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"/logo.png\\",
   srcset: _hoisted_8
 }, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
-  src: "https://example.com/logo.png",
-  srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
+const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"https://example.com/logo.png\\",
+  srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
 }, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
-  src: "/logo.png",
+const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"/logo.png\\",
   srcset: _hoisted_9
 }, null, -1 /* HOISTED */)
-const _hoisted_21 = /*#__PURE__*/_createElementVNode("img", {
-  src: "data:image/png;base64,i",
-  srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
+const _hoisted_21 = /*#__PURE__*/_createElementVNode(\\"img\\", {
+  src: \\"data:image/png;base64,i\\",
+  srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
 }, null, -1 /* HOISTED */)
 
 export function render(_ctx, _cache) {
@@ -250,8 +250,8 @@ export function render(_ctx, _cache) {
 }"
 `;
 
-exports[`compiler sfc: transform srcset transform srcset w/ stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
+"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
@@ -265,12 +265,12 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
 const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
 const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createStaticVNode("<img src=\\"./logo.png\\" srcset=\\"\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_1 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_2 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_3 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_4 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_5 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_6 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_7 + "\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_8 + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_9 + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", 12)
+const _hoisted_10 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_1 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_2 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_3 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_4 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_5 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_6 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_7 + \\"\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_8 + \\"\\\\\\"><img src=\\\\\\"https://example.com/logo.png\\\\\\" srcset=\\\\\\"https://example.com/logo.png, https://example.com/logo.png 2x\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_9 + \\"\\\\\\"><img src=\\\\\\"data:image/png;base64,i\\\\\\" srcset=\\\\\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\\\\\">\\", 12)
 const _hoisted_22 = [
   _hoisted_10
 ]
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_22))
+  return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_22))
 }"
 `;
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 6cccf40ece0..ffa5d4e798b 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -90,7 +90,7 @@ describe('CSS vars injection', () => {
     expect(code).toMatchInlineSnapshot(`
       ".foo {
               color: var(--test-color);
-              font-size: var(--test-font\\.size);
+              font-size: var(--test-font\\\\.size);
 
               font-weight: var(--test-_φ);
               font-size: var(--test-1-字号);