fix(vscode): correct highlighting of tags starting with template (#5755)

Co-authored-by: KazariEX <[email protected]>

Author: serkodev

extensions/vscode/syntaxes/vue.tmLanguage.json

@@ -690,7 +690,7 @@
 					]
 				},
 				{
-					"begin": "(template)\\b",
+					"begin": "(template)(?=\\s|\\/?>)",
 					"beginCaptures": {
 						"1": {
 							"name": "entity.name.tag.$1.html.vue"
@@ -711,7 +711,7 @@
 						},
 						{
 							"begin": "(?<=>)",
-							"end": "(?=<\\/template\\b)",
+							"end": "(?=<\\/template[\\s>])",
 							"name": "text.html.derivative",
 							"patterns": [
 								{
@@ -722,7 +722,7 @@
 					]
 				},
 				{
-					"begin": "(script)\\b",
+					"begin": "(script)(?=\\s|\\/?>)",
 					"beginCaptures": {
 						"1": {
 							"name": "entity.name.tag.$1.html.vue"
@@ -743,7 +743,7 @@
 						},
 						{
 							"begin": "(?<=>)",
-							"end": "(?=<\\/script\\b)",
+							"end": "(?=<\\/script[\\s>])",
 							"name": "source.js",
 							"patterns": [
 								{
@@ -754,7 +754,7 @@
 					]
 				},
 				{
-					"begin": "(style)\\b",
+					"begin": "(style)(?=\\s|\\/?>)",
 					"beginCaptures": {
 						"1": {
 							"name": "entity.name.tag.$1.html.vue"
@@ -775,7 +775,7 @@
 						},
 						{
 							"begin": "(?<=>)",
-							"end": "(?=<\\/style\\b)",
+							"end": "(?=<\\/style[\\s>])",
 							"name": "source.css",
 							"patterns": [
 								{
@@ -872,7 +872,7 @@
 			"patterns": [
 				{
 					"begin": "\\G",
-					"end": "(?=/>)|((</)(template)\\b)",
+					"end": "(?=/>)|((</)(template)(?=[\\s>]))",
 					"endCaptures": {
 						"2": {
 							"name": "punctuation.definition.tag.begin.html.vue"
@@ -891,7 +891,7 @@
 			]
 		},
 		"template-tag-2": {
-			"begin": "(<)(template)\\b",
+			"begin": "(<)(template)(?=\\s|\\/?>)",
 			"beginCaptures": {
 				"1": {
 					"name": "punctuation.definition.tag.begin.html.vue"
@@ -910,7 +910,7 @@
 			"patterns": [
 				{
 					"begin": "\\G",
-					"end": "(?=/>)|((</)(template)\\b)",
+					"end": "(?=/>)|((</)(template)(?=[\\s>]))",
 					"endCaptures": {
 						"2": {
 							"name": "punctuation.definition.tag.begin.html.vue"

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

@@ -345,6 +345,33 @@ 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
+>    <template:foo></template:foo>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>    <template-foo bar></template-foo>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>    <template-foo>{{ 0 }}</template-foo>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>    <template.foo[0].bar></template.foo[0].bar>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>    <template-foo />
+#^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>    <template-foo/>
+#^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+></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
+>
+#^ source.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,9 @@
+<template>
+    <template-foo></template-foo>
+    <template:foo></template:foo>
+    <template-foo bar></template-foo>
+    <template-foo>{{ 0 }}</template-foo>
+    <template.foo[0].bar></template.foo[0].bar>
+    <template-foo />
+    <template-foo/>
+</template>