refactor(compiler-sfc): move prop key escape logic to utils

packages/compiler-sfc/src/script/defineProps.ts

@@ -16,7 +16,8 @@ import {
   isLiteralNode,
   isCallOf,
   unwrapTSNode,
-  toRuntimeTypeString
+  toRuntimeTypeString,
+  getEscapedKey
 } from './utils'
 import { genModelProps } from './defineModel'
 import { getObjectOrArrayExpressionKeys } from './analyzeScriptBindings'
@@ -364,14 +365,3 @@ function inferValueType(node: Node): string | undefined {
       return 'Function'
   }
 }
-
-/**
- * key may contain symbols
- * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
- */
-export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
-function getEscapedKey(key: string) {
-  return escapeSymbolsRE.test(key)
-    ? JSON.stringify(key)
-    : key
-}

packages/compiler-sfc/src/script/utils.ts

@@ -108,3 +108,13 @@ export function normalizePath(p: string) {
 }
 
 export const joinPaths = (path.posix || path).join
+
+/**
+ * key may contain symbols
+ * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
+ */
+export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
+
+export function getEscapedKey(key: string) {
+  return escapeSymbolsRE.test(key) ? JSON.stringify(key) : key
+}

packages/compiler-sfc/src/style/cssVars.ts

@@ -8,7 +8,7 @@ import {
   BindingMetadata
 } from '@vue/compiler-dom'
 import { SFCDescriptor } from '../parse'
-import { escapeSymbolsRE } from '../script/defineProps'
+import { escapeSymbolsRE } from '../script/utils'
 import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
 
@@ -32,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(
+    return `${id}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
-      escapeSymbolsRE,
-      s => `\\${s}`
-    )}`
   }
 }