Preserve image-set() fallback when needed

devongovett · devongovett · commit cb69f3368bd1 · 2022-08-21T17:19:34.000-07:00
Fixes parcel-bundler#252
diff --git a/scripts/build-prefixes.js b/scripts/build-prefixes.js
@@ -245,7 +245,8 @@ let mdnFeatures = {
           return [key, {version_added: false}];
         }
       })
-  )
+  ),
+  imageSet: mdn.css.types.image['image-set'].__compat.support
 };
 
 for (let feature in mdnFeatures) {
diff --git a/src/compat.rs b/src/compat.rs
@@ -41,6 +41,7 @@ pub enum Feature {
   FontFamilySystemUi,
   FormValidation,
   Fullscreen,
+  ImageSet,
   LabColors,
   LangList,
   LogicalBorderRadius,
@@ -2131,6 +2132,51 @@ impl Feature {
           return false;
         }
       }
+      Feature::ImageSet => {
+        if let Some(version) = browsers.chrome {
+          if version < 1638400 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 5177344 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.firefox {
+          if version < 5767168 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version < 917504 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.safari {
+          if version < 393216 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.ios_saf {
+          if version < 393216 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version < 66816 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 263168 {
+            return false;
+          }
+        }
+        if browsers.ie.is_some() {
+          return false;
+        }
+      }
       Feature::P3Colors | Feature::LangList => {
         if let Some(version) = browsers.safari {
           if version < 655616 {
diff --git a/src/lib.rs b/src/lib.rs
@@ -12225,6 +12225,70 @@ mod tests {
         ..Browsers::default()
       },
     );
+
+    for property in &[
+      "background",
+      "background-image",
+      "border-image-source",
+      "border-image",
+      "border-image-source",
+      "-webkit-mask-image",
+      "-webkit-mask",
+      "list-style-image",
+      "list-style",
+    ] {
+      prefix_test(
+        &format!(
+          r#"
+        .foo {{
+          {}: url(foo.png);
+          {}: image-set(url("foo.png") 2x, url(bar.png) 1x);
+        }}
+      "#,
+          property, property
+        ),
+        &format!(
+          indoc! {r#"
+        .foo {{
+          {}: url("foo.png");
+          {}: -webkit-image-set(url("foo.png") 2x, url("bar.png"));
+          {}: image-set("foo.png" 2x, "bar.png");
+        }}
+      "#},
+          property, property, property
+        ),
+        Browsers {
+          ie: Some(11 << 16),
+          chrome: Some(95 << 16),
+          ..Browsers::default()
+        },
+      );
+
+      prefix_test(
+        &format!(
+          r#"
+        .foo {{
+          {}: url(foo.png);
+          {}: image-set(url("foo.png") 2x, url(bar.png) 1x);
+        }}
+      "#,
+          property, property
+        ),
+        &format!(
+          indoc! {r#"
+        .foo {{
+          {}: -webkit-image-set(url("foo.png") 2x, url("bar.png"));
+          {}: image-set("foo.png" 2x, "bar.png");
+        }}
+      "#},
+          property, property
+        ),
+        Browsers {
+          chrome: Some(95 << 16),
+          ..Browsers::default()
+        },
+      );
+    }
   }
 
   #[test]
diff --git a/src/macros.rs b/src/macros.rs
@@ -210,7 +210,7 @@ pub(crate) use shorthand_property;
 macro_rules! shorthand_handler {
   (
     $name: ident -> $shorthand: ident$(<$l: lifetime>)? $(fallbacks: $shorthand_fallback: literal)?
-    { $( $key: ident: $prop: ident($type: ty $(, fallback: $fallback: literal)?), )+ }
+    { $( $key: ident: $prop: ident($type: ty $(, fallback: $fallback: literal)? $(, image: $image: literal)?), )+ }
   ) => {
     #[derive(Default)]
     pub(crate) struct $name$(<$l>)? {
@@ -237,12 +237,23 @@ macro_rules! shorthand_handler {
         match property {
           $(
             Property::$prop(val) => {
+              $(
+                if $image && val.should_preserve_fallback(&self.$key, self.targets) {
+                  self.finalize(dest, context);
+                }
+              )?
               self.$key = Some(val.clone());
               self.has_any = true;
             },
           )+
           Property::$shorthand(val) => {
             $(
+              $(
+                if $image && val.$key.should_preserve_fallback(&self.$key, self.targets) {
+                  self.finalize(dest, context);
+                }
+              )?
+
               self.$key = Some(val.$key.clone());
             )+
             self.has_any = true;
diff --git a/src/properties/background.rs b/src/properties/background.rs
@@ -780,6 +780,11 @@ impl<'i> PropertyHandler<'i> for BackgroundHandler<'i> {
   ) -> bool {
     macro_rules! background_image {
       ($val: ident) => {
+        // If this is an image-set() and not all of our targets support it, preserve previous fallback.
+        if Image::should_preserve_fallbacks(&$val, self.images.as_ref(), self.targets) {
+          self.flush(dest);
+        }
+
         // Store prefixed properties. Clear if we hit an unprefixed property and we have
         // targets. In this case, the necessary prefixes will be generated.
         self.has_prefix = $val.iter().any(|x| x.has_vendor_prefix());
diff --git a/src/properties/border_image.rs b/src/properties/border_image.rs
@@ -384,12 +384,22 @@ impl<'i> PropertyHandler<'i> for BorderImageHandler<'i> {
     }
 
     match property {
-      BorderImageSource(val) => property!(source, val),
+      BorderImageSource(val) => {
+        if val.should_preserve_fallback(&self.source, self.targets) {
+          self.flush(dest);
+        }
+
+        property!(source, val);
+      }
       BorderImageSlice(val) => property!(slice, val),
       BorderImageWidth(val) => property!(width, val),
       BorderImageOutset(val) => property!(outset, val),
       BorderImageRepeat(val) => property!(repeat, val),
       BorderImage(val, vp) => {
+        if val.source.should_preserve_fallback(&self.source, self.targets) {
+          self.flush(dest);
+        }
+
         self.set_border_image(val);
         self.vendor_prefix |= *vp;
         self.has_any = true;
diff --git a/src/properties/list.rs b/src/properties/list.rs
@@ -322,7 +322,7 @@ impl<'i> FallbackValues for ListStyle<'i> {
 }
 
 shorthand_handler!(ListStyleHandler -> ListStyle<'i> fallbacks: true {
+  image: ListStyleImage(Image<'i>, fallback: true, image: true),
   list_style_type: ListStyleType(ListStyleType<'i>),
-  image: ListStyleImage(Image<'i>, fallback: true),
   position: ListStylePosition(ListStylePosition),
 });
diff --git a/src/properties/masking.rs b/src/properties/masking.rs
@@ -615,7 +615,12 @@ impl<'i> PropertyHandler<'i> for MaskHandler<'i> {
     }
 
     match property {
-      Property::MaskImage(val, vp) => property!(images, val, vp),
+      Property::MaskImage(val, vp) => {
+        if Image::should_preserve_fallbacks(val, self.images.as_ref().map(|v| &v.0), context.targets) {
+          self.finalize(dest, context)
+        }
+        property!(images, val, vp)
+      }
       Property::MaskPosition(val, vp) => property!(positions, val, vp),
       Property::MaskSize(val, vp) => property!(sizes, val, vp),
       Property::MaskRepeat(val, vp) => property!(repeats, val, vp),
@@ -625,6 +630,9 @@ impl<'i> PropertyHandler<'i> for MaskHandler<'i> {
       Property::MaskMode(val) => self.modes = Some(val.clone()),
       Property::Mask(val, prefix) => {
         let images = val.iter().map(|b| b.image.clone()).collect();
+        if Image::should_preserve_fallbacks(&images, self.images.as_ref().map(|v| &v.0), context.targets) {
+          self.finalize(dest, context)
+        }
         maybe_flush!(images, &images, prefix);
 
         let positions = val.iter().map(|b| b.position.clone()).collect();
diff --git a/src/values/image.rs b/src/values/image.rs
@@ -3,6 +3,7 @@
 use super::color::ColorFallbackKind;
 use super::gradient::*;
 use super::resolution::Resolution;
+use crate::compat;
 use crate::dependencies::{Dependency, UrlDependency};
 use crate::error::{ParserError, PrinterError};
 use crate::prefixes::{is_webkit_gradient, Feature};
@@ -99,6 +100,30 @@ impl<'i> Image<'i> {
       _ => self.clone(),
     }
   }
+
+  pub(crate) fn should_preserve_fallback(&self, fallback: &Option<Image>, targets: Option<Browsers>) -> bool {
+    if let (Some(fallback), Some(targets)) = (&fallback, targets) {
+      return !compat::Feature::ImageSet.is_compatible(targets)
+        && matches!(self, Image::ImageSet(..))
+        && !matches!(fallback, Image::ImageSet(..));
+    }
+
+    false
+  }
+
+  pub(crate) fn should_preserve_fallbacks(
+    images: &SmallVec<[Image; 1]>,
+    fallback: Option<&SmallVec<[Image; 1]>>,
+    targets: Option<Browsers>,
+  ) -> bool {
+    if let (Some(fallback), Some(targets)) = (&fallback, targets) {
+      return !compat::Feature::ImageSet.is_compatible(targets)
+        && images.iter().any(|x| matches!(x, Image::ImageSet(..)))
+        && !fallback.iter().any(|x| matches!(x, Image::ImageSet(..)));
+    }
+
+    false
+  }
 }
 
 pub(crate) trait ImageFallback<'i>: Sized {

Original file line number	Diff line number	Diff line change
`@@ -245,7 +245,8 @@ let mdnFeatures = {`
`245`	`245`	`return [key, {version_added: false}];`
`246`	`246`	`}`
`247`	`247`	`})`
`248`		`- )`
	`248`	`+ ),`
	`249`	`+ imageSet: mdn.css.types.image['image-set'].__compat.support`
`249`	`250`	`};`
`250`	`251`
`251`	`252`	`for (let feature in mdnFeatures) {`
Original file line number	Diff line number	Diff line change
`@@ -322,7 +322,7 @@ impl<'i> FallbackValues for ListStyle<'i> {`
`322`	`322`	`}`
`323`	`323`
`324`	`324`	`shorthand_handler!(ListStyleHandler -> ListStyle<'i> fallbacks: true {`
	`325`	`+ image: ListStyleImage(Image<'i>, fallback: true, image: true),`
`325`	`326`	`list_style_type: ListStyleType(ListStyleType<'i>),`
`326`		`- image: ListStyleImage(Image<'i>, fallback: true),`
`327`	`327`	`position: ListStylePosition(ListStylePosition),`
`328`	`328`	`});`