Highlight variables properly in @theme

Author: thecrypticace

packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap

@@ -733,7 +733,7 @@ exports[`@theme 1`] = `
 
  --color: red;
 ^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^ 1: meta.property-name.css
+ ^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
  ^ 1: punctuation.terminator.rule.css
@@ -750,7 +750,7 @@ exports[`@theme 1`] = `
 
  --color: red;
 ^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^ 1: meta.property-name.css
+ ^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
  ^ 1: punctuation.terminator.rule.css
@@ -767,7 +767,7 @@ exports[`@theme 1`] = `
 
  --color: red;
 ^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^ 1: meta.property-name.css
+ ^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
  ^ 1: punctuation.terminator.rule.css
@@ -788,7 +788,7 @@ exports[`@theme 1`] = `
 
  --color: red;
 ^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^ 1: meta.property-name.css
+ ^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
  ^ 1: punctuation.terminator.rule.css
@@ -807,21 +807,21 @@ exports[`@theme 1`] = `
 
  --spacing: initial;
 ^^^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^^^ 1: meta.property-name.css
+ ^^^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^^^^^ 1: meta.property-value.css support.constant.property-value.css
  ^ 1: punctuation.terminator.rule.css
 
  --color-*: initial;
 ^^^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^^ 1: meta.property-name.css
+ ^^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^^^^^ 1: meta.property-value.css support.constant.property-value.css
  ^ 1: punctuation.terminator.rule.css
 
  --animate-pulse: 1s pulse infinite;
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^^^^^^^^^ 1: meta.property-name.css
+ ^^^^^^^^^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^^^^^^^^^^^^^^^ 4: meta.property-value.css
  ^^ 2: constant.numeric.css
@@ -899,8 +899,8 @@ exports[`@theme 1`] = `
  ^^ 1: punctuation.definition.comment.end.css
 
  --color-1: red;
-^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^^  1: meta.property-name.css
+^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
+ ^^^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
  ^ 1: punctuation.terminator.rule.css
@@ -915,8 +915,8 @@ exports[`@theme 1`] = `
  ^^ 1: punctuation.definition.comment.end.css
 
  --color-2: green;
-^^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^^  1: meta.property-name.css
+^^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
+ ^^^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
  ^ 1: punctuation.terminator.rule.css
@@ -931,8 +931,8 @@ exports[`@theme 1`] = `
  ^^ 1: punctuation.definition.comment.end.css
 
  --color-2: blue;
-^^^^^^^^^^^^^^^^^^ 7: source.css.tailwind meta.at-rule.theme.body.tailwind
- ^^^^^^^^  1: meta.property-name.css
+^^^^^^^^^^^^^^^^^^ 6: source.css.tailwind meta.at-rule.theme.body.tailwind
+ ^^^^^^^^^ 1: variable.css
  ^ 1: punctuation.separator.key-value.css
  ^^^^ 1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
  ^ 1: punctuation.terminator.rule.css

packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json

@@ -497,6 +497,10 @@
  {
  "include": "source.css#comment-block"
  },
+ {
+ "match": "(?x) (?<![\\w-])\n--\n(?:[-a-zA-Z_] | [^\\x00-\\x7F]) # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F] # Remainder of identifier\n |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*",
+ "name": "variable.css"
+ },
  {
  "begin": "(?<![-a-zA-Z])(?=[-a-zA-Z])",
  "end": "$|(?![-a-zA-Z])",