fix: Correct syntax highlighting for style.prop.% (#1622)

The previous syntax regex capture did not allow a % symbol at all. This
commit updates the regex to allow the property binding and binding name
to be terminated by 0 or 1 '%' characters.

Fixes #1619

(cherry picked from commit 3848142)

Author: atscott

syntaxes/src/template.ts

@@ -36,7 +36,7 @@ export const Template: GrammarDefinition = {
     },
 
     propertyBinding: {
-      begin: /(\[\s*@?[-_a-zA-Z0-9.$]*\s*])(=)(["'])/,
+      begin: /(\[\s*@?[-_a-zA-Z0-9.$]*%?\s*])(=)(["'])/,
       beginCaptures: {
         1: {
           name: 'entity.other.attribute-name.html entity.other.ng-binding-name.property.html',
@@ -130,7 +130,7 @@ export const Template: GrammarDefinition = {
     bindingKey: {
       patterns: [
         {
-          match: /([\[\(]{1,2}|\*)(?:\s*)(@?[-_a-zA-Z0-9.$]*)(?:\s*)([\]\)]{1,2})?/,
+          match: /([\[\(]{1,2}|\*)(?:\s*)(@?[-_a-zA-Z0-9.$]*%?)(?:\s*)([\]\)]{1,2})?/,
           captures: {
             1: {name: 'punctuation.definition.ng-binding-name.begin.html'},
             2: {

syntaxes/template.json

@@ -40,7 +40,7 @@
       ]
     },
     "propertyBinding": {
-      "begin": "(\\[\\s*@?[-_a-zA-Z0-9.$]*\\s*])(=)([\"'])",
+      "begin": "(\\[\\s*@?[-_a-zA-Z0-9.$]*%?\\s*])(=)([\"'])",
       "beginCaptures": {
         "1": {
           "name": "entity.other.attribute-name.html entity.other.ng-binding-name.property.html",
@@ -170,7 +170,7 @@
     "bindingKey": {
       "patterns": [
         {
-          "match": "([\\[\\(]{1,2}|\\*)(?:\\s*)(@?[-_a-zA-Z0-9.$]*)(?:\\s*)([\\]\\)]{1,2})?",
+          "match": "([\\[\\(]{1,2}|\\*)(?:\\s*)(@?[-_a-zA-Z0-9.$]*%?)(?:\\s*)([\\]\\)]{1,2})?",
           "captures": {
             "1": {
               "name": "punctuation.definition.ng-binding-name.begin.html"

syntaxes/test/data/template.html

@@ -8,6 +8,7 @@
     'class-two',
     'class-three'
 ]"></div>
+<div [style.right.%]="val"></div>
 <div [@animation.trigger]="val"></div>
 <img [attr.aria-label]="val" />
 <div [my-property]="val"></div>

syntaxes/test/data/template.html.snap

@@ -77,6 +77,20 @@
 #^ template.ng meta.ng-binding.property.html expression.ng meta.array.literal.ts meta.brace.square.ts
 # ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
 #  ^^^^^^^^ template.ng
+><div [style.right.%]="val"></div>
+#^^^^^ template.ng
+#     ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
+#      ^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.style.right.%.html
+#           ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.style.right.%.html punctuation.accessor.html
+#            ^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.style.right.%.html
+#                 ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.style.right.%.html punctuation.accessor.html
+#                  ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html entity.other.ng-binding-name.style.right.%.html
+#                   ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
+#                    ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
+#                     ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
+#                      ^^^ template.ng meta.ng-binding.property.html expression.ng variable.other.readwrite.ts
+#                         ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
+#                          ^^^^^^^^ template.ng
 ><div [@animation.trigger]="val"></div>
 #^^^^^ template.ng
 #     ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html