Fix attribute name interpolation

1. extend `meta.interpolation` to include leading and trailing
   punctuation to comply with ST's scope naming guidelines.
2. fix closing `]` scope.
3. adjust/add tests

Author: deathaxe

Vue Component.sublime-syntax

@@ -623,10 +623,10 @@ contexts:
   vue-dynamic-attribute-name:
     - clear_scopes: 1  # clear `entity.other.attribute-name`
     - match: \[
-      scope: punctuation.section.interpolation.begin.vue
+      scope: meta.interpolation.vue punctuation.section.interpolation.begin.vue
       embed: scope:source.js#expression-statement
       embed_scope: meta.interpolation.vue source.js.embedded.vue
       escape: \]
       escape_captures:
-        0: punctuation.definition.string.end.html
-    - include: else-pop
+        0: meta.interpolation.vue punctuation.definition.interpolation.end.vue
+    - include: immediately-pop

Vue Component.sublime-syntax.yaml-macros

@@ -396,10 +396,10 @@ contexts:
   vue-dynamic-attribute-name:
     - clear_scopes: 1  # clear `entity.other.attribute-name`
     - match: \[
-      scope: punctuation.section.interpolation.begin.vue
+      scope: meta.interpolation.vue punctuation.section.interpolation.begin.vue
       embed: scope:source.js#expression-statement
       embed_scope: meta.interpolation.vue source.js.embedded.vue
       escape: \]
       escape_captures:
-        0: punctuation.definition.string.end.html
-    - include: else-pop
+        0: meta.interpolation.vue punctuation.definition.interpolation.end.vue
+    - include: immediately-pop

tests/syntax_tests_mustage.vue

@@ -128,19 +128,20 @@
     <template #[`content-${variable}`]>
 //            ^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html
 //            ^ entity.other.attribute-name.html
-//             ^ punctuation.section.interpolation.begin.vue
+//             ^ meta.interpolation.vue punctuation.section.interpolation.begin.vue - source.js.embedded
 //              ^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue source.js.embedded.vue - entity.other.attribute-name.html
-//                                   ^ punctuation.definition.string.end.html
+//                                   ^ meta.interpolation.vue punctuation.definition.interpolation.end.vue - source.js.embedded
 //                                    ^ meta.tag - meta.attribute-with-value
 //                                     ^ - meta.tag
 
-    <template v-slot:[`content-${variable}`]>
+    <template v-slot:[`content-${variable}`] >
 //            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html
 //            ^^^^^^^ entity.other.attribute-name.html
-//                   ^ punctuation.section.interpolation.begin.vue
+//                   ^ meta.interpolation.vue punctuation.section.interpolation.begin.vue - source.js.embedded
 //                    ^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue source.js.embedded.vue - entity.other.attribute-name.html
-//                                         ^ punctuation.definition.string.end.html
-//                                          ^ meta.tag - meta.attribute-with-value
-//                                           ^ - meta.tag
+//                                         ^ meta.interpolation.vue punctuation.definition.interpolation.end.vue - source.js.embedded
+//                                          ^ meta.tag - meta.interpolation
+//                                           ^ meta.tag - meta.attribute-with-value
+//                                            ^ - meta.tag
 
 </html>