feat: add dppx when the browser does not support the x unit in resolution media queries

Author: yisibl

lib/resolution.js

@@ -4,7 +4,7 @@ let Prefixer = require('./prefixer')
 let utils = require('./utils')
 
 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
+const SPLIT = /((min|max)-resolution)(\s*:\s*)(\d*\.?\d+)(dppx|dpcm|dpi|x)/i
 
 class Resolution extends Prefixer {
   /**
@@ -73,19 +73,36 @@ class Resolution extends Prefixer {
           continue
         }
 
+        let fallbackExpression
+        let addFallbackExpression = false
         for (let prefix of prefixes) {
           let processed = query.replace(REGEXP, str => {
             let parts = str.match(SPLIT)
+            let fallbackName = parts[1]
+            let colon = parts[3]
+            let value = parts[4]
+            let units = parts[5]
+
+            // Add `ddpx` for browsers that do not support `x` unit.
+            // `x` unit: Chrome 68+, Edge 79+, Opera 55+, Safari 16+, Firefox 62+
+            // See: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#browser_compatibility
+            if (units === 'x') {
+              fallbackExpression = '(' + fallbackName + colon + value + 'dppx' + ')'
+              addFallbackExpression = true
+            }
+
             return this.prefixQuery(
               prefix,
-              parts[1],
-              parts[2],
-              parts[3],
-              parts[4]
+              parts[2], // min- or max-
+              colon,
+              value,
+              units
             )
           })
           prefixed.push(processed)
         }
+
+        if (addFallbackExpression) prefixed.push(fallbackExpression)
         prefixed.push(query)
       }
 

test/autoprefixer.test.js

@@ -231,6 +231,7 @@ const COMMONS = [
   'supports',
   'viewport',
   'resolution',
+  'resolution-dppx-fallback',
   'logical',
   'appearance',
   'advanced-filter',
@@ -505,6 +506,11 @@ test('removes unnecessary prefixes', () => {
     if (i === 'grid-template-areas') continue
     let input = read(i + '.out')
     let output = read(i)
+
+    if (i === 'resolution-dppx-fallback') {
+      output = '@media (min-resolution: 2dppx), (min-resolution: 2x) { }\n'
+    }
+
     equal(processor.process(input).css, output)
   }
 })

test/cases/resolution-dppx-fallback.css

@@ -0,0 +1 @@
+@media (min-resolution: 2x) { }

test/cases/resolution-dppx-fallback.out.css

@@ -0,0 +1 @@
+@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 2x) { }

test/cases/resolution.css

@@ -5,7 +5,7 @@
 
 @media (min-resolution: 144dpi) { }
 
-@media (min-resolution: 2x) { }
+@media (min-resolution: 2dppx), (min-resolution: 2x) { }
 
 @media (min-resolution: 120dpi) { }
 

test/cases/resolution.out.css

@@ -8,7 +8,7 @@
 
 @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: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (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) { }