Merge pull request #14 from hudochenkov/pixels-rounding

Fix pixels rounding errors in fractional pixels media queries

Author: yisibl

index.js

@@ -32,7 +32,21 @@ module.exports = postcss.plugin('postcss-media-minmax', function () {
 
     function create_query(name, gtlt, eq, value, params) {
       return value.replace(/([-\d\.]+)(.*)/, function (match, number, unit) {
-        number = parseFloat(number) || eq ? eq ? number : Number(Math.round(parseFloat(number) + step * power[gtlt] + 'e6')+'e-6') : power[gtlt] + feature_unit[name];
+        var initialNumber = parseFloat(number);
+
+        if (parseFloat(number) || eq) {
+          // if eq is true, then number remains same
+          if (!eq) {
+            // change integer pixels value only on integer pixel
+            if (unit === 'px' && initialNumber === parseInt(number, 10)) {
+              number = initialNumber + power[gtlt];
+            } else {
+              number = Number(Math.round(parseFloat(number) + step * power[gtlt] + 'e6')+'e-6');
+            }
+          }
+        } else {
+          number = power[gtlt] + feature_unit[name];
+        }
 
         return '(' + minmax[gtlt] + '-' + name + ': ' + number + unit + ')';
       });

test/fixtures/min-max.output.css

@@ -1,8 +1,8 @@
-@media screen and (min-width: 500.001px) and (max-width: 1199.999px) {
+@media screen and (min-width: 501px) and (max-width: 1199px) {
 
 }
 
-@media screen and (min-width: 500.001px) and (max-width: 1199.999px) {
+@media screen and (min-width: 501px) and (max-width: 1199px) {
 
 }
 
@@ -26,11 +26,11 @@
 }
 
 /* height */
-@media screen and (min-height: 500.001px) and (max-height: 1199.999px) {
+@media screen and (min-height: 501px) and (max-height: 1199px) {
 
 }
 
-@media screen and (min-height: 500.001px) and (max-height: 1199.999px) {
+@media screen and (min-height: 501px) and (max-height: 1199px) {
 
 }