Add special "conservative" highlighting for style attribute values

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

@@ -319,11 +319,83 @@ repository:
     endCaptures:
       1: { name: punctuation.definition.block.end.svelte }
 
+  # -------
+  #  STYLE
+
+  # Specifically matches the `style=''` attribute.
+  style-attribute:
+    begin: (style)
+    beginCaptures: { 1: { name: entity.other.attribute-name.svelte } }
+    end: (?=\s*+[^=\s])
+    name: 'meta.attribute.$1.svelte'
+    patterns:
+    - begin: '='
+      beginCaptures: { 0: { name: punctuation.separator.key-value.svelte } }
+      end: (?<=[^\s=])(?!\s*=)|(?=/?>)
+      patterns:
+      - include: '#style-value'
+      - include: '#attributes-value'
+
+  # Embedded CSS in a style attribute.
+  # Does not include the actual CSS grammar. A simplified one is used instead.
+  style-value:
+    begin: (['"])
+    end: \1
+    beginCaptures: { 0: { name: punctuation.definition.string.begin.svelte } }
+    endCaptures:   { 0: { name: punctuation.definition.string.end.svelte } }
+    contentName: source.css
+    patterns:
+    - include: '#interpolation'
+    - include: '#style-css-expression'
+
+  style-css-expression:
+    patterns:
+    # Matches declaration properties.
+    - match: ([a-zA-Z0-9_-]+)\s*(:)
+      captures:
+        1: { name: support.type.property-name.css }
+        2: { name: punctuation.separator.key-value.css }
+    # Matches functions, e.g. `var()`.
+    - begin: (\w[^\s:'"()]*?)(\()
+      end: \)
+      beginCaptures:
+        1: { name: entity.name.function.css }
+        2: { name: punctuation.section.function.begin.bracket.round.css }
+      endCaptures: { 0: { name: punctuation.section.function.end.bracket.round.css } }
+      patterns: [ include: '#style-css-expression' ]
+    # Matches quoted strings.
+    - begin: (['"])
+      end: \1
+      beginCaptures: { 0: { name: punctuation.definition.string.begin.css } }
+      endCaptures:   { 0: { name: punctuation.definition.string.end.css } }
+      name: string.quoted.svelte
+      patterns: [ include: '#interpolation' ]
+    # Matches hex colors.
+    - match: '#[0-9a-fA-F]+'
+      name: constant.other.color.rgb-value.hex.css
+    # Matches numbers + optional unit suffix.
+    - match: (?<![\w\d-])[+-]?[0-9.][0-9._]*[\w%]{,4}(?!=[\w\d-])
+      name: constant.numeric.decimal.css
+    # Matches unit suffixes.
+    - match: cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax
+      name: constant.numeric.decimal.css
+    # Matches CSS variables (excluding ones in declaration property names)
+    - match: --[a-zA-Z_-][a-zA-Z0-9_-]*
+      name: variable.css
+    # Matches various punctuation and operators.
+    - { match: '[+*/-]', name: keyword.operator.css }
+    - { match: ',',      name: punctuation.seperator.css }
+    - { match: ';',      name: punctuation.terminator.rule.css }
+    # Matches every other string of characters that looks like an identifier or value.
+    - match: '[a-zA-Z_-][a-zA-Z0-9_-]*'
+      name: support.constant.property-value.css
+
   # ------------
   #  ATTRIBUTES
 
   attributes:
     patterns:
+    - include: '#style-attribute'
     - include: '#attributes-directives'
     - include: '#attributes-keyvalue'
     - include: '#attributes-interpolated'
@@ -339,17 +411,26 @@ repository:
   # Matches attribute keyvalues. (and boolean attributes as well)
   # e.g. `class="my-class"`
   attributes-keyvalue:
-    begin: ([_$[:alpha:]][_\-$[:alnum:]]*)
-    beginCaptures: { 1: { name: entity.other.attribute-name.svelte } }
+    begin: ((?:--)?[_$[:alpha:]][_\-$[:alnum:]]*)
+    beginCaptures:
+      0:
+        patterns:
+        # Matches if the key is a `--css-variable` attribute.
+        - match: --.*
+          name: support.type.property-name.svelte
+        # Matches everything else.
+        - match: .*
+          name: entity.other.attribute-name.svelte
     end: (?=\s*+[^=\s])
     name: 'meta.attribute.$1.svelte'
-    patterns: [ include: '#attributes-value' ]
+    patterns:
+    - begin: '='
+      beginCaptures: { 0: { name: punctuation.separator.key-value.svelte } }
+      end: (?<=[^\s=])(?!\s*=)|(?=/?>)
+      patterns: [include: '#attributes-value']
 
-  # The value part of attribute keyvalues. e.g. `="my-class"` in `class="my-class"`
+  # The value part of attribute keyvalues. e.g. `"my-class"` in `class="my-class"`
   attributes-value:
-    begin: '='
-    beginCaptures: { 0: { name: punctuation.separator.key-value.svelte } }
-    end: (?<=[^\s=])(?!\s*=)|(?=/?>)
     patterns:
     # No quotes - just an interpolation expression.
     - include: '#interpolation'
@@ -365,7 +446,7 @@ repository:
     - begin: (['"])
       end: \1
       beginCaptures: { 0: { name: punctuation.definition.string.begin.svelte } }
-      endCaptures: { 0: { name: punctuation.definition.string.end.svelte } }
+      endCaptures:   { 0: { name: punctuation.definition.string.end.svelte } }
       name: string.quoted.svelte
       patterns: [ include: '#interpolation' ]
 
@@ -419,7 +500,10 @@ repository:
     end: (?=\s*+[^=\s])
     name: meta.directive.$1.svelte
     patterns:
-    - include: '#attributes-value'
+    - begin: '='
+      beginCaptures: { 0: { name: punctuation.separator.key-value.svelte } }
+      end: (?<=[^\s=])(?!\s*=)|(?=/?>)
+      patterns: [include: '#attributes-value']
 
   # ------
   #  TAGS