[gtksourceview] css.lang: Add support for @keyframes call / block

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

commit 93a734402b0b9ec018d6d16bb9814d5246cfa3d4
Author: Jeffery To <jeffery to gmail com>
Date:   Thu May 10 06:32:27 2018 +0800

    css.lang: Add support for @keyframes call / block
    
    This adds support for the @keyframes call (allowing strings for the
    keyframes name) and block (using percentages and "from"/"to" as
    selectors). This also adds a percetage context, split from dimension to
    support the keyframe selector.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=796130

 data/language-specs/css.lang       |   46 +++++++++++++++++++++++++++++++++++-
 tests/syntax-highlighting/file.css |    7 +++++
 2 files changed, 52 insertions(+), 1 deletions(-)
---
diff --git a/data/language-specs/css.lang b/data/language-specs/css.lang
index d60ea31..4827287 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="name"                  name="Name"/>
   </styles>
 
   <default-regex-options case-sensitive="false"/>
@@ -116,6 +117,10 @@
       )
     </define-regex>
 
+    <context id="name" style-ref="name">
+      <match>\%{identifier-regex}</match>
+    </context>
+
     <context id="selector-pseudo-elements-one-colon" style-ref="function">
       <prefix>::?</prefix>
       <keyword>first-line</keyword>
@@ -352,7 +357,11 @@
     <define-regex id="number-regex">(\d+|\d*\.\d+)(e[+-]?\d+)?</define-regex>
 
     <context id="dimension" style-ref="dimension">
-      
<match>[+-]?\%{number-regex}(%|e(m|x)|(v(h|w|min|max))|ch|fr|rem|p(x|t|c)|in|ft|(m|c)m|k?Hz|deg|g?rad|turn|m?s)</match>
+      
<match>[+-]?\%{number-regex}(e(m|x)|(v(h|w|min|max))|ch|fr|rem|p(x|t|c)|in|ft|(m|c)m|k?Hz|deg|g?rad|turn|m?s)</match>
+    </context>
+
+    <context id="percentage" style-ref="dimension">
+      <match>[+-]?\%{number-regex}%</match>
     </context>
 
     <context id="resolution" style-ref="dimension">
@@ -1261,6 +1270,7 @@
         <context ref="named-color"/>
         <context ref="function"/>
         <context ref="dimension"/>
+        <context ref="percentage"/>
         <context ref="number"/>
         <context ref="unicode-range"/>
         <context ref="importance-modifier"/>
@@ -1274,6 +1284,37 @@
       </include>
     </context>
 
+    <context id="keyframe-selector" style-ref="function">
+      <keyword>from</keyword>
+      <keyword>to</keyword>
+    </context>
+
+    <context id="at-keyframes-block" end-parent="true">
+      <start>\{</start>
+      <end>\}</end>
+      <include>
+        <context sub-pattern="0" where="start" style-ref="others-3"/>
+        <context sub-pattern="0" where="end" style-ref="others-3"/>
+        <context ref="def:c-like-comment-multiline"/>
+        <context ref="def:c-like-close-comment-outside-comment"/>
+        <context ref="percentage" style-ref="function"/>
+        <context ref="keyframe-selector"/>
+        <context ref="style-block"/>
+      </include>
+    </context>
+
+    <context id="at-keyframes-call">
+      <start>(?&lt;=@keyframes)</start>
+      <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="name"/>
+        <context ref="at-keyframes-block"/>
+      </include>
+    </context>
+
     <context id="punctuators" style-ref="others-3">
       <match>[{}();,]</match>
     </context>
@@ -1325,6 +1366,7 @@
         <context ref="named-color"/>
         <context ref="resolution"/>
         <context ref="dimension"/>
+        <context ref="percentage"/>
         <context ref="number"/>
         <context ref="css3-function-arguments"/>
         <context ref="function"/>
@@ -1351,6 +1393,7 @@
         <context ref="selector-id"/>
         <context ref="selector-class"/>
         <context ref="selector-tagname"/>
+        <context ref="at-keyframes-call"/>
         <context id="at-media-call">
           <start>(?&lt;=(@media))</start>
           <end>\{</end>
@@ -1375,6 +1418,7 @@
                 <context ref="hexadecimal-color"/>
                 <context ref="resolution"/>
                 <context ref="dimension"/>
+                <context ref="percentage"/>
                 <context ref="ratio"/>
                 <context ref="number"/>
               </include>
diff --git a/tests/syntax-highlighting/file.css b/tests/syntax-highlighting/file.css
index 783a45c..235a86b 100644
--- a/tests/syntax-highlighting/file.css
+++ b/tests/syntax-highlighting/file.css
@@ -19,6 +19,7 @@ p + div {
 .otherclass {
     font-size: 20px;
     opacity: .5;
+    width: 100%;
 }
 
 #headline:after {
@@ -49,6 +50,12 @@ div#\E9 dition .\0000E9dition .motion_\e9motion, /* Unicode character escape */
 
 @import URL("fineprint.css");
 
+@keyframes myanim {
+    from { opacity: 0.0; }
+    50%  { opacity: 0.5; }
+    to   { opacity: 1.0; }
+}
+
 @media all {
     * ~ ul {
         background-image: linear-gradient(to left top, #fff, blue);