From e89d73f715a4e1497e67376a89fa3ace54306fd2 Mon Sep 17 00:00:00 2001
From: Bri <34875062+Monkatraz@users.noreply.github.com>
Date: Wed, 5 Jan 2022 15:42:20 -0700
Subject: [PATCH 1/3] highlight --css-vars

---
 .../syntaxes/svelte.tmLanguage.src.yaml       | 39 +++++++++++++------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
index 5a7ebc4f3..f6988d27d 100644
--- a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
+++ b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
@@ -339,24 +339,36 @@ 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'
     # Units, meaning digit characters and an optional unit string. e.g. `15px`
-    - match: ([0-9._]+[\w]{,4})(?=\s|/?>)
-      name: constant.numeric.decimal.svelte
-      patterns: [ include: '#interpolation' ]
+    - match: (?:(['"])([0-9._]+[\w%]{,4})(\1))|(?:([0-9._]+[\w%]{,4})(?=\s|/?>))
+      captures:
+        1: { name: punctuation.definition.string.begin.svelte }
+        2: { name: constant.numeric.decimal.svelte }
+        3: { name: punctuation.definition.string.end.svelte }
+        4: { name: constant.numeric.decimal.svelte }
     # Unquoted strings.
     - match: ([^\s"'=<>`/]|/(?!>))+
       name: string.unquoted.svelte
@@ -365,7 +377,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 +431,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

From a80f35103786d2ce09de96259a51c2a837e1d008 Mon Sep 17 00:00:00 2001
From: Bri <34875062+Monkatraz@users.noreply.github.com>
Date: Wed, 5 Jan 2022 15:46:17 -0700
Subject: [PATCH 2/3] revert unit change

---
 .../svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
index f6988d27d..30323f6d4 100644
--- a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
+++ b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
@@ -363,12 +363,9 @@ repository:
     # No quotes - just an interpolation expression.
     - include: '#interpolation'
     # Units, meaning digit characters and an optional unit string. e.g. `15px`
-    - match: (?:(['"])([0-9._]+[\w%]{,4})(\1))|(?:([0-9._]+[\w%]{,4})(?=\s|/?>))
-      captures:
-        1: { name: punctuation.definition.string.begin.svelte }
-        2: { name: constant.numeric.decimal.svelte }
-        3: { name: punctuation.definition.string.end.svelte }
-        4: { name: constant.numeric.decimal.svelte }
+    - match: ([0-9._]+[\w]{,4})(?=\s|/?>)
+      name: constant.numeric.decimal.svelte
+      patterns: [ include: '#interpolation' ]
     # Unquoted strings.
     - match: ([^\s"'=<>`/]|/(?!>))+
       name: string.unquoted.svelte

From 6e9a85abeb2c06c7a2b904aad02d18f2af572514 Mon Sep 17 00:00:00 2001
From: Bri <34875062+Monkatraz@users.noreply.github.com>
Date: Wed, 5 Jan 2022 15:59:27 -0700
Subject: [PATCH 3/3] add special highlighting for style strings

---
 .../syntaxes/svelte.tmLanguage.src.yaml       | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
index 30323f6d4..9ca928d60 100644
--- a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
+++ b/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'