Merge pull request #42 from danReynolds/ImportSupport

Import support
chuckcarpenter · Mar 30, 2014 · de18d0d · de18d0d
2 parents be4731f + bd54f7a
commit de18d0d
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 50 deletions.
diff --git a/css/general.css b/css/general.css
@@ -7,10 +7,10 @@ html {
     line-height: 1.6;
 }
 .test {
-	background-color:blue;
+	background-color:black;
     color: white;
-	width: 10em;
-	height: 5rem;
+	width: 5rem;
+	height: 5em;
 }
 p {font-size: 5rem;}
 
@@ -23,4 +23,4 @@ p {font-size: 5rem;}
         font-size: 10rem;
     }
     .test {background-color: green;}
-}
+}
diff --git a/css/importee1.css b/css/importee1.css
@@ -0,0 +1,6 @@
+.importee1 {
+  background-color:red;
+  color: white;
+  width: 15rem;
+  height: 5em;
+}
diff --git a/css/importee2.css b/css/importee2.css
@@ -0,0 +1,6 @@
+.importee2 {
+  background-color:yellow;
+  color: white;
+  width: 25rem;
+  height: 5em;
+}
diff --git a/css/importer.css b/css/importer.css
@@ -0,0 +1,11 @@
+/*Basic Test*/
+@import url("importee1.css");
+/*Folder Test*/
+@import 'nested_imports/nested_importer.css';
+
+.importer {
+  background-color: brown;
+  color: white;
+  width: 10rem;
+  height: 5em;
+}
diff --git a/css/nested_imports/nested_importee1.css b/css/nested_imports/nested_importee1.css
@@ -0,0 +1,6 @@
+.nested-importee1 {
+  background-color:green;
+  color: white;
+  width: 30rem;
+  height: 5em;
+}
diff --git a/css/nested_imports/nested_importee2.css b/css/nested_imports/nested_importee2.css
@@ -0,0 +1,6 @@
+.nested-importee2 {
+  background-color:blue;
+  color: white;
+  width: 35rem;
+  height: 5em;
+}
diff --git a/css/nested_imports/nested_importer.css b/css/nested_imports/nested_importer.css
@@ -0,0 +1,12 @@
+/*Parent Directory and Same Line Test */
+@import url("../importee2.css"); @import url(nested_importee1.css);
+
+/*No URL test*/
+@import "nested_importee2.css";
+
+.nested-importer {
+  background-color:orange;
+  color: white;
+  width: 20rem;
+  height: 5em;
+}
diff --git a/index.html b/index.html
@@ -1,26 +1,30 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-	<title>REM Unit polyfill</title>
-    <!-- adding reference to Zurb Foundation for testing with larger file
+  <title>REM Unit polyfill</title>
+  <!-- adding reference to Zurb Foundation for testing with larger file
          that has REM values in it as well
      -->
-    <link rel="stylesheet" type="text/css" href="css/foundation.css" />
+  <link rel="stylesheet" type="text/css" href="css/foundation.css" />
+  <!-- Standard CSS with some REM values, media queries are ignored -->
+  <link rel="stylesheet" type="text/css" href="css/general.css" />
+  <!-- CSS containing @import lines, test importing of additional sheets -->
+  <link rel="stylesheet" type="text/css" href="css/importer.css" />
+  <!-- ignore.css shows in normal browsers, but ones where we expect the REM.js to 
+       run then the REM rules should not get parsed.
+   -->
+  <link rel="stylesheet" type="text/css" href="css/ignore.css" data-norem />
 
-    <!-- Standard CSS with some REM values, media queries are ignored -->
-	<link rel="stylesheet" type="text/css" href="css/general.css" />
-    <!-- ignore.css shows in normal browsers, but ones where we expect the REM.js to 
-         run then the REM rules should not get parsed.
-     -->
-    <link rel="stylesheet" type="text/css" href="css/ignore.css" data-norem />
 </head>
 <body>
-    <!-- In a REM supported browser, you see a green box and very small text. 
-         In an unsupport browser, but successful process should show a 
-         blue box and large paragraph text outside it.
-     -->
-	<div class="test">Hello World!</div>
-    <p>This thing works.</p>
-	<script src="js/rem.min.js" type="text/javascript"></script>
+  <div class="test">Hello World!</div>
+  <div class="importer">Importer Test</div>
+  <div class="importee1">Basic Test</div>
+  <div class="nested-importer">Folder Test</div>
+  <div class="importee2">Parent Directory Test</div>
+  <div class="nested-importee1">Same Line Test</div>
+  <div class="nested-importee2">No URL Test</div>
+  <p>This thing works.</p>
+  <script src="js/rem.js" type="text/javascript"></script>
 </body>
-</html>
+</html>
diff --git a/js/rem.js b/js/rem.js
@@ -8,51 +8,67 @@
         return (/rem/).test(div.style.fontSize);
     },
 
-    // filter returned link nodes for stylesheets
+    // filter returned links for stylesheets
     isStyleSheet = function () {
         var styles = document.getElementsByTagName('link'),
-            filteredStyles = [];
+            filteredLinks = [];
 
         for ( var i = 0; i < styles.length; i++) {
             if ( styles[i].rel.toLowerCase() === 'stylesheet' && styles[i].getAttribute('data-norem') === null ) {
-                filteredStyles.push( styles[i] );
+
+                filteredLinks.push( styles[i].href );
             }
         }
 
-        return filteredStyles;
+        return filteredLinks;
     },
 
-   processSheets = function () {
-        var links = [];
-        sheets = isStyleSheet(); // search for link tags and confirm it's a stylesheet
-        sheets.og = sheets.length; // store the original length of sheets as a property
-        sheets.loaded = 0; // keep track of how many have been loaded so far
-        for( var i = 0; i < sheets.length; i++ ){
-            links[i] = sheets[i].href;
-            xhr( links[i], storeCSS, i );
+   processLinks = function () {
+        if( links.length === 0 ){
+            links = isStyleSheet(); // search for link tags and confirm it's a stylesheet
+        }
+
+        //prepare to match each link
+        for( var i = 0; i < links.length; i++ ){
+            xhr( links[i], storeCSS, links[i], i );
         }
     },
 
-    storeCSS = function ( response, i ) {
+    storeCSS = function ( response, link ) {
 
-        preCSS[i] = response;
+        preCSS.push(response.responseText);
+        CSSLinks.push(link);
 
-        if( ++sheets.loaded === sheets.og ){
-            for ( var j = 0; j < preCSS.length; j++ ){
-                matchCSS( preCSS[j] );
+        if( CSSLinks.length === links.length ){
+            for( var j = 0; j <  CSSLinks.length; j++ ){
+                matchCSS( preCSS[j], CSSLinks[j] );
             }
 
-            buildCSS();
+            if( ( links = importLinks.slice(0) ).length > 0 ){ //after finishing all current links, set links equal to the new imports found
+                CSSLinks = [];
+                preCSS = [];
+                importLinks = [];
+                processLinks();
+            } else {
+                buildCSS();
+            }
         }
-
     },
-
-    matchCSS = function ( response ) { // collect all of the rules from the xhr response texts and match them to a pattern
-        var clean = removeComments( removeMediaQueries(response.responseText) ),
+    
+    matchCSS = function ( sheetCSS, link ) { // collect all of the rules from the xhr response texts and match them to a pattern
+        var clean = removeComments( removeMediaQueries(sheetCSS) ),
             pattern = /[\w\d\s\-\/\\\[\]:,.'"*()<>+~%#^$_=|@]+\{[\w\d\s\-\/\\%#:;,.'"*()]+\d*\.?\d+rem[\w\d\s\-\/\\%#:;,.'"*()]*\}/g, //find selectors that use rem in one or more of their rules
             current = clean.match(pattern),
             remPattern =/\d*\.?\d+rem/g,
-            remCurrent = clean.match(remPattern);
+            remCurrent = clean.match(remPattern),
+            sheetPathPattern = /(.*\/)/,
+            sheetPath = sheetPathPattern.exec(link)[0], //relative path to css file specified in @import
+            importPattern = /@import (?:url\()?['"]?([^'\)"]*)['"]?\)?[^;]*/gm, //matches all @import variations outlined at: https://developer.mozilla.org/en-US/docs/Web/CSS/@import
+            importStatement;
+
+        while( (importStatement = importPattern.exec(sheetCSS)) !== null ){
+            importLinks.push( sheetPath + importStatement[1] );
+        }
 
         if( current !== null && current.length !== 0 ){
             found = found.concat( current ); // save all of the blocks of rules with rem in a property
@@ -77,7 +93,7 @@
     },
 
     parseCSS = function () { // replace each set of parentheses with evaluated content
-	var remSize;
+    var remSize;
         for( var i = 0; i < foundProps.length; i++ ){
             remSize = parseFloat(foundProps[i].substr(0,foundProps[i].length-3));
             css[i] = Math.round( remSize * fontSize ) + 'px';
@@ -104,6 +120,7 @@
     },
 
     xhr = function ( url, callback, i ) { // create new XMLHttpRequest object and run it
+
         try {
             var xhr = getXMLHttpRequest();
             xhr.open( 'GET', url, true );
@@ -163,7 +180,7 @@
         }
     },
 
-	// Test for Media Query support
+    // Test for Media Query support
     mediaQuery = function() {
         if (window.matchMedia || window.msMatchMedia) { return true; }
         return false;
@@ -177,7 +194,7 @@
             css = css.replace(/@media[\s\S]*?\}\s*\}/, "");
         }
 
-        return css;
+        return css; 
     },
 
     getXMLHttpRequest = function () { // we're gonna check if our browser will let us use AJAX
@@ -198,13 +215,16 @@
 
     if( !cssremunit() ){ // this checks if the rem value is supported
         var rules = '', // initialize the rules variable in this scope so it can be used later
-            sheets = [], // initialize the array holding the sheets for use later
+            links = [], // initialize the array holding the sheets urls for use later
+            importLinks = [], //initialize the array holding the import sheet urls for use later
             found = [], // initialize the array holding the found rules for use later
             foundProps = [], // initialize the array holding the found properties for use later
             preCSS = [], // initialize array that holds css before being parsed
+            CSSLinks = [], //initialize array holding css links returned from xhr
             css = [], // initialize the array holding the parsed rules for use later
             body = document.getElementsByTagName('body')[0],
             fontSize = '';
+
         if (body.currentStyle) {
             if ( body.currentStyle.fontSize.indexOf("px") >= 0 ) {
                 fontSize = body.currentStyle.fontSize.replace('px', '');
@@ -218,7 +238,7 @@
         } else if (window.getComputedStyle) {
             fontSize = document.defaultView.getComputedStyle(body, null).getPropertyValue('font-size').replace('px', ''); // find font-size in body element
         }
-        processSheets();
+        processLinks();
     } // else { do nothing, you are awesome and have REM support }
 
 })(window);
diff --git a/js/rem.min.js b/js/rem.min.js