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) {}