Change integer pixels by .02px rather than 1px

According to the Bootstrap developers, using .02px rather than .01px
should be sufficient to work around the Safari rounding bug.

Fixes #19.

Signed-off-by: Anders Kaseorg <[email protected]>

Author: andersk

index.js

@@ -14,8 +14,6 @@ const feature_unit = {
 // Supported min-/max- attributes
 const feature_name = Object.keys(feature_unit);
 
-const step = .001; // smallest even number that won’t break complex queries (1in = 96px)
-
 const power = {
   '>': 1,
   '<': -1
@@ -30,18 +28,22 @@ function create_query(name, gtlt, eq, value) {
   return value.replace(/([-\d\.]+)(.*)/, function (_match, number, unit) {
     const 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');
-        }
+    // if eq is true, then number remains same
+    if (!eq) {
+      if (!initialNumber) {
+        unit = feature_unit[name];
+      }
+      let step;
+      if (unit === 'px' && initialNumber === Math.round(initialNumber)) {
+        // change integer pixels by .02px to work around a Safari rounding bug:
+        // https://bugs.webkit.org/show_bug.cgi?id=178261
+        // https://github.com/twbs/bootstrap/pull/25177
+        step = .02;
+      } else {
+        // smallest even number that won’t break complex queries (1in = 96px)
+        step = .001;
       }
-    } else {
-      number = power[gtlt] + feature_unit[name];
+      number = Number((initialNumber + step * power[gtlt]).toFixed(6));
     }
 
     return '(' + minmax[gtlt] + '-' + name + ': ' + number + unit + ')';

test/fixtures/min-max.output.css

@@ -1,28 +1,28 @@
-@media screen and (min-width: 501px) and (max-width: 1199px) {}
+@media screen and (min-width: 500.02px) and (max-width: 1199.98px) {}
 
-@media screen and (min-width: 501px) and (max-width: 1199px) {}
+@media screen and (min-width: 500.02px) and (max-width: 1199.98px) {}
 
 @media screen and (min-width: 40.001em) and (max-width: 59.999em) {}
 
 @media screen and (min-width: 13.801rem) and (max-width: 51.2rem) {}
 
 @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 (min-width: 0.02px) 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: 501px) and (max-height: 1199px) {}
+@media screen and (min-height: 500.02px) and (max-height: 1199.98px) {}
 
-@media screen and (min-height: 501px) and (max-height: 1199px) {}
+@media screen and (min-height: 500.02px) and (max-height: 1199.98px) {}
 
 @media screen and (min-height: 40.001em) and (max-height: 59.999em) {}
 
 @media screen and (min-height: 13.8rem) and (max-height: 51.199rem) {}
 
 @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 (min-height: 0.02px) and (max-height: 500.579px) {}
 
 @media screen and (height) and (min-height: 0.081px) and (max-height: 0.679px) {}

test/fixtures/shorthands.output.css

@@ -1,11 +1,11 @@
-@media (min-width: 768px) and (max-width: 1023px) {}
-@media (min-width: 768px) and (max-width: 1023px) {}
+@media (min-width: 768px) and (max-width: 1023.98px) {}
+@media (min-width: 768px) and (max-width: 1023.98px) {}
 
-@media (min-width: 769px) and (max-width: 1024px) {}
-@media (min-width: 769px) and (max-width: 1024px) {}
+@media (min-width: 768.02px) and (max-width: 1024px) {}
+@media (min-width: 768.02px) 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) {}
+@media (min-width: 768.02px) and (max-width: 1023.98px) {}
+@media (min-width: 768.02px) and (max-width: 1023.98px) {}