[gtksourceview/gtksourceview-4-2] css.lang: Add highlighting for custom properties (css variables)

[Christian Hergert <chergert src gnome org>]

commit cfc1a46f5a169d1b278f1e6f85b82b75b890980e
Author: Jeffery To <jeffery to gmail com>
Date:   Tue Jul 23 06:36:36 2019 +0800

    css.lang: Add highlighting for custom properties (css variables)
    
    https://developer.mozilla.org/en-US/docs/Web/CSS/--*
    https://developer.mozilla.org/en-US/docs/Web/CSS/var

 data/language-specs/css.lang        | 25 +++++++++++++++++++++++++
 tests/syntax-highlighting/file.css  |  5 +++++
 tests/syntax-highlighting/file.less |  5 +++++
 tests/syntax-highlighting/file.scss |  5 +++++
 4 files changed, 40 insertions(+)
---
diff --git a/data/language-specs/css.lang b/data/language-specs/css.lang
index 79c05ec5..12e598e8 100644
--- a/data/language-specs/css.lang
+++ b/data/language-specs/css.lang
@@ -59,6 +59,7 @@
 
     <!-- style properties -->
     <style id="property-name"               name="Property Name"               map-to="def:keyword"/>
+    <style id="custom-property-name"        name="Custom Property Name"        map-to="def:identifier"/>
 
     <!-- modifiers -->
     <style id="modifier"                    name="Modifier"                    map-to="def:keyword"/>
@@ -181,6 +182,11 @@
       )
     </define-regex>
 
+    <!-- https://drafts.csswg.org/css-variables/#defining-variables -->
+    <define-regex id="custom-property-identifier" extended="true">
+      (?: -- \%{identifier-chars}+ )
+    </define-regex>
+
     <define-regex id="declaration-value-end">(?=[!;}])</define-regex>
 
     <define-regex id="test-value-end">(?=\))</define-regex>
@@ -220,6 +226,10 @@
       <match>\%{vendor-specific-identifier}</match>
     </context>
 
+    <context id="custom-property-name" style-ref="custom-property-name">
+      <match>\%{custom-property-identifier}</match>
+    </context>
+
     <context id="escape" style-ref="escape">
       <match>\%{escape}</match>
     </context>
@@ -553,6 +563,19 @@
       </include>
     </context>
 
+    <!-- https://drafts.csswg.org/css-variables/#using-variables -->
+    <context id="var">
+      <start>var\(</start>
+      <end>\)</end>
+      <include>
+        <context sub-pattern="0" where="start" style-ref="function"/>
+        <context sub-pattern="0" where="end" style-ref="function"/>
+        <context ref="comment"/>
+        <context ref="custom-property-name"/>
+        <context ref="function-content"/>
+      </include>
+    </context>
+
     <context id="function-content">
       <include>
         <context ref="css3-function-arguments"/>
@@ -586,6 +609,7 @@
       <include>
         <context ref="vendor-specific-function"/>
         <context ref="url"/>
+        <context ref="var"/>
         <context ref="function"/>
       </include>
     </context>
@@ -1465,6 +1489,7 @@
     <context id="property-name">
       <include>
         <context ref="vendor-specific-name"/>
+        <context ref="custom-property-name"/>
         <context ref="svg-property-names"/>
         <context ref="css3-property-names"/>
         <context ref="property-names"/>
diff --git a/tests/syntax-highlighting/file.css b/tests/syntax-highlighting/file.css
index d1d45378..72743906 100644
--- a/tests/syntax-highlighting/file.css
+++ b/tests/syntax-highlighting/file.css
@@ -229,6 +229,11 @@ svg|[fill] { /* attribute */
 
     /* animatable */
     transition-property: height, font-size, visibility;
+
+    /* custom properties */
+    --my-custom-color: #fff;
+    color: var(--my-custom-color);
+    background-color: var(--my-custom-color, white);
 }
 
 /*
diff --git a/tests/syntax-highlighting/file.less b/tests/syntax-highlighting/file.less
index de60b8c0..f19b6037 100644
--- a/tests/syntax-highlighting/file.less
+++ b/tests/syntax-highlighting/file.less
@@ -651,6 +651,11 @@ svg|[fill] { /* attribute */
 
     /* animatable */
     transition-property: height, font-size, visibility;
+
+    /* custom properties */
+    --my-custom-color: #fff;
+    color: var(--my-custom-color);
+    background-color: var(--my-custom-color, white);
 }
 
 /*
diff --git a/tests/syntax-highlighting/file.scss b/tests/syntax-highlighting/file.scss
index 76dbd223..888044c6 100644
--- a/tests/syntax-highlighting/file.scss
+++ b/tests/syntax-highlighting/file.scss
@@ -676,6 +676,11 @@ svg|[fill] { /* attribute */
 
     /* animatable */
     transition-property: height, font-size, visibility;
+
+    /* custom properties */
+    --my-custom-color: #fff;
+    color: var(--my-custom-color);
+    background-color: var(--my-custom-color, white);
 }
 
 /*