fix(compiler-sfc): consistently escape type-only prop names

packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap

@@ -52,6 +52,51 @@ const { foo } = __props;
 
 
 
+return {  }
+}
+
+})"
+`;
+
+exports[`defineProps > should escape names w/ special symbols 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    \\"spa ce\\": { type: null, required: true },
+    \\"exclamation!mark\\": { type: null, required: true },
+    \\"double\\\\\\"quote\\": { type: null, required: true },
+    \\"hash#tag\\": { type: null, required: true },
+    \\"dollar$sign\\": { type: null, required: true },
+    \\"percentage%sign\\": { type: null, required: true },
+    \\"amper&sand\\": { type: null, required: true },
+    \\"single'quote\\": { type: null, required: true },
+    \\"round(brack)ets\\": { type: null, required: true },
+    \\"aste*risk\\": { type: null, required: true },
+    \\"pl+us\\": { type: null, required: true },
+    \\"com,ma\\": { type: null, required: true },
+    \\"do.t\\": { type: null, required: true },
+    \\"sla/sh\\": { type: null, required: true },
+    \\"co:lon\\": { type: null, required: true },
+    \\"semi;colon\\": { type: null, required: true },
+    \\"angle<brack>ets\\": { type: null, required: true },
+    \\"equal=sign\\": { type: null, required: true },
+    \\"question?mark\\": { type: null, required: true },
+    \\"at@sign\\": { type: null, required: true },
+    \\"square[brack]ets\\": { type: null, required: true },
+    \\"back\\\\\\\\slash\\": { type: null, required: true },
+    \\"ca^ret\\": { type: null, required: true },
+    \\"back\`tick\\": { type: null, required: true },
+    \\"curly{bra}ces\\": { type: null, required: true },
+    \\"pi|pe\\": { type: null, required: true },
+    \\"til~de\\": { type: null, required: true },
+    \\"da-sh\\": { type: null, required: true }
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+
+
 return {  }
 }
 

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

@@ -608,4 +608,103 @@ const props = defineProps({ foo: String })
       }).toThrow(`cannot accept both type and non-type arguments`)
     })
   })
+
+  test('should escape names w/ special symbols', () => {
+    const { content, bindings } = compile(`
+    <script setup lang="ts">
+    defineProps<{
+      'spa ce': unknown
+      'exclamation!mark': unknown
+      'double"quote': unknown
+      'hash#tag': unknown
+      'dollar$sign': unknown
+      'percentage%sign': unknown
+      'amper&sand': unknown
+      "single'quote": unknown
+      'round(brack)ets': unknown
+      'aste*risk': unknown
+      'pl+us': unknown
+      'com,ma': unknown
+      'do.t': unknown
+      'sla/sh': unknown
+      'co:lon': unknown
+      'semi;colon': unknown
+      'angle<brack>ets': unknown
+      'equal=sign': unknown
+      'question?mark': unknown
+      'at@sign': unknown
+      'square[brack]ets': unknown
+      'back\\\\slash': unknown
+      'ca^ret': unknown
+      'back\`tick': unknown
+      'curly{bra}ces': unknown
+      'pi|pe': unknown
+      'til~de': unknown
+      'da-sh': unknown
+    }>()
+    </script>`)
+    assertCode(content)
+    expect(content).toMatch(`"spa ce": { type: null, required: true }`)
+    expect(content).toMatch(
+      `"exclamation!mark": { type: null, required: true }`
+    )
+    expect(content).toMatch(`"double\\"quote": { type: null, required: true }`)
+    expect(content).toMatch(`"hash#tag": { type: null, required: true }`)
+    expect(content).toMatch(`"dollar$sign": { type: null, required: true }`)
+    expect(content).toMatch(`"percentage%sign": { type: null, required: true }`)
+    expect(content).toMatch(`"amper&sand": { type: null, required: true }`)
+    expect(content).toMatch(`"single'quote": { type: null, required: true }`)
+    expect(content).toMatch(`"round(brack)ets": { type: null, required: true }`)
+    expect(content).toMatch(`"aste*risk": { type: null, required: true }`)
+    expect(content).toMatch(`"pl+us": { type: null, required: true }`)
+    expect(content).toMatch(`"com,ma": { type: null, required: true }`)
+    expect(content).toMatch(`"do.t": { type: null, required: true }`)
+    expect(content).toMatch(`"sla/sh": { type: null, required: true }`)
+    expect(content).toMatch(`"co:lon": { type: null, required: true }`)
+    expect(content).toMatch(`"semi;colon": { type: null, required: true }`)
+    expect(content).toMatch(`"angle<brack>ets": { type: null, required: true }`)
+    expect(content).toMatch(`"equal=sign": { type: null, required: true }`)
+    expect(content).toMatch(`"question?mark": { type: null, required: true }`)
+    expect(content).toMatch(`"at@sign": { type: null, required: true }`)
+    expect(content).toMatch(
+      `"square[brack]ets": { type: null, required: true }`
+    )
+    expect(content).toMatch(`"back\\\\slash": { type: null, required: true }`)
+    expect(content).toMatch(`"ca^ret": { type: null, required: true }`)
+    expect(content).toMatch(`"back\`tick": { type: null, required: true }`)
+    expect(content).toMatch(`"curly{bra}ces": { type: null, required: true }`)
+    expect(content).toMatch(`"pi|pe": { type: null, required: true }`)
+    expect(content).toMatch(`"til~de": { type: null, required: true }`)
+    expect(content).toMatch(`"da-sh": { type: null, required: true }`)
+    expect(bindings).toStrictEqual({
+      'spa ce': BindingTypes.PROPS,
+      'exclamation!mark': BindingTypes.PROPS,
+      'double"quote': BindingTypes.PROPS,
+      'hash#tag': BindingTypes.PROPS,
+      dollar$sign: BindingTypes.PROPS,
+      'percentage%sign': BindingTypes.PROPS,
+      'amper&sand': BindingTypes.PROPS,
+      "single'quote": BindingTypes.PROPS,
+      'round(brack)ets': BindingTypes.PROPS,
+      'aste*risk': BindingTypes.PROPS,
+      'pl+us': BindingTypes.PROPS,
+      'com,ma': BindingTypes.PROPS,
+      'do.t': BindingTypes.PROPS,
+      'sla/sh': BindingTypes.PROPS,
+      'co:lon': BindingTypes.PROPS,
+      'semi;colon': BindingTypes.PROPS,
+      'angle<brack>ets': BindingTypes.PROPS,
+      'equal=sign': BindingTypes.PROPS,
+      'question?mark': BindingTypes.PROPS,
+      'at@sign': BindingTypes.PROPS,
+      'square[brack]ets': BindingTypes.PROPS,
+      'back\\slash': BindingTypes.PROPS,
+      'ca^ret': BindingTypes.PROPS,
+      'back`tick': BindingTypes.PROPS,
+      'curly{bra}ces': BindingTypes.PROPS,
+      'pi|pe': BindingTypes.PROPS,
+      'til~de': BindingTypes.PROPS,
+      'da-sh': BindingTypes.PROPS
+    })
+  })
 })

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

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

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

@@ -32,7 +32,10 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
     return hash(id + raw)
   } else {
     // escape ASCII Punctuation & Symbols
-    return `${id}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
+    return `${id}-${raw.replace(escapeSymbolsRE, s =>
+      // dash is allowed symbol in variable name
+      s === '-' ? s : `\\${s}`
+    )}`
   }
 }