add @media support

Author: tj

index.js

@@ -12,15 +12,23 @@ module.exports = function(css){
    */
 
   function stylesheet() {
-    var rules = [];
+    return { stylesheet: { rules: rules() }};
+  }
+
+  /**
+   * Parse ruleset.
+   */
+
+  function rules() {
     var node;
+    var rules = [];
     whitespace();
     comments();
-    while (node = atrule() || rule()) {
+    while (css[0] != '}' && (node = atrule() || rule())) {
       comments();
       rules.push(node);
     }
-    return { stylesheet: { rules: rules }};
+    return rules;
   }
 
   /**
@@ -155,6 +163,37 @@ module.exports = function(css){
     };
   }
 
+  /**
+   * Parse media.
+   */
+
+  function media() {
+    var m = match(/^@media *([^{]+)/);
+    if (!m) return;
+    var media = m[1].trim();
+
+    // {
+    if (!match(/^{\s*/)) return;
+    comments();
+
+    var style = rules();
+
+    // }
+    if (!match(/^}\s*/)) return;
+
+    return { media: media, rules: style };
+  }
+
+  /**
+   * Parse import
+   */
+
+  function atimport() {
+    var m = match(/^@import *([^;\n]+);\s*/);
+    if (!m) return;
+    return { import: m[1].trim() };
+  }
+
   /**
    * Parse declarations.
    */
@@ -178,22 +217,13 @@ module.exports = function(css){
     return decls;
   }
 
-  /**
-   * Parse import
-   */
-
-  function atimport() {
-    var m = match(/^@import *([^;\n]+);\s*/);
-    if (!m) return;
-    return { import: m[1].trim() };
-  }
-
   /**
    * Parse at rule.
    */
 
   function atrule() {
     return keyframes()
+      || media()
       || atimport();
   }
 

test/cases/media.css

@@ -0,0 +1,21 @@
+@media screen, projection {
+  html {
+    background: #fffef0;
+    color: #300;
+  }
+  body {
+    max-width: 35em;
+    margin: 0 auto;
+  }
+}
+
+@media print {
+  html {
+    background: #fff;
+    color: #000;
+  }
+  body {
+    padding: 1in;
+    border: 0.5pt solid #666;
+  }
+}

test/cases/media.json

@@ -0,0 +1,68 @@
+{
+  "stylesheet": {
+    "rules": [
+      {
+        "media": "screen, projection",
+        "rules": [
+          {
+            "selector": "html",
+            "declarations": [
+              {
+                "property": "background",
+                "value": "#fffef0"
+              },
+              {
+                "property": "color",
+                "value": "#300"
+              }
+            ]
+          },
+          {
+            "selector": "body",
+            "declarations": [
+              {
+                "property": "max-width",
+                "value": "35em"
+              },
+              {
+                "property": "margin",
+                "value": "0 auto"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "media": "print",
+        "rules": [
+          {
+            "selector": "html",
+            "declarations": [
+              {
+                "property": "background",
+                "value": "#fff"
+              },
+              {
+                "property": "color",
+                "value": "#000"
+              }
+            ]
+          },
+          {
+            "selector": "body",
+            "declarations": [
+              {
+                "property": "padding",
+                "value": "1in"
+              },
+              {
+                "property": "border",
+                "value": "0.5pt solid #666"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}