Added "range" minMax and maxMin two value comparisons support

https://www.w3.org/TR/mediaqueries-4/#mq-range-context

Author: yunusga

lib/create-sort.js

@@ -3,19 +3,21 @@
 // ----------------------------------------
 
 const minMaxWidth =
-	/(!?\(\s*min(-device)?-width)(.|\n)+\(\s*max(-device)?-width|\(\s*width\s*>(=)?(.|\n)+\(\s*width\s*<(=)?/i;
+	/(!?\(\s*min(-device)?-width)(.|\n)+\(\s*max(-device)?-width|\(\s*width\s*>(=)?(.|\n)+\(\s*width\s*<(=)?|(!?\(.*<(=)?\s*width\s*<(=)?)/i;
 const minWidth = /\(\s*min(-device)?-width|\(\s*width\s*>(=)?/i;
 const maxMinWidth =
-	/(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width|\(\s*width\s*<(=)?(.|\n)+\(\s*width\s*>(=)?/i;
+	/(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width|\(\s*width\s*<(=)?(.|\n)+\(\s*width\s*>(=)?|(!?\(.*>(=)?\s*width\s*>(=)?)/i;
 const maxWidth = /\(\s*max(-device)?-width|\(\s*width\s*<(=)?/i;
 
 const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
 const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
 
-const minMaxHeight = /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height/i;
-const minHeight = /\(\s*min(-device)?-height/i;
-const maxMinHeight = /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height/i;
-const maxHeight = /\(\s*max(-device)?-height/i;
+const minMaxHeight =
+	/(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height|\(\s*height\s*>(=)?(.|\n)+\(\s*height\s*<(=)?|(!?\(.*<(=)?\s*height\s*<(=)?)/i;
+const minHeight = /\(\s*min(-device)?-height|\(\s*height\s*>(=)?/i;
+const maxMinHeight =
+	/(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height|\(\s*height\s*<(=)?(.|\n)+\(\s*height\s*>(=)?|(!?\(.*>(=)?\s*height\s*>(=)?)/i;
+const maxHeight = /\(\s*max(-device)?-height|\(\s*height\s*<(=)?/i;
 
 const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
 const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);

tests/index.spec.js

@@ -321,6 +321,7 @@ test(`multiline #1. mobile-first`, () => {
        and (max-width: 47.999em)`,
 		`@media (min-width: 15em)
        and (max-width: 47.999em)`,
+		`@media (0 < width < 20px)`,
 		`@media (min-width: 2em)
        and (max-width: 47.999em)`,
 		`@media (min-width: 20em)
@@ -342,10 +343,12 @@ test(`multiline #1. mobile-first`, () => {
 		`@media (width > 3em)
        and (width < 48.999em)`,
 		`@media (width > 31em)
-       and (width < 48.999em)`
+       and (width < 48.999em)`,
+		`@media (31em < width < 48.999em )`
 	];
 
 	const expectedOrder = [
+		`@media (0 < width < 20px)`,
 		`@media (min-width: 2em)
        and (max-width: 47.999em)`,
 		`@media (width > 2em)
@@ -362,6 +365,7 @@ test(`multiline #1. mobile-first`, () => {
        and (max-width: 47.999em)`,
 		`@media (width > 20em)
        and (width < 47.999em)`,
+		`@media (31em < width < 48.999em )`,
 		`@media (min-width: 31em)
        and (max-width: 48.999em)`,
 		`@media (width > 31em)