[gtksourceview] css.lang: Add highlighting for vendor prefixed values

[Sébastien Wilmet <swilmet src gnome org>]

commit c451ac66064bf661745a72fb5a4e922ac7bec284
Author: Jeffery To <jeffery to gmail com>
Date:   Thu May 10 06:48:37 2018 +0800

    css.lang: Add highlighting for vendor prefixed values
    
    This adds highlightening for vendor-specific pseudo-elements,
    pseudo-classes, at-rules, property names, property values, and
    functions.
    
    Fixes bug 761053.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=796130

 data/language-specs/css.lang       |  101 ++++++++++++++++++++++++++++--------
 tests/syntax-highlighting/file.css |   20 +++++++-
 2 files changed, 98 insertions(+), 23 deletions(-)
---
diff --git a/data/language-specs/css.lang b/data/language-specs/css.lang
index 4827287..7a70c6d 100644
--- a/data/language-specs/css.lang
+++ b/data/language-specs/css.lang
@@ -59,6 +59,7 @@
     <style id="selector-id"           name="ID Selector"           map-to="def:statement"/>
     <style id="selector-class"        name="Class Selector"        map-to="def:identifier"/>
     <style id="selector-tagname"      name="Tag Name Selector"     map-to="def:type"/>
+    <style id="vendor-specific"       name="Vendor Specific"       map-to="def:warning"/>
     <style id="name"                  name="Name"/>
   </styles>
 
@@ -117,10 +118,29 @@
       )
     </define-regex>
 
+    <!--
+    https://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
+    https://en.wikipedia.org/wiki/CSS_hack#List_of_prefixes
+    -->
+    <define-regex id="vendor-specific-identifier-regex" extended="true">
+      (?:
+        (?:
+          [_-] \%{identifier-start-char-regex} \%{identifier-char-regex}* |
+          mso |
+          prince
+        )
+        - \%{identifier-char-regex}+
+      )
+    </define-regex>
+
     <context id="name" style-ref="name">
       <match>\%{identifier-regex}</match>
     </context>
 
+    <context id="selector-vendor-specific-pseudo-elements-classes" style-ref="vendor-specific">
+      <match>::?\%{vendor-specific-identifier-regex}</match>
+    </context>
+
     <context id="selector-pseudo-elements-one-colon" style-ref="function">
       <prefix>::?</prefix>
       <keyword>first-line</keyword>
@@ -163,6 +183,10 @@
       <keyword>lang</keyword>
     </context>
 
+    <context id="vendor-specific-at-rules" style-ref="vendor-specific">
+      <match>@\%{vendor-specific-identifier-regex}</match>
+    </context>
+
     <context id="css3-at-rules" style-ref="at-rules">
       <prefix>@</prefix>
       <keyword>annotation</keyword>
@@ -380,6 +404,47 @@
       <match>u\+[a-f0-9?]{1,6}(-[a-f0-9]{1,6})?</match>
     </context>
 
+    <context id="function-arguments-list">
+      <include>
+        <context ref="def:string"/>
+        <context ref="def:single-quoted-string"/>
+        <context ref="hexadecimal-color"/>
+        <context ref="css3-named-color"/>
+        <context ref="named-color"/>
+        <context ref="resolution"/>
+        <context ref="dimension"/>
+        <context ref="percentage"/>
+        <context ref="number"/>
+        <context ref="css3-function-arguments"/>
+        <context ref="vendor-specific-function"/>
+        <context ref="function"/>
+      </include>
+    </context>
+
+    <context id="vendor-specific-function">
+      <start>\%{vendor-specific-identifier-regex}\(</start>
+      <end>\)</end>
+      <include>
+        <context sub-pattern="0" where="start" style-ref="vendor-specific"/>
+        <context sub-pattern="0" where="end" style-ref="vendor-specific"/>
+        <context ref="def:c-like-comment-multiline"/>
+        <context ref="def:c-like-close-comment-outside-comment"/>
+        <context ref="function-arguments-list"/>
+      </include>
+    </context>
+
+    <context id="function">
+      <start>\%{identifier-regex}\(</start>
+      <end>\)</end>
+      <include>
+        <context sub-pattern="0" where="start" style-ref="function"/>
+        <context sub-pattern="0" where="end" style-ref="function"/>
+        <context ref="def:c-like-comment-multiline"/>
+        <context ref="def:c-like-close-comment-outside-comment"/>
+        <context ref="function-arguments-list"/>
+      </include>
+    </context>
+
     <context id="importance-modifier" style-ref="keyword">
       <match>\![ \t]*important</match>
     </context>
@@ -430,6 +495,10 @@
       <keyword>progressive</keyword>
     </context>
 
+    <context id="vendor-specific-property-names" style-ref="vendor-specific">
+      <match>\%{vendor-specific-identifier-regex}(?=\s*:)</match>
+    </context>
+
     <context id="svg-property-names" style-ref="keyword">
       <suffix>(?=\s*:)</suffix>
       <keyword>clip-path</keyword>
@@ -726,6 +795,10 @@
       <keyword>z-index</keyword>
     </context>
 
+    <context id="vendor-specific-property-values" style-ref="vendor-specific">
+      <match>\%{vendor-specific-identifier-regex}</match>
+    </context>
+
     <context id="animatable-properties" style-ref="property-values">
       <keyword>background-color</keyword>
       <keyword>background-position</keyword>
@@ -1262,21 +1335,25 @@
         <context ref="def:single-quoted-string"/>
         <context ref="def:c-like-comment-multiline"/>
         <context ref="def:c-like-close-comment-outside-comment"/>
+        <context ref="vendor-specific-at-rules"/>
         <context ref="css3-at-rules"/>
         <context ref="at-rules"/>
         <context ref="style-block"/>
         <context ref="hexadecimal-color"/>
         <context ref="css3-named-color"/>
         <context ref="named-color"/>
+        <context ref="vendor-specific-function"/>
         <context ref="function"/>
         <context ref="dimension"/>
         <context ref="percentage"/>
         <context ref="number"/>
         <context ref="unicode-range"/>
         <context ref="importance-modifier"/>
+        <context ref="vendor-specific-property-names"/>
         <context ref="svg-property-names"/>
         <context ref="css3-property-names"/>
         <context ref="property-names"/>
+        <context ref="vendor-specific-property-values"/>
         <context ref="animatable-properties"/>
         <context ref="svg-property-values"/>
         <context ref="css3-property-values"/>
@@ -1351,38 +1428,18 @@
       </include>
     </context>
 
-    <context id="function">
-      <start>\%{identifier-regex}\(</start>
-      <end>\)</end>
-      <include>
-        <context sub-pattern="0" where="start" style-ref="function"/>
-        <context sub-pattern="0" where="end" style-ref="function"/>
-        <context ref="def:string"/>
-        <context ref="def:single-quoted-string"/>
-        <context ref="def:escape"/>
-        <context ref="def:line-continue"/>
-        <context ref="hexadecimal-color"/>
-        <context ref="css3-named-color"/>
-        <context ref="named-color"/>
-        <context ref="resolution"/>
-        <context ref="dimension"/>
-        <context ref="percentage"/>
-        <context ref="number"/>
-        <context ref="css3-function-arguments"/>
-        <context ref="function"/>
-      </include>
-    </context>
-
     <context id="css" class="no-spell-check">
       <include>
         <context ref="def:string"/>
         <context ref="def:single-quoted-string"/>
         <context ref="def:c-like-comment-multiline"/>
         <context ref="def:c-like-close-comment-outside-comment"/>
+        <context ref="selector-vendor-specific-pseudo-elements-classes"/>
         <context ref="selector-pseudo-elements-one-colon"/>
         <context ref="selector-pseudo-elements"/>
         <context ref="selector-pseudo-classes"/>
         <context ref="selector-nth-argument"/>
+        <context ref="vendor-specific-at-rules"/>
         <context ref="css3-at-rules"/>
         <context ref="at-rules"/>
         <context ref="style-block"/>
diff --git a/tests/syntax-highlighting/file.css b/tests/syntax-highlighting/file.css
index 235a86b..e428042 100644
--- a/tests/syntax-highlighting/file.css
+++ b/tests/syntax-highlighting/file.css
@@ -37,6 +37,16 @@ INPUT::PLACEHOLDER {
     COLOR: REBECCAPURPLE;
 }
 
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type=number] {
+    -moz-appearance: textfield;
+}
+
 #-- .--hello-world, /* two hyphens: https://stackoverflow.com/a/30822662 */
 .-❤#-español.♫#你好, /* leading hyphen, non-ASCII */
 span.\. + .\+\ space\@\>, /* special character escape */
@@ -50,6 +60,12 @@ div#\E9 dition .\0000E9dition .motion_\e9motion, /* Unicode character escape */
 
 @import URL("fineprint.css");
 
+@-webkit-keyframes myanim {
+    from { opacity: 0.0; }
+    50%  { opacity: 0.5; }
+    to   { opacity: 1.0; }
+}
+
 @keyframes myanim {
     from { opacity: 0.0; }
     50%  { opacity: 0.5; }
@@ -58,7 +74,8 @@ div#\E9 dition .\0000E9dition .motion_\e9motion, /* Unicode character escape */
 
 @media all {
     * ~ ul {
-        background-image: linear-gradient(to left top, #fff, blue);
+        background-image: -webkit-linear-gradient(to left top, #fff, blue);
+        background-image:         linear-gradient(to left top, #fff, blue);
         padding: 10VW;
     }
     @media screen and (orientation: portrait) {
@@ -67,6 +84,7 @@ div#\E9 dition .\0000E9dition .motion_\e9motion, /* Unicode character escape */
         }
         .grid {
             grid-template-columns: repeat(2, minmax(max-content, 300px) 1fr) 100px;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
         }
     }
     @media print and (min-monochrome: 16) {