Fixed issue with @import statement media types being ignored and styl…

…es becoming mixed. Tests added.

changelog.txt

@@ -1,6 +1,12 @@
 selectivizr - change log
 ========================
 
+Current Build
+-------------
+
+ * NEW - selectivizr now honours media specific @imports in style sheets
+
+
 
 v1.0.2
 ------
@@ -48,8 +54,8 @@ v0.9.6b
 -------
 
  * BUG - IE8 :target pseudo-class emulation fails with jQuery (but not with Sizzle) (reported by Tom Law)
- * BUG - ie-css3.js won't run if page is in an iframe (switched DOM Load detection to Dean Edwards defered script method)
- * BUG - A selector that begins with a attribute selector incorrected parsed (reported by Stephanie Sullivan)
+ * BUG - ie-css3.js won't run if page is in an iframe (switched DOM Load detection to Dean Edwards deferred script method)
+ * BUG - A selector that begins with a attribute selector incorrectly parsed (reported by Stephanie Sullivan)
 
 
 
@@ -72,7 +78,7 @@ v0.9.4b
  * NEW - added support for ::first-child and ::first-letter (suggested by Philip Renich)
  * BUG - style sheets without href values shouldn't get parsed (reported by Jeff Smith)
  * BUG - remotely hosted style sheets are now ignored when used in @imports
- * BUG - @import rules now honor the <base> href if its specified (reported by Andrea and Tim)
+ * BUG - @import rules now honour the <base> href if its specified (reported by Andrea and Tim)
  * BUG - various minor bug fixes 
 
 
@@ -93,7 +99,7 @@ v0.9.3b
  * BUG - Fixed extra spaces issue with modified class names.
  * BUG - Stopped triggering a DOM redraw when there are no className changes
  * Dynamic building of CSS_PSEUDOS regexp based on IE version so we only patch what's needed.
- * XHR compatability test (reported from twitter.com/kangax).
+ * XHR compatibility test (reported from twitter.com/kangax).
  * Reworked DOMLoaded detection.
 
 

selectivizr.js

@@ -68,7 +68,7 @@ References:
 
 	// Stylesheet parsing regexp's
 	var RE_COMMENT							= /(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)\s*/g;
-	var RE_IMPORT							= /@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))[^;]*;/g;
+	var RE_IMPORT							= /@import\s*(?:(?:(?:url\(\s*(['"]?)(.*)\1)\s*\))|(?:(['"])(.*)\3))\s*([^;]*);/g;
 	var RE_ASSET_URL 						= /\burl\(\s*(["']?)(?!data:)([^"')]+)\1\s*\)/g;
 	var RE_PSEUDO_STRUCTURAL				= /^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/;
 	var RE_PSEUDO_ELEMENTS					= /:(:first-(?:line|letter))/g;
@@ -426,8 +426,9 @@ References:
 	function parseStyleSheet( url ) {
 		if (url) {
 			return loadStyleSheet(url).replace(RE_COMMENT, EMPTY_STRING).
-			replace(RE_IMPORT, function( match, quoteChar, importUrl, quoteChar2, importUrl2 ) { 
-				return parseStyleSheet(resolveUrl(importUrl || importUrl2, url));
+			replace(RE_IMPORT, function( match, quoteChar, importUrl, quoteChar2, importUrl2, media ) {
+				var cssText = parseStyleSheet(resolveUrl(importUrl || importUrl2, url));
+				return (media) ? "@media " + media + " {" + cssText + "}" : cssText;
 			}).
 			replace(RE_ASSET_URL, function( match, quoteChar, assetUrl ) { 
 				quoteChar = quoteChar || EMPTY_STRING;
@@ -468,7 +469,7 @@ References:
 			}
 		}
 		*/
-		
+
 		for (var c = 0; c < doc.styleSheets.length; c++) {
 			stylesheet = doc.styleSheets[c]
 			if (stylesheet.href != EMPTY_STRING) {
@@ -478,7 +479,7 @@ References:
 				}
 			}
 		}
-		
+
 		// :enabled & :disabled polling script (since we can't hook 
 		// onpropertychange event when an element is disabled) 
 		if (enabledWatchers.length > 0) {
@@ -499,7 +500,7 @@ References:
 			},250)
 		}
 	};
-	
+
 	// Bind selectivizr to the ContentLoaded event. 
 	ContentLoaded(win, function() {
 		// Determine the "best fit" selector engine

tests/master/css/import-print.css

@@ -0,0 +1,6 @@
+/* if @media type filtering doesn't work we want this test to fail */
+
+tr#import-print { 
+	background: #c00; 
+}
+

tests/master/css/import-screen.css

@@ -0,0 +1,4 @@
+tr#import-screen { 
+	background: #0c0; 
+}
+

tests/master/css/master.css

@@ -24,6 +24,17 @@
 @import url("/selectivizr-git/tests/master/css/import-url-root-relative-path.css");
 @import url("http://iis/selectivizr-git/tests/master/css/import-url-fully-qualified-path.css");	
 
+/* Check that media types are honoured and their defined styles don't mix */
+@import url("import-print.css") print;
+@import url("import-screen.css") screen;
+
+#import-print {
+	background: #0c0;
+}
+
+#import-screen {
+	background: #c00;
+}
 
 body {
 	padding: 10px;
@@ -37,13 +48,14 @@ body {
 	background: #c00 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAzAD///+JPJoHAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEyLzIwLzEwJjOU9gAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAAxJREFUCJljYCANAAAAMAABQ5S3ZwAAAABJRU5ErkJggg==");
 }
 
-#target:target,
-html:root #root
-											{ background: #0c0 }
 
 /* pseudo-class tests
 ------------------------------------------------------------------------------------ */
 
+#target:target,
+html:root #root
+											{ background: #0c0 }
+
 #empty b { display: block; height:24px;}
 #empty span { margin-top:-24px; }
 

tests/master/index.html

@@ -97,6 +97,14 @@ <h3>@import syntax tests</h3>
 				<td>@import url("http://domain/path/file.css")</td>
 				<td>Testing @import rule with a fully qualified path (see note in 'master.css')
 			</tr>
+			<tr id="import-print">
+				<td>@import url("...") print</td>
+				<td>Testing @import rule with a print media type
+			</tr>
+			<tr id="import-screen">
+				<td>@import url("...") screen</td>
+				<td>Testing @import rule with a screen media type
+			</tr>
 		</table>
 
 		<h3>url syntax tests</h3>