Merge pull request #15 from hudochenkov/fix-incorrect-output-with-shorthand

Fix incorrect output when using both > and >= (or similar) #12

Author: yisibl

index.js

@@ -80,20 +80,34 @@ module.exports = postcss.plugin('postcss-media-minmax', function () {
       })
 
       /**
-       * 转换  <mf-value> <|>= <mf-name> <|>= <mf-value>
-       *   $1   $2  $3  $4$5  $5
+       * 转换  <mf-value> <|<= <mf-name> <|<= <mf-value>
+       * 转换  <mf-value> >|>= <mf-name> >|>= <mf-value>
+       *   $1  $2$3 $4  $5$6  $7
        * (500px <= width <= 1200px) => (min-width: 500px) and (max-width: 1200px)
+       * (500px < width <= 1200px) => (min-width: 501px) and (max-width: 1200px)
        * (900px >= width >= 300px)  => (min-width: 300px) and (max-width: 900px)
        */
 
       rule.params = rule.params.replace(/\(\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*(<|>)(=?)\s*([a-z-]+)\s*(<|>)(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4, $5, $6, $7) {
 
         if (feature_name.indexOf($4) > -1) {
           if ($2 === '<' && $5 === '<' || $2 === '>' && $5 === '>') {
-             var min = ($2 === '<') ? $1 : $7;
-             var max = ($2 === '<') ? $7 : $1;
+            var min = ($2 === '<') ? $1 : $7;
+            var max = ($2 === '<') ? $7 : $1;
+
+            // output differently depended on expression direction
+            // <mf-value> <|<= <mf-name> <|<= <mf-value>
+            // or
+            // <mf-value> >|>= <mf-name> >|>= <mf-value>
+            var equals_for_min = $3;
+            var equals_for_max = $6;
+
+            if ($2 === '>') {
+              equals_for_min = $6;
+              equals_for_max = $3;
+            }
 
-             return create_query($4, '>', $3, min) + ' and ' + create_query($4, '<', $6, max);
+            return create_query($4, '>', equals_for_min, min) + ' and ' + create_query($4, '<', equals_for_max, max);
           }
         }
         //如果不是指定的属性，不做替换

test/fixtures/shorthands.css

@@ -0,0 +1,11 @@
+@media (1024px > width >= 768px) {}
+@media (768px <= width < 1024px) {}
+
+@media (1024px >= width > 768px) {}
+@media (768px < width <= 1024px) {}
+
+@media (1024px >= width >= 768px) {}
+@media (768px <= width <= 1024px) {}
+
+@media (1024px > width > 768px) {}
+@media (768px < width < 1024px) {}

test/fixtures/shorthands.output.css

@@ -0,0 +1,11 @@
+@media (min-width: 768px) and (max-width: 1023px) {}
+@media (min-width: 768px) and (max-width: 1023px) {}
+
+@media (min-width: 769px) and (max-width: 1024px) {}
+@media (min-width: 769px) and (max-width: 1024px) {}
+
+@media (min-width: 768px) and (max-width: 1024px) {}
+@media (min-width: 768px) and (max-width: 1024px) {}
+
+@media (min-width: 769px) and (max-width: 1023px) {}
+@media (min-width: 769px) and (max-width: 1023px) {}

test/index.js

@@ -34,6 +34,7 @@ test("@media", function(t) {
   compareFixtures(t, "more-units", "should transform")
 
   compareFixtures(t, "min-max", "should transform")
+  compareFixtures(t, "shorthands", "should transform shorthands")
 
   t.end()
 })