From 07749594df1e0f261664e44f4b7fba85c617594e Mon Sep 17 00:00:00 2001
From: OverflowCat <overflowcat@gmail.com>
Date: Tue, 17 Jun 2025 10:07:34 +0800
Subject: [PATCH] Add leading digit support for variable

Co-authored-by: yzqzss <30341059+yzqzss@users.noreply.github.com>
---
 grammars/css.cson |  8 +++-----
 spec/css-spec.mjs | 13 +++++++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/grammars/css.cson b/grammars/css.cson
index 6256e55..9b9dc03 100644
--- a/grammars/css.cson
+++ b/grammars/css.cson
@@ -1038,10 +1038,9 @@
             'name': 'variable.argument.css'
             'match': '''(?x)
               --
-              (?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter
-              (?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier
+              (?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]
                 |\\\\(?:[0-9a-fA-F]{1,6}|.)
-              )*
+              )+
             '''
           }
           {
@@ -1702,10 +1701,9 @@
         # Custom properties
         'match': '''(?x) (?<![\\w-])
           --
-          (?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter
           (?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier
             |\\\\(?:[0-9a-fA-F]{1,6}|.)
-          )*
+          )+
         '''
         'name': 'variable.css'
       }
diff --git a/spec/css-spec.mjs b/spec/css-spec.mjs
index 9086ed1..51bfe45 100644
--- a/spec/css-spec.mjs
+++ b/spec/css-spec.mjs
@@ -2463,6 +2463,12 @@ describe('CSS grammar', function () {
 			assert.deepStrictEqual(tokens[5], { scopes: ['source.css', 'meta.property-list.css', 'variable.css'], value: '--white' });
 		});
 
+		it('tokenizes custom properties with a leading digit', function () {
+			var tokens;
+			tokens = testGrammar.tokenizeLine('[data-test] { --4-grid-columns: calc(4 * var(--column-and-gap-width)); }').tokens;
+			assert.deepStrictEqual(tokens[6], { scopes: ['source.css', 'meta.property-list.css', 'variable.css'], value: '--4-grid-columns' });
+		});
+
 		it('tokenises commas between property values', function () {
 			var tokens;
 			tokens = testGrammar.tokenizeLine('a{ text-shadow: a, b; }').tokens;
@@ -2556,6 +2562,13 @@ describe('CSS grammar', function () {
 				assert.deepStrictEqual(tokens[9], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css', 'meta.function.variable.css', 'variable.argument.css'], value: '--primary-color' });
 			});
 
+			it('tokenizes custom variables with a leading digit', function () {
+				var tokens;
+				tokens = testGrammar.tokenizeLine('.flex { grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns); }').tokens;
+				assert.deepStrictEqual(tokens[10], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css', 'meta.function.variable.css', 'variable.argument.css'], value: '--7-grid-columns-minus-last-gap' });
+				assert.deepStrictEqual(tokens[15], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css', 'meta.function.variable.css', 'variable.argument.css'], value: '--4-grid-columns' });
+			});
+
 			it('tokenises numeric values correctly', function () {
 				var lines;
 				lines = testGrammar.tokenizeLines(".a   { a:       12em  }\n.a   { a:     4.01ex  }\n.a   { a:   -456.8ch  }\n.a   { a:      0.0REM }\n.a   { a:     +0.0vh  }\n.a   { a:     -0.0vw  }\n.a   { a:       .6px  }\n.a   { a:     10e3mm  }\n.a   { a:     10E3cm  }\n.a   { a:  -3.4e+2In  }\n.a   { a:  -3.4e-2ch  }\n.a   { a:    +.5E-2%  }\n.a   { a:   -3.4e-2%  }");