From 7e116f6a946a35509f97eec49c4ee2aa751007ce Mon Sep 17 00:00:00 2001
From: Aleks Hudochenkov <aleks@hudochenkov.com>
Date: Sat, 27 Feb 2016 17:36:46 +0300
Subject: [PATCH] Fix incorrect output when using both > and >= (or similar)
 #12

---
 index.js                            | 24 +++++++++++++++++++-----
 test/fixtures/shorthands.css        | 11 +++++++++++
 test/fixtures/shorthands.output.css | 11 +++++++++++
 test/index.js                       |  1 +
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 test/fixtures/shorthands.css
 create mode 100644 test/fixtures/shorthands.output.css

diff --git a/index.js b/index.js
index f03f38c..666f7ff 100644
--- a/index.js
+++ b/index.js
@@ -80,9 +80,11 @@ 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)
        */
 
@@ -90,10 +92,22 @@ module.exports = postcss.plugin('postcss-media-minmax', function () {
 
         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);
           }
         }
         //如果不是指定的属性，不做替换
diff --git a/test/fixtures/shorthands.css b/test/fixtures/shorthands.css
new file mode 100644
index 0000000..4212ca8
--- /dev/null
+++ b/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) {}
diff --git a/test/fixtures/shorthands.output.css b/test/fixtures/shorthands.output.css
new file mode 100644
index 0000000..dbc2542
--- /dev/null
+++ b/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) {}
diff --git a/test/index.js b/test/index.js
index 91b204a..b0ef75e 100644
--- a/test/index.js
+++ b/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()
 })