fix: if the browser doesn't support #rrggbbaa color syntax, it is converted to transparent (#296)

Author: yisibl

src/lib.rs

@@ -12801,6 +12801,67 @@ mod tests {
     minify_test(".foo { color: hwb(none none none) }", ".foo{color:red}");
     minify_test(".foo { color: rgb(none none none) }", ".foo{color:#000}");
 
+    // If the browser doesn't support `#rrggbbaa` color syntax, it is converted to `transparent`.
+    attr_test(
+      "color: rgba(0, 0, 0, 0)",
+      "color:transparent",
+      true,
+      Some(Browsers {
+        chrome: Some(61 << 16), // Chrome >= 62 supports `#rrggbbaa` color.
+        ..Browsers::default()
+      }),
+    );
+
+    attr_test(
+      "color: #0000",
+      "color:transparent",
+      true,
+      Some(Browsers {
+        chrome: Some(61 << 16), // Chrome >= 62 supports `#rrggbbaa` color.
+        ..Browsers::default()
+      }),
+    );
+
+    attr_test(
+      "color: transparent",
+      "color:transparent",
+      true,
+      Some(Browsers {
+        chrome: Some(61 << 16),
+        ..Browsers::default()
+      }),
+    );
+
+    attr_test(
+      "color: rgba(0, 0, 0, 0)",
+      "color: rgba(0, 0, 0, 0)",
+      false,
+      Some(Browsers {
+        chrome: Some(61 << 16),
+        ..Browsers::default()
+      }),
+    );
+
+    attr_test(
+      "color: rgba(255, 0, 0, 0)",
+      "color:rgba(255,0,0,0)",
+      true,
+      Some(Browsers {
+        chrome: Some(61 << 16),
+        ..Browsers::default()
+      }),
+    );
+
+    attr_test(
+      "color: rgba(255, 0, 0, 0)",
+      "color:#f000",
+      true,
+      Some(Browsers {
+        chrome: Some(62 << 16),
+        ..Browsers::default()
+      }),
+    );
+
     prefix_test(
       ".foo { color: rgba(123, 456, 789, 0.5) }",
       indoc! { r#"

src/values/color.rs

@@ -370,24 +370,30 @@ impl ToCss for CssColor {
           // If the #rrggbbaa syntax is not supported by the browser targets, output rgba()
           if let Some(targets) = dest.targets {
             if !Feature::CssRrggbbaa.is_compatible(targets) {
-              dest.write_str("rgba(")?;
-              write!(dest, "{}", color.red)?;
-              dest.delim(',', false)?;
-              write!(dest, "{}", color.green)?;
-              dest.delim(',', false)?;
-              write!(dest, "{}", color.blue)?;
-              dest.delim(',', false)?;
-
-              // Try first with two decimal places, then with three.
-              let mut rounded_alpha = (color.alpha_f32() * 100.0).round() / 100.0;
-              let clamped = (rounded_alpha * 255.0).round().max(0.).min(255.0) as u8;
-              if clamped != color.alpha {
-                rounded_alpha = (color.alpha_f32() * 1000.).round() / 1000.;
+              // If the browser doesn't support `#rrggbbaa` color syntax, it is converted to `transparent` when compressed(minify = true).
+              // https://www.w3.org/TR/css-color-4/#transparent-black
+              if dest.minify && color.red == 0 && color.green == 0 && color.blue == 0 && color.alpha == 0 {
+                return dest.write_str("transparent");
+              } else {
+                dest.write_str("rgba(")?;
+                write!(dest, "{}", color.red)?;
+                dest.delim(',', false)?;
+                write!(dest, "{}", color.green)?;
+                dest.delim(',', false)?;
+                write!(dest, "{}", color.blue)?;
+                dest.delim(',', false)?;
+
+                // Try first with two decimal places, then with three.
+                let mut rounded_alpha = (color.alpha_f32() * 100.0).round() / 100.0;
+                let clamped = (rounded_alpha * 255.0).round().max(0.).min(255.0) as u8;
+                if clamped != color.alpha {
+                  rounded_alpha = (color.alpha_f32() * 1000.).round() / 1000.;
+                }
+
+                rounded_alpha.to_css(dest)?;
+                dest.write_char(')')?;
+                return Ok(());
               }
-
-              rounded_alpha.to_css(dest)?;
-              dest.write_char(')')?;
-              return Ok(());
             }
           }