fix(compiler-sfc): update code

Author: baiwusanyu-c

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -1136,7 +1136,7 @@ const emit = defineEmits(['a', 'b'])
       `)
       assertCode(content)
     })
-    
+
     // #7111
     test('withDefaults (static) w/ production mode', () => {
       const { content } = compile(
@@ -1277,7 +1277,6 @@ const emit = defineEmits(['a', 'b'])
       expect(content).toMatch(`emits: ["foo", "bar"]`)
     })
 
-    
     test('defineEmits w/ type from normal script', () => {
       const { content } = compile(`
       <script lang="ts">

packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts

@@ -126,7 +126,7 @@ describe('sfc props transform', () => {
       <script setup lang="ts">
       const { foo = 1, bar = 2, 'foo:bar': fooBar = 'foo-bar' } = defineProps<{ 
           "foo": number // double-quoted string
-          "bar": number // single-quoted string
+          'bar': number // single-quoted string
           'foo:bar': string // single-quoted string containing symbols
           "onUpdate:modelValue": (val: number)=>void } // double-quoted string containing symbols
           >()

packages/compiler-sfc/src/compileScript.ts

@@ -834,7 +834,7 @@ export function compileScript(
         }
 
         const { type, required } = props[key]
-        const finalKey = getFinalPropsKey(key)
+        const finalKey = getEscapedKey(key)
         if (!isProd) {
           return `${finalKey}: { type: ${toRuntimeTypeString(
             type
@@ -1628,7 +1628,7 @@ export function compileScript(
       const defaults: string[] = []
       for (const key in propsDestructuredBindings) {
         const d = genDestructuredDefaultValue(key)
-        if (d) defaults.push(`${getFinalPropsKey(key)}: ${d}`)
+        if (d) defaults.push(`${getEscapedKey(key)}: ${d}`)
       }
       if (defaults.length) {
         declCode = `${helper(
@@ -2364,6 +2364,7 @@ export function resolveObjectKey(node: Node, computed: boolean) {
  * key may contain symbols such
  * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
  */
+export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
 function getEscapedKey(key: string) {
-  return /^[a-z0-9]+$/i.test(key) ? key : `"${key}"`
+  return escapeSymbolsRE.test(key) ? `"${key}"` : key
 }

packages/compiler-sfc/src/cssVars.ts

@@ -10,6 +10,7 @@ import {
 import { SFCDescriptor } from './parse'
 import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
+import { escapeSymbolsRE } from './compileScript'
 
 export const CSS_VARS_HELPER = `useCssVars`
 
@@ -31,10 +32,7 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
     return hash(id + raw)
   } else {
     // escape ASCII Punctuation & Symbols
-    return `${id}-${raw.replace(
-      /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g,
-      s => `\\${s}`
-    )}`
+    return `${id}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
   }
 }