From 1dc4f1b49efeca21e9030c2e3d1de1ffad96b546 Mon Sep 17 00:00:00 2001
From: Rob Brackett <rob@robbrackett.com>
Date: Sun, 28 Apr 2013 17:29:52 -0700
Subject: [PATCH] VASTLY improved parser.

---
 TODO                 |   8 ++
 lib/element-query.js |  10 +-
 lib/parser-old.js    | 101 ++++++++++++++++
 lib/parser.js        | 278 +++++++++++++++++++++++++++++++++----------
 test/test.css        |  96 +++++++++------
 5 files changed, 389 insertions(+), 104 deletions(-)
 create mode 100644 TODO
 create mode 100644 lib/parser-old.js

diff --git a/TODO b/TODO
new file mode 100644
index 0000000..a34724f
--- /dev/null
+++ b/TODO
@@ -0,0 +1,8 @@
+- Not/or/only for media queries
+- Support alternative syntax (use the .query-property-value class name) so we don't need to (re)load via XHR
+- Unit tests
+- Packaging support
+- Other query types
+- Plugin hooks for queries
+- Explanation of how/why it differs from MediaClass (especially w/r/t "available" space)
+- Support html:media() by synthesizing actual @media(){} rules
diff --git a/lib/element-query.js b/lib/element-query.js
index f046e8e..cf44090 100644
--- a/lib/element-query.js
+++ b/lib/element-query.js
@@ -88,8 +88,9 @@ var elementQuery = (function() {
     // parse a single CSSStyleSheet object for element queries
     loadStyleSheet: function(sheet, callback) {
       if (sheet.ownerNode.nodeName === "STYLE") {
-        var newStyles = elementQuery.parser.parseStyleText(sheet.ownerNode.innerHTML);
-        sheet.ownerNode.innerHTML += newStyles;
+        var result = elementQuery.parser.parseStyleText(sheet.ownerNode.innerHTML);
+        sheet.ownerNode.innerHTML += result.newCss;
+        elementQuery.queries = elementQuery.queries.concat(result.queries);
         callback && callback();
       }
       else if (sheet.href) {
@@ -98,9 +99,10 @@ var elementQuery = (function() {
         xhr.onreadystatechange = function() {
           if (xhr.readyState === 4) {
             if (xhr.status === 200) {
-              var newStyles = elementQuery.parser.parseStyleText(xhr.responseText);
+              var result = elementQuery.parser.parseStyleText(xhr.responseText);
+              elementQuery.queries = elementQuery.queries.concat(result.queries);
               var style = document.createElement("style");
-              style.innerHTML = newStyles;
+              style.innerHTML = result.newCss;
               document.body.appendChild(style);
             }
             else if (window.console) {
diff --git a/lib/parser-old.js b/lib/parser-old.js
new file mode 100644
index 0000000..87037bf
--- /dev/null
+++ b/lib/parser-old.js
@@ -0,0 +1,101 @@
+(function(elementQuery) {
+  // Regexes for parsing
+  var COMMENT_PATTERN = /(\/\*)[\s\S]*?(\*\/)/g;
+  var CSS_RULE_PATTERN = /\s*([^{]+)\{([^}]*)\}\s*/g;
+  var QUERY_PATTERN = /:media\s*\(([^)]*)\)/g;
+  var QUERY_RULES_PATTERN = /\(?([^\s:]+):\s*(\d+(?:\.\d+)?)(px|em|rem|vw|vh|vmin|vmax)\)?/g;
+  var MEDIA_PATTERN = /(@media[^{]*)\{((?:\s*([^{]+)\{([^}]*)\}\s*)*)\}/g;
+
+  /**
+   * el-cheapo parser. It at least screws up nested @media rules
+   * and puts things that were in @media rules out-of-order
+   */
+  elementQuery.parser = {
+    // parse the raw text of a style sheet for element queries
+    parseStyleText: function(sheet) {
+      // new stylesheet content to add (replacing rules with `:media()` in them)
+      var newRules = "";
+
+      // remove comments
+      sheet = sheet.replace(COMMENT_PATTERN, "");
+
+      // manage vanilla media queries
+      var mediaRules = "";
+      var parser = this;
+      sheet = sheet.replace(MEDIA_PATTERN, function(mediaString, query, content) {
+        var newMediaRules = parser.parseStyleText(content);
+        if (!/^\s*$/.test(newMediaRules)) {
+          mediaRules += query + "{\n" + newMediaRules + "\n}\n";
+        }
+        return "";
+      });
+
+      var ruleMatch;
+      while (ruleMatch = CSS_RULE_PATTERN.exec(sheet)) {
+        var results = this.queriesForSelector(ruleMatch[1]);
+        if (results.queries.length) {
+          newRules += results.selector + "{" + ruleMatch[2] + "}\n";
+          elementQuery.queries.push.apply(elementQuery.queries, results.queries);
+        }
+      }
+      return newRules + "\n" + mediaRules;
+    },
+
+    // find all the queries in a selector
+    queriesForSelector: function(selectorString) {
+      var selectors = selectorString.split(",");
+      var selectorResults = [];
+      var queryResults = [];
+      for (var i = 0, len = selectors.length; i < len; i++) {
+        var result = this.queriesForSingleSelector(selectors[i]);
+        selectorResults.push(result.selector);
+        queryResults = queryResults.concat(result.queries);
+      }
+      return {
+        selector: selectorResults.join(","),
+        queries: queryResults
+      };
+    },
+    
+    // find all the queries in a *single* selector (i.e. no commas)
+    queriesForSingleSelector: function(selectorString) {
+      var queries = [];
+      var newSelector = "";
+      var lastIndex = 0;
+      var queryMatch;
+      while (queryMatch = QUERY_PATTERN.exec(selectorString)) {
+        var querySelector = selectorString.slice(0, queryMatch.index);
+        var queryRules = this.parseQuery(queryMatch[1]);
+        var className = elementQuery.classNameForRules(queryRules);
+        newSelector += selectorString.slice(lastIndex, queryMatch.index);
+        lastIndex = queryMatch.index + queryMatch[0].length;
+        queries.push({
+          selector: newSelector,
+          className: className,
+          rules: queryRules
+        });
+        newSelector += "." + className;
+      }
+      newSelector += selectorString.slice(lastIndex);
+      return {
+        selector: newSelector,
+        queries: queries
+      };
+    },
+
+    // find the actual queried properties in an element query
+    parseQuery: function(queryString) {
+      var rules = [];
+      var ruleMatch;
+      while (ruleMatch = QUERY_RULES_PATTERN.exec(queryString)) {
+        rules.push({
+          property: ruleMatch[1],
+          value: parseFloat(ruleMatch[2]),
+          units: ruleMatch[3]
+        });
+      }
+      return rules;
+    }
+  };
+
+}(elementQuery));
\ No newline at end of file
diff --git a/lib/parser.js b/lib/parser.js
index 87037bf..6a5621b 100644
--- a/lib/parser.js
+++ b/lib/parser.js
@@ -1,89 +1,237 @@
 (function(elementQuery) {
-  // Regexes for parsing
+
+  // Identifies comments in CSS
   var COMMENT_PATTERN = /(\/\*)[\s\S]*?(\*\/)/g;
-  var CSS_RULE_PATTERN = /\s*([^{]+)\{([^}]*)\}\s*/g;
+  // $1 is the end of a block ("}")
+  // $2 is all of a simple @rule ("@something ...;")
+  // $3 is the start of a rule with a block, excluding the opening {
+  //    this could be an @media rule or a simple style rule.
+  var STATEMENT_END_OR_START_PATTERN = /\s*(?:(\})|(@\S+\s+[^;{]+;)|(?:([^{}]+)\{))/g;
+  // element queries look like:
+  // `:media(property: value)` or `:media((property: value) and (property: value))`
   var QUERY_PATTERN = /:media\s*\(([^)]*)\)/g;
   var QUERY_RULES_PATTERN = /\(?([^\s:]+):\s*(\d+(?:\.\d+)?)(px|em|rem|vw|vh|vmin|vmax)\)?/g;
-  var MEDIA_PATTERN = /(@media[^{]*)\{((?:\s*([^{]+)\{([^}]*)\}\s*)*)\}/g;
+  var WHITESPACE_PATTERN = /^\s*$/;
 
-  /**
-   * el-cheapo parser. It at least screws up nested @media rules
-   * and puts things that were in @media rules out-of-order
-   */
+  // Parse CSS content for element queries
   elementQuery.parser = {
-    // parse the raw text of a style sheet for element queries
-    parseStyleText: function(sheet) {
-      // new stylesheet content to add (replacing rules with `:media()` in them)
-      var newRules = "";
+    /**
+     * This the main entry point for parsing some CSS. Pass it a string of
+     * CSS content and you'll get back an object like:
+     *   {
+     *     queries: [array of query objects]
+     *     newCss: [string of new CSS]
+     *   }
+     * The `newCss` property contains new CSS rules to use in place of the
+     * rules that have element queries -- they replace the queries in selectors
+     * with classes you can turn on and off on the relevant elements. You'll 
+     * want to insert the new CSS content into a <style> element on your page.
+     * 
+     * @param  {String} styleText The text of a style sheet
+     * @return {Object}
+     */
+    parseStyleText: function(styleText) {
+      var newText = "";
+      var queries = [];
 
-      // remove comments
-      sheet = sheet.replace(COMMENT_PATTERN, "");
-
-      // manage vanilla media queries
-      var mediaRules = "";
-      var parser = this;
-      sheet = sheet.replace(MEDIA_PATTERN, function(mediaString, query, content) {
-        var newMediaRules = parser.parseStyleText(content);
-        if (!/^\s*$/.test(newMediaRules)) {
-          mediaRules += query + "{\n" + newMediaRules + "\n}\n";
+      this.parseText(styleText, {
+        // TODO: don't write a media query to newText if it has no element 
+        // queries. Unfortunately that means tracking nesting level :\
+        mediaQuery: function(selector) {
+          newText += "\n" + selector + "{";
+        },
+
+        endMediaQuery: function() {
+          newText += "\n}";
+        },
+
+        rule: function(selector, properties) {
+          // a selector is an array of selectors, which are arrays in the form:
+          // [text, elementQuery, text, elementQuery, etc., optional text]
+          // TODO: maybe have a callback for each? May simplify the logic here.
+          for (var i = 0, len = selector.length; i < len; i++) {
+            var single = selector[i];
+
+            // we're going to build up a new selector in `selectorSoFar`, 
+            // replacing the element queries with classes.
+            var selectorSoFar = "";
+
+            // jump by two since we are dealing with [text, query] pairs
+            for (var j = 0, lenj = single.length; j < lenj; j += 2) {
+              // add text content to the selector
+              selectorSoFar += single[j];
+              var rules = single[j + 1];
+              // we may have trailing text at the end, in which case there will
+              // be no associated query rules.
+              if (rules) {
+                var queryClass = elementQuery.classNameForRules(rules);
+                // create and add a query object for this element query
+                queries.push({
+                  selector: selectorSoFar,
+                  rules: rules,
+                  className: queryClass
+                });
+                // replace the query in the selector with a class
+                selectorSoFar += "." + queryClass;
+              }
+            }
+
+            // Add this selector to our new CSS
+            newText += selectorSoFar + (i < len - 1 ? "," : "");
+          }
+
+          // Add the actual style rule content
+          newText += " {" + properties + "}";
         }
-        return "";
       });
 
-      var ruleMatch;
-      while (ruleMatch = CSS_RULE_PATTERN.exec(sheet)) {
-        var results = this.queriesForSelector(ruleMatch[1]);
-        if (results.queries.length) {
-          newRules += results.selector + "{" + ruleMatch[2] + "}\n";
-          elementQuery.queries.push.apply(elementQuery.queries, results.queries);
+      return {
+        queries: queries,
+        newCss: newText
+      };
+    },
+
+    /**
+     * Parse the text of a stylesheet. Usually, you'll want to use 
+     * parseStyleText() instead; this is slightly lower-level. You should
+     * provide an object with callbacks for the parsing events you are 
+     * interested in:
+     *   {
+     *     mediaQuery: 
+     *       The start of a media rule was encountered. Receives everything 
+     *       from the "@" to the "{" as the first argument.
+     *     endMediaQuery: 
+     *       The end of a media rule was encountered. No arguments.
+     *     rule: 
+     *       A normal style rule was encountered. Receives the parsed selector
+     *       as the first argument and the string of properties and values the
+     *       rule would apply to matched elements as the second argument.
+     *   }
+     *
+     * There is no return value for this function.
+     * 
+     * @param  {String} styleText The text of a stylesheet to parse.
+     * @param  {Object} callbacks An object containing callbacks for the parsing
+     *                            events you are interested in.
+     */
+    parseText: function(styleText, callbacks) {
+      callbacks = callbacks || {};
+
+      // remove comments
+      var text = styleText.replace(COMMENT_PATTERN, "");
+      
+      // iterate through all the CSS rules
+      while (match = STATEMENT_END_OR_START_PATTERN.exec(text)) {
+        // we found the end of a block
+        if (match[1]) {
+          callbacks.endMediaQuery && callbacks.endMediaQuery();
+          continue;
         }
+
+        // if we hit a plain-jane @rule (i.e. match[2]), we don't care
+        var selector = match[3];
+        if (selector) {
+          // Note @media rules specially, since they can contain other rules
+          if (selector.slice(0, 6) === "@media") {
+            callbacks.mediaQuery && callbacks.mediaQuery(selector);
+          }
+          // otherwise just parse the rule
+          else {
+            var closingIndex = text.indexOf("}", match.index);
+            // don't parse other @rules with blocks, e.g. @font-face
+            if (selector[0] !== "@") {
+              var content = text.slice(match.index + match[0].length, closingIndex);
+              this.parseRule(selector, content, callbacks.rule);
+            }
+            STATEMENT_END_OR_START_PATTERN.lastIndex = closingIndex + 1;
+          }
+        }
+      }
+    },
+    
+    /**
+     * Parse a style rule. This just manages the parsing of a selector and the
+     * callback for a rule.
+     * @private
+     * 
+     * @param  {String}   selector The selector for the rule
+     * @param  {String}   content  The properties and values of the rule.
+     * @param  {Function} callback The callback for a parsed rule.
+     */
+    parseRule: function(selector, content, callback) {
+      var parsedSelector = this.parseSelector(selector);
+      if (parsedSelector) {
+        callback && callback(parsedSelector, content);
       }
-      return newRules + "\n" + mediaRules;
     },
 
-    // find all the queries in a selector
-    queriesForSelector: function(selectorString) {
-      var selectors = selectorString.split(",");
-      var selectorResults = [];
-      var queryResults = [];
-      for (var i = 0, len = selectors.length; i < len; i++) {
-        var result = this.queriesForSingleSelector(selectors[i]);
-        selectorResults.push(result.selector);
-        queryResults = queryResults.concat(result.queries);
+    /**
+     * Parse a selector string and return an array of parsed selectors (one for
+     * each comma-separated sub-selector).
+     * Individual sub-selectors are parsed as arrays of alternating text and
+     * element queries, so this selector:
+     *   body:media(...) div:media(...) a, body:media(...), a
+     * returns:
+     *   [["body", [rules], " div", [rules], " a"],
+     *    ["body", [rules], " a"]]
+     * @private
+     * 
+     * @param  {String} selector The selector to parse.
+     * @return {Array}
+     */
+    parseSelector: function(selector) {
+      var parsed = [];
+      var parts = selector.split(",");
+      for (var i = 0, len = parts.length; i < len; i++) {
+        var result = this.parseSingleSelector(parts[i]);
+        if (result.length > 1) {
+          parsed.push(result);
+        }
       }
-      return {
-        selector: selectorResults.join(","),
-        queries: queryResults
-      };
+      // return null if no selectors had element queries
+      return parsed.length ? parsed : null;
     },
     
-    // find all the queries in a *single* selector (i.e. no commas)
-    queriesForSingleSelector: function(selectorString) {
-      var queries = [];
-      var newSelector = "";
+    /**
+     * Parses a single sub-selector. This is used by parseSelector().
+     * @private
+     * @param  {String} selector The sub-selector to parse
+     * @return {Array}           The parsed selector
+     */
+    parseSingleSelector: function(selector) {
+      var parsed = [];
       var lastIndex = 0;
-      var queryMatch;
-      while (queryMatch = QUERY_PATTERN.exec(selectorString)) {
-        var querySelector = selectorString.slice(0, queryMatch.index);
-        var queryRules = this.parseQuery(queryMatch[1]);
-        var className = elementQuery.classNameForRules(queryRules);
-        newSelector += selectorString.slice(lastIndex, queryMatch.index);
-        lastIndex = queryMatch.index + queryMatch[0].length;
-        queries.push({
-          selector: newSelector,
-          className: className,
-          rules: queryRules
-        });
-        newSelector += "." + className;
+      while (queryMatch = QUERY_PATTERN.exec(selector)) {
+        // get everything up to the element query
+        var selectorChunk = selector.slice(lastIndex, queryMatch.index);
+        lastIndex = QUERY_PATTERN.lastIndex;
+        var queryData = this.parseQuery(queryMatch[1]);
+        parsed.push(selectorChunk);
+        parsed.push(queryData);
       }
-      newSelector += selectorString.slice(lastIndex);
-      return {
-        selector: newSelector,
-        queries: queries
-      };
+      // get any remaining text in the selector
+      var remaining = selector.slice(lastIndex);
+      if (!WHITESPACE_PATTERN.test(remaining)) {
+        parsed.push(remaining);
+      }
+
+      // reset QUERY_PATTERN
+      QUERY_PATTERN.lastIndex = 0;
+
+      return parsed;
     },
 
-    // find the actual queried properties in an element query
+    /**
+     * Parse an element query. Returns an array of objects like:
+     *   {
+     *     property: the property being queries, e.g. "max-available-width"
+     *     value:    the actual value to test for as a number
+     *     units:    the units the value is expressed in
+     *   }
+     *   
+     * @param  {String} queryString The text of the element query.
+     * @return {Array}
+     */
     parseQuery: function(queryString) {
       var rules = [];
       var ruleMatch;
diff --git a/test/test.css b/test/test.css
index 063de25..58e04a4 100644
--- a/test/test.css
+++ b/test/test.css
@@ -1,36 +1,62 @@
+
+@import url("test2.css");
+
 html {
-                background: #fff;
-            }
-
-            .test-element {
-                background: orange;
-                height: 200px;
-            }
-
-            .test-element:hover {
-                background: blue;
-            }
-
-            
-            .test-element:media(max-available-width: 30em) {
-                background: purple;
-            }
-
-            .test-whatever,
-            body:media(max-available-width: 400px) .test-element:media(max-available-width: 300px) {
-                background: green;
-            }
-
-            .half-width {
-                font-size: 0.8em;
-                width: 50%;
-            }
-
-            /*html .test-element:media(max-available-width: 400px) {
-                background: yellow;
-            }*/
-            @media all and (-webkit-min-device-pixel-ratio: 5) {
-              .test-element {
-                background: red;
-              }
-            }
\ No newline at end of file
+    background: #fff;
+}
+
+.test-element {
+    background: orange;
+    height: 200px;
+}
+
+.test-element:hover {
+    background: blue;
+}
+
+.test-element:media(max-available-width: 30em) {
+    background: purple;
+}
+
+.test-whatever,
+body:media(max-available-width: 400px) .test-element:media(max-available-width: 300px) {
+    background: green;
+}
+
+.half-width {
+    font-size: 0.8em;
+    width: 50%;
+}
+
+/*html .test-element:media(max-available-width: 400px) {
+    background: yellow;
+}*/
+@media all and (-webkit-min-device-pixel-ratio: 5) {
+    .test-element {
+        background: red;
+    }
+    .test-element:media(max-available-width: 30em) {
+        background: yellow;
+    }
+
+    /* UHOH, nested queries! */
+    @media all and (-webkit-min-device-pixel-ratio: 6) {
+        .test-element:media(max-available-width: 30em) {
+            background: rainbow;
+        }
+    }
+
+    /* UHOH, second nested query with no element queries in it! */
+    @media all and (-webkit-min-device-pixel-ratio: 6) {
+        .booga-wooga {
+            background: rainbow;
+        }
+    }
+}
+
+@font-face {
+    font-family: "font of all knowledge";
+    src: local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);
+    font-weight: 400;
+    font-style: normal;
+}