fix(vscode): correct highlighting on tag starting with template (#4770

)

extensions/vscode/syntaxes/vue.tmLanguage.json

@@ -856,7 +856,7 @@
 			]
 		},
 		"template-tag-1": {
-			"begin": "(<)(template)\\b(>)",
+			"begin": "(<)(template[a-zA-Z0-9:-]*)\\b(>)",
 			"beginCaptures": {
 				"1": {
 					"name": "punctuation.definition.tag.begin.html.vue"
@@ -878,7 +878,7 @@
 			"patterns": [
 				{
 					"begin": "\\G",
-					"end": "(?=/>)|((</)(template)\\b)",
+					"end": "(?=/>)|((</)(template[a-zA-Z0-9:-]*)\\b)",
 					"endCaptures": {
 						"2": {
 							"name": "punctuation.definition.tag.begin.html.vue"
@@ -897,7 +897,7 @@
 			]
 		},
 		"template-tag-2": {
-			"begin": "(<)(template)\\b",
+			"begin": "(<)(template[a-zA-Z0-9:-]*)\\b",
 			"beginCaptures": {
 				"1": {
 					"name": "punctuation.definition.tag.begin.html.vue"
@@ -916,7 +916,7 @@
 			"patterns": [
 				{
 					"begin": "\\G",
-					"end": "(?=/>)|((</)(template)\\b)",
+					"end": "(?=/>)|((</)(template[a-zA-Z0-9:-]*)\\b)",
 					"endCaptures": {
 						"2": {
 							"name": "punctuation.definition.tag.begin.html.vue"

extensions/vscode/tests/__snapshots__/grammar.spec.ts.snap

@@ -363,6 +363,45 @@ exports[`grammar > script-tag-in-script.vue 1`] = `
 #^ source.vue"
 `;
 
+exports[`grammar > tag-starts-with-template.vue 1`] = `
+"><template>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>	<template-foo></template-foo>
+#^ source.vue text.html.derivative
+# ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^^^^^ source.vue text.html.derivative meta.template-tag.start entity.name.tag.template-foo.html.vue
+#              ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+#               ^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end punctuation.definition.tag.begin.html.vue
+#                 ^^^^^^^^^^^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end entity.name.tag.template-foo.html.vue
+#                             ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+>	<template:bar></template:bar>
+#^ source.vue text.html.derivative
+# ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^^^^^ source.vue text.html.derivative meta.template-tag.start entity.name.tag.template:bar.html.vue
+#              ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+#               ^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end punctuation.definition.tag.begin.html.vue
+#                 ^^^^^^^^^^^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end entity.name.tag.template:bar.html.vue
+#                             ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+>	<template-foo />
+#^ source.vue text.html.derivative
+# ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^^^^^ source.vue text.html.derivative meta.template-tag.start entity.name.tag.template-foo.html.vue
+#              ^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.tag-stuff
+#               ^^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+>	<template:bar />
+#^ source.vue text.html.derivative
+# ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^^^^^ source.vue text.html.derivative meta.template-tag.start entity.name.tag.template:bar.html.vue
+#              ^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.tag-stuff
+#               ^^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue"
+`;
+
 exports[`grammar > template-expression.vue 1`] = `
 "><template>
 #^ source.vue punctuation.definition.tag.begin.html.vue

extensions/vscode/tests/grammarFixtures/tag-starts-with-template.vue

@@ -0,0 +1,6 @@
+<template>
+	<template-foo></template-foo>
+	<template:bar></template:bar>
+	<template-foo />
+	<template:bar />
+</template>