(feat) add syntax highlighting for style:foo props (#1327)

Author: Monkatraz

packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml

@@ -390,7 +390,7 @@ repository:
     - { match: on|use|bind,               name: keyword.control.svelte             }
     - { match: transition|in|out|animate, name: keyword.other.animation.svelte     }
     - { match: let,                       name: storage.type.svelte                }
-    - { match: class,                     name: entity.other.attribute-name.svelte }
+    - { match: class|style,               name: entity.other.attribute-name.svelte }
 
   # For Svelte element directives. Scopes the 'click' part in `on:click`.
   # The scope of the variable should represent what data type it generally is.
@@ -400,7 +400,7 @@ repository:
     - { match: '(?<=(on):).*$',                            name: entity.name.type.svelte   }
     - { match: '(?<=(bind):).*$',                          name: variable.parameter.svelte }
     - { match: '(?<=(use|transition|in|out|animate):).*$', name: variable.function.svelte  }
-    - { match: '(?<=(let|class):).*$',                     name: variable.parameter.svelte }
+    - { match: '(?<=(let|class|style):).*$',               name: variable.parameter.svelte }
 
   # For directives that may be better suited using different scopes if assigned to something.
   # e.g. `class:var={var}` is different to `class:var`.
@@ -411,15 +411,16 @@ repository:
     # Makes 'bind:this' display like `this` would in JS.
     - { match: '(?<=(bind):)this$', name: variable.language.svelte }
     # If other keywords are patched in in the future, they can easily be added here.
-    - { match: '(?<=(bind):).*$',  name: entity.name.type.svelte                  }
-    - { match: '(?<=(class):).*$', name: entity.other.attribute-name.class.svelte }
+    - { match: '(?<=(bind):).*$',   name: entity.name.type.svelte                  }
+    - { match: '(?<=(class):).*$',  name: entity.other.attribute-name.class.svelte }
+    - { match: '(?<=(style):).*$',  name: support.type.property-name.svelte        }
     # Defaults to the non-assignment version for everything else.
     - include: '#attributes-directives-types'
 
   # Matches Svelte element directives, e.g. `on:click|preventDefault={var}`
   attributes-directives:
     # If something is added to attributes-directives-keywords, it must be added to the begin-regex, too.
-    begin: (?<!<)(on|use|bind|transition|in|out|animate|let|class)(:)(?:([_$[:alpha:]][_\-$[:alnum:]]*(?=\s*=))|([_$[:alpha:]][_\-$[:alnum:]]*))((\|\w+)*)
+    begin: (?<!<)(on|use|bind|transition|in|out|animate|let|class|style)(:)(?:((?:--)?[_$[:alpha:]][_\-$[:alnum:]]*(?=\s*=))|((?:--)?[_$[:alpha:]][_\-$[:alnum:]]*))((\|\w+)*)
     beginCaptures:
       1: { patterns: [ include: '#attributes-directives-keywords' ] }
       2: { name: punctuation.definition.keyword.svelte }