Merge pull request reworkcss#39 from paulyoung/34-at-rule-above-comment

Comments above at-rules

Author: tj

index.js

@@ -263,13 +263,12 @@ module.exports = function(css, options){
     var name = m[1];
 
     if (!open()) return error("@keyframes missing '{'");
-    comments();
 
     var frame;
-    var frames = [];
+    var frames = comments();
     while (frame = keyframe()) {
       frames.push(frame);
-      comments();
+      frames = frames.concat(comments());
     }
 
     if (!close()) return error("@keyframes missing '}'");
@@ -294,9 +293,8 @@ module.exports = function(css, options){
     var supports = m[1].trim();
 
     if (!open()) return error("@supports missing '{'");
-    comments();
 
-    var style = rules();
+    var style = comments().concat(rules());
 
     if (!close()) return error("@supports missing '}'");
 
@@ -319,9 +317,8 @@ module.exports = function(css, options){
     var media = m[1].trim();
 
     if (!open()) return error("@media missing '{'");
-    comments();
 
-    var style = rules();
+    var style = comments().concat(rules());
 
     if (!close()) return error("@media missing '}'");
 
@@ -342,16 +339,15 @@ module.exports = function(css, options){
     if (!m) return;
 
     var sel = selector() || [];
-    var decls = [];
 
     if (!open()) return error("@page missing '{'");
-    comments();
+    var decls = comments();
 
     // declarations
     var decl;
     while (decl = declaration()) {
       decls.push(decl);
-      comments();
+      decls = decls.concat(comments());
     }
 
     if (!close()) return error("@page missing '}'");
@@ -376,9 +372,8 @@ module.exports = function(css, options){
     var doc = m[2].trim();
 
     if (!open()) return error("@document missing '{'");
-    comments();
 
-    var style = rules();
+    var style = comments().concat(rules());
 
     if (!close()) return error("@document missing '}'");
 

test/cases/document.css

@@ -1,5 +1,7 @@
 @-moz-document url-prefix() {
+  /* ui above */
   .ui-select .ui-btn select {
+    /* ui inside */
     opacity:.0001
   }
 }

test/cases/document.json

@@ -7,35 +7,63 @@
         "document": "url-prefix()",
         "vendor": "-moz-",
         "rules": [
+          {
+            "type": "comment",
+            "comment": " ui above ",
+            "position": {
+              "start": {
+                "line": 2,
+                "column": 3
+              },
+              "end": {
+                "line": 2,
+                "column": 17
+              }
+            }
+          },
           {
             "type": "rule",
             "selectors": [
               ".ui-select .ui-btn select"
             ],
             "declarations": [
+              {
+                "type": "comment",
+                "comment": " ui inside ",
+                "position": {
+                  "start": {
+                    "line": 4,
+                    "column": 5
+                  },
+                  "end": {
+                    "line": 4,
+                    "column": 20
+                  }
+                }
+              },
               {
                 "type": "declaration",
                 "property": "opacity",
                 "value": ".0001",
                 "position": {
                   "start": {
-                    "line": 3,
+                    "line": 5,
                     "column": 5
                   },
                   "end": {
-                    "line": 4,
+                    "line": 6,
                     "column": 3
                   }
                 }
               }
             ],
             "position": {
               "start": {
-                "line": 2,
+                "line": 3,
                 "column": 3
               },
               "end": {
-                "line": 4,
+                "line": 6,
                 "column": 4
               }
             }
@@ -47,7 +75,7 @@
             "column": 1
           },
           "end": {
-            "line": 5,
+            "line": 7,
             "column": 2
           }
         }

test/cases/keyframes.css

@@ -1,8 +1,13 @@
 @keyframes fade {
+  /* from above */
   from {
+    /* from inside */
     opacity: 0;
   }
+
+  /* to above */
   to {
+    /* to inside */
     opacity: 1;
   }
 }

test/cases/keyframes.json

@@ -6,68 +6,124 @@
         "type": "keyframes",
         "name": "fade",
         "keyframes": [
+          {
+            "type": "comment",
+            "comment": " from above ",
+            "position": {
+              "start": {
+                "line": 2,
+                "column": 3
+              },
+              "end": {
+                "line": 2,
+                "column": 19
+              }
+            }
+          },
           {
             "type": "keyframe",
             "values": [
               "from"
             ],
             "declarations": [
+              {
+                "type": "comment",
+                "comment": " from inside ",
+                "position": {
+                  "start": {
+                    "line": 4,
+                    "column": 5
+                  },
+                  "end": {
+                    "line": 4,
+                    "column": 22
+                  }
+                }
+              },
               {
                 "type": "declaration",
                 "property": "opacity",
                 "value": "0",
                 "position": {
                   "start": {
-                    "line": 3,
+                    "line": 5,
                     "column": 5
                   },
                   "end": {
-                    "line": 3,
+                    "line": 5,
                     "column": 15
                   }
                 }
               }
             ],
             "position": {
               "start": {
-                "line": 2,
+                "line": 3,
                 "column": 3
               },
               "end": {
-                "line": 4,
+                "line": 6,
                 "column": 4
               }
             }
           },
+          {
+            "type": "comment",
+            "comment": " to above ",
+            "position": {
+              "start": {
+                "line": 8,
+                "column": 3
+              },
+              "end": {
+                "line": 8,
+                "column": 17
+              }
+            }
+          },
           {
             "type": "keyframe",
             "values": [
               "to"
             ],
             "declarations": [
+              {
+                "type": "comment",
+                "comment": " to inside ",
+                "position": {
+                  "start": {
+                    "line": 10,
+                    "column": 5
+                  },
+                  "end": {
+                    "line": 10,
+                    "column": 20
+                  }
+                }
+              },
               {
                 "type": "declaration",
                 "property": "opacity",
                 "value": "1",
                 "position": {
                   "start": {
-                    "line": 6,
+                    "line": 11,
                     "column": 5
                   },
                   "end": {
-                    "line": 6,
+                    "line": 11,
                     "column": 15
                   }
                 }
               }
             ],
             "position": {
               "start": {
-                "line": 5,
+                "line": 9,
                 "column": 3
               },
               "end": {
-                "line": 7,
+                "line": 12,
                 "column": 4
               }
             }
@@ -79,7 +135,7 @@
             "column": 1
           },
           "end": {
-            "line": 8,
+            "line": 13,
             "column": 2
           }
         }

test/cases/media.css

@@ -1,9 +1,14 @@
 @media screen, projection {
+  /* html above */
   html {
+    /* html inside */
     background: #fffef0;
     color: #300;
   }
+
+  /* body above */
   body {
+    /* body inside */
     max-width: 35em;
     margin: 0 auto;
   }