Permalink
Browse files

Fixes #181. Not the most future-proof solution, but simply checks for…

… a non-min/max-width/height selector and ignores.
  • Loading branch information...
1 parent f8057a5 commit 4ad42217bbc78be5fbfd10d77e74e15b7acf4d4b @zachleat zachleat committed Dec 26, 2013
Showing with 43 additions and 2 deletions.
  1. +9 −2 src/respond.js
  2. +13 −0 test/test.css
  3. +21 −0 test/unit/tests.js
View
@@ -56,8 +56,10 @@
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
only: /(only\s+)?([a-zA-Z]+)\s?/,
- minw: /\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,
- maxw: /\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/
+ minw: /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
+ maxw: /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
+ minmaxwh: /\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,
+ other: /\([^\)]*\)/g
};
//expose media query support flag for external use
@@ -260,6 +262,11 @@
for( var j = 0; j < eql; j++ ){
thisq = eachq[ j ];
+
+ if( thisq.replace( respond.regex.minmaxwh, '' ).match( respond.regex.other ) ) {
+ continue;
+ }
+
mediastyles.push( {
media : thisq.split( "(" )[ 0 ].match( respond.regex.only ) && RegExp.$2 || "all",
rules : rules.length - 1,
View
@@ -77,4 +77,17 @@ a {
body {
background: navy;
}
+}
+
+@media only screen and (min-width: 1250px) and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (-moz-min-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (-o-min-device-pixel-ratio: 3/2),
+ only screen and (min-width: 1250px) and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (min-device-pixel-ratio: 1.5),
+ only screen and (min-width: 1250px) and (min-resolution: 1.5dppx),
+ screen and (min-width: 1250px) {
+
+ body {
+ background-color: pink;
+ }
}
View
@@ -197,6 +197,27 @@ window.onload = function(){
ok( '@media only screen and (max-width: 1280px) { }'.match( respond.regex.maxw ).length );
ok( '@media only screen and ( max-width: 1280px ) { }'.match( respond.regex.maxw ).length );
});
+
+ test( 'Issue #181: non-min-width and non-max-width queries', function() {
+ var others = ['(min--moz-device-pixel-ratio: 1.5)',
+ '(-moz-min-device-pixel-ratio: 1.5)',
+ '(-o-min-device-pixel-ratio: 1.5)',
+ '(-webkit-min-device-pixel-ratio: 1.5)',
+ '(min-device-pixel-ratio: 1.5)',
+ '(min-resolution: 1.5dppx)'],
+ str,
+ mq;
+
+ for( var j = 0, k = others.length; j<k; j++ ) {
+ str = '@media only screen and (max-width: 1319px) and ' + others[ j ] + ' {}';
+ mq = str.match( respond.regex.minmaxwh );
+ equal( mq && mq[ 0 ], '(max-width: 1319px)' );
+ equal( str.replace( respond.regex.minmaxwh, '' ).match( respond.regex.other )[ 0 ], others[ j ] );
+
+ equal( ( '@media only screen and (max-width: 1319px) and (min-width: 1px) and ' + others[ j ] + ' {}' ).replace( respond.regex.minmaxwh, '' ).match( respond.regex.other )[ 0 ], others[ j ] );
+ equal( ( '@media only screen and (max-width: 1319px) and (min-height: 1px) and ' + others[ j ] + ' {}' ).replace( respond.regex.minmaxwh, '' ).match( respond.regex.other )[ 0 ], others[ j ] );
+ }
+ });
}
};

0 comments on commit 4ad4221

Please sign in to comment.