[gtksourceview] Add better support for at-media query highlighting

[Paolo Borelli <pborelli src gnome org>]

commit 301de52ef96949f3a62c46e8b77a4e5ce8f6e263
Author: Tobias Schönberg <tobias47n9e gmail com>
Date:   Sun Jan 31 17:39:54 2016 +0100

    Add better support for at-media query highlighting
    
    Currently syntax highlighting has an inconistent behaviour
    after an at-media query. The patch adds some better rules
    to handle the contex highlighting, especially if the
    calls are nested. To correctly highlight the media
    queries the patch adds contexts for screen resolutions,
    media-features and media-feature values.
    The patch also adds a css test file.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=761056
    Fixes #761056

 data/language-specs/css.lang       |   80 ++++++++++++++++++++++++++++++++++++
 tests/syntax-highlighting/file.css |   35 ++++++++++++++++
 2 files changed, 115 insertions(+), 0 deletions(-)
---
diff --git a/data/language-specs/css.lang b/data/language-specs/css.lang
index e8065fc..e983dee 100644
--- a/data/language-specs/css.lang
+++ b/data/language-specs/css.lang
@@ -178,6 +178,10 @@
       <match>[\+-]?([0-9]+|[0-9]*\.[0-9]+)(%|e(m|x)|p(x|t|c)|in|ft|(m|c)m|k?Hz|deg|g?rad|m?s)</match>
     </context>
 
+    <context id="resolution" style-ref="dimension">
+      <match>[\+-]?([0-9]+|[0-9]*\.[0-9]+)(dpi|dpcm|dppx)</match>
+    </context>
+
     <context id="number" style-ref="decimal">
       <match>\b(0|[\+-]?[1-9][0-9]*)</match>
     </context>
@@ -199,6 +203,52 @@
       <match>\![ \t]*important</match>
     </context>
 
+    <context id="css3-media-features" style-ref="keyword">
+      <keyword>aspect-ratio</keyword>
+      <keyword>color-index</keyword>
+      <keyword>color</keyword>
+      <keyword>device-aspect-ratio</keyword>
+      <keyword>device-height</keyword>
+      <keyword>device-width</keyword>
+      <keyword>grid</keyword>
+      <keyword>height</keyword>
+      <keyword>max-aspect-ratio</keyword>
+      <keyword>max-color-index</keyword>
+      <keyword>max-color</keyword>
+      <keyword>max-device-aspect-ratio</keyword>
+      <keyword>max-device-height</keyword>
+      <keyword>max-device-width</keyword>
+      <keyword>max-height</keyword>
+      <keyword>max-monochrome</keyword>
+      <keyword>max-resolution</keyword>
+      <keyword>max-width</keyword>
+      <keyword>min-aspect-ratio</keyword>
+      <keyword>min-color-index</keyword>
+      <keyword>min-color</keyword>
+      <keyword>min-device-aspect-ratio</keyword>
+      <keyword>min-device-width</keyword>
+      <keyword>min-device-height</keyword>
+      <keyword>min-height</keyword>
+      <keyword>min-monochrome</keyword>
+      <keyword>min-resolution</keyword>
+      <keyword>min-width</keyword>
+      <keyword>monochrome</keyword>
+      <keyword>orientation</keyword>
+      <keyword>overflow-block</keyword>
+      <keyword>overflow-inline</keyword>
+      <keyword>resolution</keyword>
+      <keyword>scan</keyword>
+      <keyword>update-frequency</keyword>
+      <keyword>width</keyword>
+    </context>
+
+    <context id="css3-media-feature-values" style-ref="property-values">
+      <keyword>interlace</keyword>
+      <keyword>landscape</keyword>
+      <keyword>portrait</keyword>
+      <keyword>progressive</keyword>
+    </context>
+
     <context id="css3-property-names" style-ref="keyword">
       <suffix>(?=\s*:)</suffix>
       <keyword>align-content</keyword>
@@ -860,6 +910,36 @@
         <context ref="selector-id"/>
         <context ref="selector-class"/>
         <context ref="selector-tagname"/>
+        <context id="at-media-call">
+          <start>(?&lt;=(@media))</start>
+          <end>\{</end>
+          <include>
+            <context id="media-keywords" style-ref="at-rules">
+              <keyword>and</keyword>
+              <keyword>not</keyword>
+              <keyword>only</keyword>
+            </context>
+            <context id="media-types" style-ref="keyword">
+              <keyword>all</keyword>
+              <keyword>print</keyword>
+              <keyword>screen</keyword>
+              <keyword>speech</keyword>
+            </context>
+            <context id="at-media-arguments">
+              <start>\(</start>
+              <end>\)</end>
+              <include>
+                <context ref="css3-media-features"/>
+                <context ref="css3-media-feature-values"/>
+                <context ref="hexadecimal-color"/>
+                <context ref="resolution"/>
+                <context ref="dimension"/>
+                <context ref="float-number"/>
+                <context ref="number"/>
+              </include>
+            </context>
+          </include>
+        </context>
       </include>
     </context>
 
diff --git a/tests/syntax-highlighting/file.css b/tests/syntax-highlighting/file.css
new file mode 100644
index 0000000..1776246
--- /dev/null
+++ b/tests/syntax-highlighting/file.css
@@ -0,0 +1,35 @@
+#testid[type=text] {
+    font: 12px italic "Overpass";
+}
+
+p + div {
+    color: aqua;
+}
+
+.someclass,
+.otherclass {
+    font-size: 20px;
+}
+
+ul::before {}
+
+link:hover {}
+
+ import url("fineprint.css");
+
+ media all {
+    * ~ ul {
+        padding: 10px;
+    }
+    @media screen and (orientation: portrait) {
+        .heading > .news {
+            background-image: url(image.png);
+        }
+    }
+    @media print and (min-monochrome: 16) {
+        body {
+            color: #000;
+        }
+    }
+}
+