Added dpcm resolution support and made calc more precise (#1380)

lib/resolution.js

@@ -1,10 +1,10 @@
-let n2f = require('num2fraction')
+let Fraction = require('fraction.js')
 
 let Prefixer = require('./prefixer')
 let utils = require('./utils')
 
-const REGEXP = /(min|max)-resolution\s*:\s*\d*\.?\d+(dppx|dpi|x)/gi
-const SPLIT = /(min|max)-resolution(\s*:\s*)(\d*\.?\d+)(dppx|dpi|x)/i
+const REGEXP = /(min|max)-resolution\s*:\s*\d*\.?\d+(dppx|dpcm|dpi|x)/gi
+const SPLIT = /(min|max)-resolution(\s*:\s*)(\d*\.?\d+)(dppx|dpcm|dpi|x)/i
 
 class Resolution extends Prefixer {
   /**
@@ -22,11 +22,19 @@ class Resolution extends Prefixer {
    * Return prefixed query
    */
   prefixQuery (prefix, name, colon, value, units) {
+    value = new Fraction(value)
+
+    // 1dpcm = 2.54dpi
+    // 1dppx = 96dpi
     if (units === 'dpi') {
-      value = Number(value / 96)
+      value = value.div(96)
+    } else if (units === 'dpcm') {
+      value = value.mul(2.54).div(96)
     }
+    value = value.simplify()
+
     if (prefix === '-o-') {
-      value = n2f(value)
+      value = value.n + '/' + value.d
     }
     return this.prefixName(prefix, name) + colon + value
   }

package.json

@@ -32,7 +32,7 @@
     "caniuse-lite": "^1.0.30001161",
     "colorette": "^1.2.1",
     "normalize-range": "^0.1.2",
-    "num2fraction": "^1.2.2",
+    "fraction.js": "^4.0.12",
     "postcss-value-parser": "^4.1.0"
   },
   "browser": {

test/cases/resolution.css

@@ -6,3 +6,11 @@
 @media (min-resolution: 144dpi) { }
 
 @media (min-resolution: 2x) { }
+
+@media (min-resolution: 120dpi) { }
+
+@media (min-resolution: 2dppx) { }
+
+@media only screen and (min-resolution: 124.8dpi) { }
+
+@media (min-resolution: 113.38dpcm) { }

test/cases/resolution.out.css

@@ -9,3 +9,11 @@
 @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 144dpi) { }
 
 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2x) { }
+
+@media (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 120dpi) { }
+
+@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx) { }
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 124.8dpi) { }
+
+@media (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 113.38dpcm) { }

yarn.lock

@@ -3376,6 +3376,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.12.tgz#0526d47c65a5fb4854df78bc77f7bec708d7b8c3"
+  integrity sha512-8Z1K0VTG4hzYY7kA/1sj4/r1/RWLBD3xwReT/RCrUCbzPszjNQCCsy3ktkU/eaEqX3MYa4pY37a52eiBlPMlhA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -5537,11 +5542,6 @@ nth-check@^1.0.2:
   dependencies:
     boolbase "~1.0.0"
 
-num2fraction@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
-  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
-
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"