fix(vscode): correct syntax highlight in template with lang="html"

extensions/vscode/syntaxes/vue.tmLanguage.json

@@ -56,7 +56,7 @@
 					]
 				},
 				{
-					"begin": "([a-zA-Z0-9:-]+)\\b(?=[^>]*\\blang\\s*=\\s*(['\"]?)html\\b\\2)",
+					"begin": "(?!template(?![A-Za-z0-9:-]))([A-Za-z0-9:-]+)\\b(?=[^>]*\\blang\\s*=\\s*(['\"]?)html\\b\\2)",
 					"beginCaptures": {
 						"1": {
 							"name": "entity.name.tag.$1.html.vue"
@@ -71,19 +71,13 @@
 							"name": "entity.name.tag.$2.html.vue"
 						}
 					},
+					"contentName": "text.html.derivative",
 					"patterns": [
 						{
 							"include": "#tag-stuff"
 						},
 						{
-							"begin": "(?<=>)",
-							"end": "(?=<\\/)",
-							"name": "text.html.derivative",
-							"patterns": [
-								{
-									"include": "#html-stuff"
-								}
-							]
+							"include": "#html-stuff"
 						}
 					]
 				},

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

@@ -133,66 +133,45 @@ exports[`grammar > directives.vue 1`] = `
 #          ^ source.vue punctuation.definition.tag.end.html.vue
 >
 #^ source.vue
-><!-- TODO -->
-#^^^^ source.vue comment.block.vue punctuation.definition.comment.vue
-#    ^^^^^^ source.vue comment.block.vue
-#          ^^^ source.vue comment.block.vue punctuation.definition.comment.vue
 ><template lang="html">
 #^ source.vue punctuation.definition.tag.begin.html.vue
 # ^^^^^^^^ source.vue entity.name.tag.template.html.vue
 #         ^^^^^^^^^^^^ source.vue meta.tag-stuff
 #                     ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
 >	<div @click></div>
-#^^^^^^^^^^^^^ source.vue text.html.derivative
-#             ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div @click="{}"></div>
-#^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                  ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div @click="log('hello'); log('world');"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                                           ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div #default></div>
-#^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#               ^^^^^^^ source.vue text.html.derivative
->	<div #default="args"></div>
 #^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                      ^^^^^^^ source.vue text.html.derivative
+>	<div #default="args"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div #></div>
-#^^^^^^^^ source.vue text.html.derivative
-#        ^^^^^^^ source.vue text.html.derivative
->	<div #="args"></div>
 #^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#               ^^^^^^^ source.vue text.html.derivative
+>	<div #="args"></div>
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div :key></div>
-#^^^^^^^^^^^ source.vue text.html.derivative
-#           ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div :key="{}"></div>
-#^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div v-if="true"></div>
-#^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                  ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div v-else-if="true"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                       ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div v-else></div>
-#^^^^^^^^^^^^^ source.vue text.html.derivative
-#             ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div v-for="n in []"></div>
-#^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                      ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div v-if="true" v-else-if="true" v-else></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                                          ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div :foo="':foo=123'"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                        ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div :foo="[{ bar: []}]"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                          ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 >	<div .prop="[1, 2]"></div>
-#^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
-#                     ^^^^^^^ source.vue text.html.derivative
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
 ></template>
 #^^ source.vue punctuation.definition.tag.begin.html.vue
 #  ^^^^^^^^ source.vue entity.name.tag.template.html.vue

extensions/vscode/tests/grammarFixtures/directives.vue

@@ -52,7 +52,6 @@ h1.myClass(class="text-right") hello
 h1#myId(class="text-right") hello
 </template>
 
-<!-- TODO -->
 <template lang="html">
 	<div @click></div>
 	<div @click="{}"></div>