From b427f3a8f4ccec4ababf4951c30a31085511bc9c Mon Sep 17 00:00:00 2001 From: Keith Clark Date: Tue, 10 May 2011 19:12:25 +0100 Subject: [PATCH] Fixed issue with @import statement media types being ignored and styles becoming mixed. Tests added. --- changelog.txt | 14 ++++++++++---- selectivizr.js | 13 +++++++------ tests/master/css/import-print.css | 6 ++++++ tests/master/css/import-screen.css | 4 ++++ tests/master/css/master.css | 18 +++++++++++++++--- tests/master/index.html | 8 ++++++++ 6 files changed, 50 insertions(+), 13 deletions(-) create mode 100644 tests/master/css/import-print.css create mode 100644 tests/master/css/import-screen.css diff --git a/changelog.txt b/changelog.txt index 7ee8dd5..1d1897b 100644 --- a/changelog.txt +++ b/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 href if its specified (reported by Andrea and Tim) + * BUG - @import rules now honour the 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. diff --git a/selectivizr.js b/selectivizr.js index f5352b8..7a1c80a 100644 --- a/selectivizr.js +++ b/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 diff --git a/tests/master/css/import-print.css b/tests/master/css/import-print.css new file mode 100644 index 0000000..1bd5e1a --- /dev/null +++ b/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; +} + diff --git a/tests/master/css/import-screen.css b/tests/master/css/import-screen.css new file mode 100644 index 0000000..f6fa9b1 --- /dev/null +++ b/tests/master/css/import-screen.css @@ -0,0 +1,4 @@ +tr#import-screen { + background: #0c0; +} + diff --git a/tests/master/css/master.css b/tests/master/css/master.css index 33ea4c6..0f45edf 100644 --- a/tests/master/css/master.css +++ b/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; } diff --git a/tests/master/index.html b/tests/master/index.html index 0ab9f2a..a4e052e 100644 --- a/tests/master/index.html +++ b/tests/master/index.html @@ -97,6 +97,14 @@

@import syntax tests

@import url("http://domain/path/file.css") Testing @import rule with a fully qualified path (see note in 'master.css') + + @import url("...") print + Testing @import rule with a print media type + + + @import url("...") screen + Testing @import rule with a screen media type +

url syntax tests