From bea47d634b57ec05c2ed7682385a0f8db3db330f Mon Sep 17 00:00:00 2001
From: Anders Kaseorg <andersk@mit.edu>
Date: Wed, 3 Feb 2021 18:38:46 -0800
Subject: [PATCH] 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 <andersk@mit.edu>
---
 index.js                            | 28 +++++++++++++++-------------
 test/fixtures/min-max.output.css    | 12 ++++++------
 test/fixtures/shorthands.output.css | 12 ++++++------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/index.js b/index.js
index 6845243..c8cfd86 100644
--- a/index.js
+++ b/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 + ')';
diff --git a/test/fixtures/min-max.output.css b/test/fixtures/min-max.output.css
index b3249f6..6c0f4df 100644
--- a/test/fixtures/min-max.output.css
+++ b/test/fixtures/min-max.output.css
@@ -1,6 +1,6 @@
-@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) {}
 
@@ -8,14 +8,14 @@
 
 @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) {}
 
@@ -23,6 +23,6 @@
 
 @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) {}
diff --git a/test/fixtures/shorthands.output.css b/test/fixtures/shorthands.output.css
index dbc2542..275193a 100644
--- a/test/fixtures/shorthands.output.css
+++ b/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) {}