Print dppx when x unit alias is unsupported

Fixes parcel-bundler#229

Author: devongovett

scripts/build-prefixes.js

@@ -246,7 +246,8 @@ let mdnFeatures = {
         }
       })
   ),
-  imageSet: mdn.css.types.image['image-set'].__compat.support
+  imageSet: mdn.css.types.image['image-set'].__compat.support,
+  xResolutionUnit: mdn.css.types.resolution.x.__compat.support
 };
 
 for (let feature in mdnFeatures) {

src/compat.rs

@@ -66,6 +66,7 @@ pub enum Feature {
   SpaceSeparatedColorFunction,
   TextDecorationThicknessPercent,
   TextDecorationThicknessShorthand,
+  XResolutionUnit,
 }
 
 impl Feature {
@@ -2177,6 +2178,41 @@ impl Feature {
           return false;
         }
       }
+      Feature::XResolutionUnit => {
+        if let Some(version) = browsers.chrome {
+          if version < 4456448 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 5177344 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.firefox {
+          if version < 4063232 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version < 3145728 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version < 655360 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 4456448 {
+            return false;
+          }
+        }
+        if browsers.ie.is_some() || browsers.ios_saf.is_some() || browsers.safari.is_some() {
+          return false;
+        }
+      }
       Feature::P3Colors | Feature::LangList => {
         if let Some(version) = browsers.safari {
           if version < 655616 {

src/lib.rs

@@ -20102,4 +20102,49 @@ mod tests {
       "@foo{foo: bar;}",
     );
   }
+
+  #[test]
+  fn test_resolution() {
+    prefix_test(
+      r#"
+      @media (resolution: 1dppx) {
+        body {
+          background: red;
+        }
+      }
+      "#,
+      indoc! { r#"
+      @media (resolution: 1dppx) {
+        body {
+          background: red;
+        }
+      }
+      "#},
+      Browsers {
+        chrome: Some(50 << 16),
+        ..Browsers::default()
+      },
+    );
+
+    prefix_test(
+      r#"
+      @media (resolution: 1dppx) {
+        body {
+          background: red;
+        }
+      }
+      "#,
+      indoc! { r#"
+      @media (resolution: 1x) {
+        body {
+          background: red;
+        }
+      }
+      "#},
+      Browsers {
+        chrome: Some(95 << 16),
+        ..Browsers::default()
+      },
+    );
+  }
 }

src/values/image.rs

@@ -480,7 +480,13 @@ impl<'i> ImageSetOption<'i> {
 
     if self.resolution != Resolution::Dppx(1.0) {
       dest.write_char(' ')?;
+
+      // Safari only supports the x resolution unit in image-set().
+      // In other places, x was added as an alias later.
+      // Temporarily ignore the targets while printing here.
+      let targets = std::mem::take(&mut dest.targets);
       self.resolution.to_css(dest)?;
+      dest.targets = targets;
     }
 
     if let Some(file_type) = &self.file_type {

src/values/resolution.rs

@@ -2,6 +2,7 @@
 
 use super::length::serialize_dimension;
 use super::number::CSSNumber;
+use crate::compat::Feature;
 use crate::error::{ParserError, PrinterError};
 use crate::printer::Printer;
 use crate::traits::{Parse, ToCss};
@@ -49,7 +50,17 @@ impl ToCss for Resolution {
     let (value, unit) = match self {
       Resolution::Dpi(dpi) => (*dpi, "dpi"),
       Resolution::Dpcm(dpcm) => (*dpcm, "dpcm"),
-      Resolution::Dppx(dppx) => (*dppx, "x"),
+      Resolution::Dppx(dppx) => {
+        if let Some(targets) = dest.targets {
+          if Feature::XResolutionUnit.is_compatible(targets) {
+            (*dppx, "x")
+          } else {
+            (*dppx, "dppx")
+          }
+        } else {
+          (*dppx, "x")
+        }
+      }
     };
 
     serialize_dimension(value, unit, dest)