Vendor prefixing for filter properties

Author: devongovett

scripts/build-prefixes.js

@@ -38,6 +38,12 @@ for (let prop in prefixes) {
       continue;
     }
     let prefix = browsers[name].prefix_exceptions?.[version] || browsers[name].prefix;
+  
+    // https://github.com/postcss/autoprefixer/blob/main/lib/hacks/backdrop-filter.js#L11
+    if (prefix === 'ms' && prop === 'backdrop-filter') {
+      prefix = 'webkit';
+    }
+
     name = BROWSER_MAPPING[name] || name;
     let v = parseVersion(version);
     if (v == null) {

src/lib.rs

@@ -12357,16 +12357,85 @@ mod tests {
     minify_test(".foo { filter: drop-shadow(16px 16px 20px yellow); }", ".foo{filter:drop-shadow(16px 16px 20px #ff0)}");
     minify_test(".foo { filter: contrast(175%) brightness(3%); }", ".foo{filter:contrast(175%)brightness(3%)}");
 
+    prefix_test(
+      ".foo { filter: blur(5px) }",
+      indoc! { r#"
+        .foo {
+          -webkit-filter: blur(5px);
+          filter: blur(5px);
+        }
+      "#},
+      Browsers {
+        chrome: Some(20 << 16),
+        ..Browsers::default()
+      }
+    );
+
+    prefix_test(
+      ".foo { filter: blur(5px) }",
+      indoc! { r#"
+        .foo {
+          filter: blur(5px);
+        }
+      "#},
+      Browsers {
+        chrome: Some(80 << 16),
+        ..Browsers::default()
+      }
+    );
+
+    prefix_test(
+      ".foo { backdrop-filter: blur(5px) }",
+      indoc! { r#"
+        .foo {
+          backdrop-filter: blur(5px);
+        }
+      "#},
+      Browsers {
+        chrome: Some(80 << 16),
+        ..Browsers::default()
+      }
+    );
+
+    prefix_test(
+      ".foo { backdrop-filter: blur(5px) }",
+      indoc! { r#"
+        .foo {
+          -webkit-backdrop-filter: blur(5px);
+          backdrop-filter: blur(5px);
+        }
+      "#},
+      Browsers {
+        safari: Some(15 << 16),
+        ..Browsers::default()
+      }
+    );
+
+    prefix_test(
+      ".foo { filter: var(--foo) }",
+      indoc! { r#"
+        .foo {
+          -webkit-filter: var(--foo);
+          filter: var(--foo);
+        }
+      "#},
+      Browsers {
+        chrome: Some(20 << 16),
+        ..Browsers::default()
+      }
+    );
+
     prefix_test(
       ".foo { filter: drop-shadow(16px 16px 20px lab(40% 56.6 39)) }",
       indoc! { r#"
         .foo {
+          -webkit-filter: drop-shadow(16px 16px 20px #b32323);
           filter: drop-shadow(16px 16px 20px #b32323);
           filter: drop-shadow(16px 16px 20px lab(40% 56.6 39));
         }
       "#},
       Browsers {
-        chrome: Some(4 << 16),
+        chrome: Some(20 << 16),
         ..Browsers::default()
       }
     );

src/prefixes.rs

@@ -547,7 +547,7 @@ impl Feature {
       Feature::BackdropFilter => {
         if let Some(version) = browsers.edge {
           if version >= 1114112 && version <= 1179648 {
-            prefixes |= VendorPrefix::Ms;
+            prefixes |= VendorPrefix::WebKit;
           }
         }
         if let Some(version) = browsers.ios_saf {

src/properties/mod.rs

@@ -862,8 +862,8 @@ define_properties! {
   "mask-box-image-repeat": WebKitMaskBoxImageRepeat(BorderImageRepeat, VendorPrefix) / WebKit unprefixed: false,
 
   // https://drafts.fxtf.org/filter-effects-1/
-  "filter": Filter(FilterList<'i>),
-  "backdrop-filter": BackdropFilter(FilterList<'i>),
+  "filter": Filter(FilterList<'i>, VendorPrefix) / WebKit,
+  "backdrop-filter": BackdropFilter(FilterList<'i>, VendorPrefix) / WebKit,
 }
 
 impl<'i, T: smallvec::Array<Item = V>, V: Parse<'i>> Parse<'i> for SmallVec<T> {

src/properties/prefix_handler.rs

@@ -99,7 +99,7 @@ define_prefixes! {
 
 macro_rules! define_fallbacks {
   (
-    $( $name: ident, )+
+    $( $name: ident$(($p: ident))?, )+
   ) => {
     #[derive(Default)]
     pub(crate) struct FallbackHandler {
@@ -118,16 +118,30 @@ macro_rules! define_fallbacks {
       fn handle_property(&mut self, property: &Property<'i>, dest: &mut DeclarationList<'i>, context: &mut PropertyHandlerContext<'i>) -> bool {
         match property {
           $(
-            Property::$name(val) => {
+            Property::$name(val $(, mut $p)?) => {
               let mut val = val.clone();
               if let Some(targets) = self.targets {
+                $(
+                  if $p.contains(VendorPrefix::None) {
+                    $p = Feature::$name.prefixes_for(targets);
+                  }
+                )?
+
                 let fallbacks = val.get_fallbacks(targets);
+                #[allow(unused_variables)]
+                let has_fallbacks = !fallbacks.is_empty();
                 for fallback in fallbacks {
-                  dest.push(Property::$name(fallback.clone()))
+                  dest.push(Property::$name(fallback $(, $p)?))
                 }
+
+                $(
+                  if has_fallbacks && $p.contains(VendorPrefix::None) {
+                    $p = VendorPrefix::None;
+                  }
+                )?
               }
 
-              dest.push(Property::$name(val))
+              dest.push(Property::$name(val $(, $p)?))
             }
           )+
           Property::Custom(custom) => {
@@ -149,8 +163,30 @@ macro_rules! define_fallbacks {
 
             dest.push(Property::Custom(custom))
           }
-          Property::Unparsed(val) if matches!(val.property_id, $( PropertyId::$name | )+ PropertyId::All) => {
-            let mut unparsed = val.clone();
+          Property::Unparsed(val) => {
+            let mut unparsed = match val.property_id {
+              $(
+                PropertyId::$name$(($p))? => {
+                  macro_rules! get_prefixed {
+                    ($vp: ident) => {
+                      if $vp.contains(VendorPrefix::None) {
+                        val.get_prefixed(self.targets, Feature::$name)
+                      } else {
+                        val.clone()
+                      }
+                    };
+                    () => {
+                      val.clone()
+                    };
+                  }
+
+                  get_prefixed!($($p)?)
+                }
+              )+
+              PropertyId::All => val.clone(),
+              _ => return false
+            };
+            
             context.add_unparsed_fallbacks(&mut unparsed);
             dest.push(Property::Unparsed(unparsed));
           }
@@ -168,7 +204,8 @@ macro_rules! define_fallbacks {
 define_fallbacks! {
   Color,
   TextShadow,
-  Filter,
+  Filter(prefix),
+  BackdropFilter(prefix),
   Fill,
   Stroke,
   CaretColor,