Don't generate double position gradient syntax if not supported by targets

Author: devongovett

build-prefixes.js

@@ -2,6 +2,7 @@ const prefixes = require('autoprefixer/data/prefixes');
 const browsers = require('caniuse-lite').agents;
 const unpack = require('caniuse-lite').feature;
 const features = require('caniuse-lite').features;
+const mdn = require('@mdn/browser-compat-data');
 const fs = require('fs');
 
 const BROWSER_MAPPING = {
@@ -17,6 +18,15 @@ const BROWSER_MAPPING = {
   op_mini: null,
 };
 
+const MDN_BROWSER_MAPPING = {
+  chrome_android: 'chrome',
+  firefox_android: 'firefox',
+  opera_android: 'opera',
+  safari_ios: 'ios_saf',
+  samsunginternet_android: 'samsung',
+  webview_android: 'android'
+};
+
 // Fix data, autoprefixer seems wrong.
 // See https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
 prefixes['::file-selector-button'].browsers = [
@@ -165,6 +175,35 @@ for (let feature of cssFeatures) {
   compat[feature] = browserMap;
 }
 
+let mdnFeatures = {
+  doublePositionGradients: mdn.css.types.image.gradient['radial-gradient'].doubleposition.__compat.support
+};
+
+for (let feature in mdnFeatures) {
+  let browserMap = {};
+  for (let name in mdnFeatures[feature]) {
+    if (MDN_BROWSER_MAPPING[name] === null) {
+      continue;
+    }
+  
+    let version = mdnFeatures[feature][name].version_added;
+    if (!version) {
+      continue;
+    }
+    
+    let v = parseVersion(version);
+    if (v == null) {
+      console.log('BAD VERSION', feature, name, version);
+      continue;
+    }
+
+    name = MDN_BROWSER_MAPPING[name] || name;
+    browserMap[name] = v;
+  }
+
+  compat[feature] = browserMap;
+}
+
 let prefixMapping = {
   webkit: 'WebKit',
   moz: 'Moz',

package.json

@@ -32,6 +32,7 @@
     "detect-libc": "^1.0.3"
   },
   "devDependencies": {
+    "@mdn/browser-compat-data": "^4.0.12",
     "@napi-rs/cli": "1.0.4",
     "autoprefixer": "^10.4.0",
     "caniuse-lite": "^1.0.30001272",

src/compat.rs

@@ -27,6 +27,7 @@ pub enum Feature {
   CssSel3,
   CssSelection,
   Dialog,
+  DoublePositionGradients,
   FormValidation,
   Fullscreen,
   Shadowdomv1
@@ -1114,6 +1115,48 @@ impl Feature {
           }
         }
       }
+      Feature::DoublePositionGradients => {
+        if let Some(version) = browsers.chrome {
+          if version >= 4653056 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version >= 5177344 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.firefox {
+          if version >= 4194304 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version >= 3276800 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.safari {
+          if version >= 786688 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.ios_saf {
+          if version >= 786944 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version >= 655360 {
+            return true
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version >= 4653056 {
+            return true
+          }
+        }
+      }
     }
     false
   }

src/lib.rs

@@ -4005,6 +4005,40 @@ mod tests {
         ..Browsers::default()
       }
     );
+
+    prefix_test(
+      r#"
+      .foo {
+        background: linear-gradient(yellow, red 30% 40%, blue);
+      }
+      "#,
+      indoc! {r#"
+      .foo {
+        background: linear-gradient(#ff0, red 30%, red 40%, #00f);
+      }
+      "#},
+      Browsers {
+        chrome: Some(70 << 16),
+        ..Browsers::default()
+      }
+    );
+
+    prefix_test(
+      r#"
+      .foo {
+        background: linear-gradient(yellow, red 30% 40%, blue);
+      }
+      "#,
+      indoc! {r#"
+      .foo {
+        background: linear-gradient(#ff0, red 30% 40%, #00f);
+      }
+      "#},
+      Browsers {
+        chrome: Some(71 << 16),
+        ..Browsers::default()
+      }
+    );
   }
 
   #[test]

src/values/gradient.rs

@@ -10,6 +10,7 @@ use crate::properties::prefixes::{Feature, Browsers};
 use crate::traits::{Parse, ToCss};
 use crate::macros::enum_property;
 use crate::printer::Printer;
+use crate::compat;
 
 /// https://www.w3.org/TR/css-images-3/#gradients
 #[derive(Debug, Clone, PartialEq)]
@@ -621,18 +622,21 @@ fn serialize_items<D: ToCss + std::cmp::PartialOrd<f32> + std::cmp::PartialEq<D>
       continue
     }
 
+    // Use double position stop if the last stop is the same color and all targets support it.
     if let Some(prev) = last {
-      match (prev, item) {
-        (
-          GradientItem::ColorStop(ColorStop { position: Some(_), color: ca }),
-          GradientItem::ColorStop(ColorStop { position: Some(p), color: cb })
-        ) if ca == cb => {
-          dest.write_char(' ')?;
-          p.to_css(dest)?;
-          last = None;
-          continue
+      if dest.targets.is_none() || compat::Feature::DoublePositionGradients.is_compatible(dest.targets.unwrap()) {
+        match (prev, item) {
+          (
+            GradientItem::ColorStop(ColorStop { position: Some(_), color: ca }),
+            GradientItem::ColorStop(ColorStop { position: Some(p), color: cb })
+          ) if ca == cb => {
+            dest.write_char(' ')?;
+            p.to_css(dest)?;
+            last = None;
+            continue
+          }
+          _ => {}
         }
-        _ => {}
       }
     }
 

yarn.lock

@@ -226,6 +226,11 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
+"@mdn/browser-compat-data@^4.0.12":
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-4.0.12.tgz#ea5472755d8460b711c61b6ed8f47f92f782c6c0"
+  integrity sha512-vUxvn5V8KLQAm9EmxOv9STqsZrEuJbY5rKoxOwM31cKN34qzBbGpy+yOl4OQh3eqXh7S5uIOyIleZS3rKsuf4g==
+
 "@napi-rs/cli@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@napi-rs/cli/-/cli-1.0.4.tgz#b2d987cd0da1791cfd74adca4e5637029bb2758f"