Support for < and > without =

Author: jonathantneal

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.1.0 2015-09-05
+
+Add: Support for `<` and `>` without `=`.
+
 # 2.0.0 2015-09-05
 
 Change: Use PostCSS 5.0 API.

index.js

@@ -2,19 +2,41 @@ var postcss = require('postcss');
 
 module.exports = postcss.plugin('postcss-media-minmax', function () {
   return function(css) {
+    var feature_unit = {
+      'width': 'px',
+      'height': 'px',
+      'device-width': 'px',
+      'device-height': 'px',
+      'aspect-ratio': '',
+      'device-aspect-ratio': '',
+      'color': '',
+      'color-index': '',
+      'monochrome': '',
+      'resolution': 'dpi'
+    };
+
     //支持 min-/max- 前缀的属性
-    var feature_name = [
-      'width',
-      'height',
-      'device-width',
-      'device-height',
-      'aspect-ratio',
-      'device-aspect-ratio',
-      'color',
-      'color-index',
-      'monochrome',
-      'resolution'
-    ]
+    var feature_name = Object.keys(feature_unit);
+
+    var step = .001; // smallest even number that won’t break complex queries (1in = 96px)
+
+    var power = {
+      '>': 1,
+      '<': -1
+    };
+
+    var minmax = {
+      '>': 'min',
+      '<': 'max'
+    };
+
+    function create_query(name, gtlt, eq, value, params) {
+      return value.replace(/([-\d\.]+)(.*)/, function (match, number, unit) {
+        number = parseFloat(number) || eq ? eq ? number : parseFloat(number) + step * power[gtlt] : power[gtlt] + feature_unit[name];
+
+        return '(' + minmax[gtlt] + '-' + name + ': ' + number + unit + ')';
+      });
+    }
 
     // 读取 media-feature
     css.walkAtRules(function(rule, i) {
@@ -23,7 +45,7 @@ module.exports = postcss.plugin('postcss-media-minmax', function () {
       }
 
       /**
-       * 转换 <mf-name> <=|>= <mf-value>
+       * 转换 <mf-name> <|>= <mf-value>
        *    $1  $2   $3
        * (width >= 300px) => (min-width: 300px)
        * (width <= 900px) => (max-width: 900px)
@@ -32,37 +54,32 @@ module.exports = postcss.plugin('postcss-media-minmax', function () {
       //取值不支持负值
       //But -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.
 
-      rule.params = rule.params.replace(/\(\s*([a-z-]+?)\s*([<>]=)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3) {
+      rule.params = rule.params.replace(/\(\s*([a-z-]+?)\s*([<>])(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4) {
 
         var params = '';
 
         if (feature_name.indexOf($1) > -1) {
-          if ($2 === '<=') {
-            params = '(' + 'max-' + $1 + ': ' + $3 + ')';
-          }
-          if ($2 === '>=') {
-            params += '(' + 'min-' + $1 + ': ' + $3 + ')';
-          }
-          return params;
+          return create_query($1, $2, $3, $4, rule.params);
         }
         //如果不是指定的属性，不做替换
         return $0;
       })
 
       /**
-       * 转换  <mf-value> <=|>= <mf-name> <=|>= <mf-value>
-       *   $1   $2  $3   $4   $5
+       * 转换  <mf-value> <|>= <mf-name> <|>= <mf-value>
+       *   $1   $2  $3  $4$5  $5
        * (500px <= width <= 1200px) => (min-width: 500px) 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) {
+      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;
 
-        if (feature_name.indexOf($3) > -1) {
-          if ($2 === '<=' && $4 === '<=' || $2 === '>=' && $4 === '>=') {
-            var min = ($2 === '<=') ? $1 : $5;
-            var max = ($2 === '<=') ? $5 : $1;
-            return '(' + 'min-' + $3 + ': ' + min + ') and (' + 'max-' + $3 + ': ' + max + ')';
+             return create_query($4, '>', $3, min) + ' and ' + create_query($4, '<', $6, max);
           }
         }
         //如果不是指定的属性，不做替换

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-media-minmax",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Using more intuitive `>=` or `<=` instead of media queries min/max prefix.",
   "scripts": {
     "test": "tape test"

test/fixtures/min-max.css

@@ -0,0 +1,46 @@
+@media screen and (width > 500px) and (width < 1200px) {
+
+}
+
+@media screen and (500px < width < 1200px) {
+
+}
+
+@media screen and (40em < width < 60em) {
+
+}
+
+@media screen and (6in < width < 9in) {
+
+}
+
+@media screen and (0 < width < 500.58px) {
+}
+
+@media screen and (width) and (.08px < width < 0.68px) {
+
+}
+
+/* height */
+@media screen and (height > 500px) and (height < 1200px) {
+
+}
+
+@media screen and (500px < height < 1200px) {
+
+}
+
+@media screen and (40em < height < 60em) {
+
+}
+
+@media screen and (6in < height < 9in) {
+
+}
+
+@media screen and (0 < height < 500.58px) {
+}
+
+@media screen and (height) and (.08px < height < 0.68px) {
+
+}

test/fixtures/min-max.output.css

@@ -0,0 +1,46 @@
+@media screen and (min-width: 500.001px) and (max-width: 1199.999px) {
+
+}
+
+@media screen and (min-width: 500.001px) and (max-width: 1199.999px) {
+
+}
+
+@media screen and (min-width: 40.001em) and (max-width: 59.999em) {
+
+}
+
+@media screen and (min-width: 6.001in) and (max-width: 8.999in) {
+
+}
+
+@media screen and (min-width: 1px) and (max-width: 500.579px) {
+}
+
+@media screen and (width) and (min-width: 0.081px) and (max-width: 0.679px) {
+
+}
+
+/* height */
+@media screen and (min-height: 500.001px) and (max-height: 1199.999px) {
+
+}
+
+@media screen and (min-height: 500.001px) and (max-height: 1199.999px) {
+
+}
+
+@media screen and (min-height: 40.001em) and (max-height: 59.999em) {
+
+}
+
+@media screen and (min-height: 6.001in) and (max-height: 8.999in) {
+
+}
+
+@media screen and (min-height: 1px) and (max-height: 500.579px) {
+}
+
+@media screen and (height) and (min-height: 0.081px) and (max-height: 0.679px) {
+
+}

test/fixtures/monochrome.output.css

@@ -8,4 +8,4 @@
 
 @media screen and (monochrome) and (min-monochrome: 1) and (max-monochrome: 300) {
 
-}
+}

test/index.js

@@ -33,5 +33,7 @@ test("@media", function(t) {
   compareFixtures(t, "other-name", "should transform")
   compareFixtures(t, "more-units", "should transform")
 
+  compareFixtures(t, "min-max", "should transform")
+
   t.end()
 })