feat(css/prefixer): Prefix percentage with opacity (#6638)

Author: alexander-akait

crates/swc_css_prefixer/data/prefixes_and_browsers.json

@@ -3873,5 +3873,23 @@
       "firefox": "3"
     },
     {}
+  ],
+  "opacity": [
+    {
+      "chrome": "4",
+      "edge": "12",
+      "firefox": "2",
+      "samsung": "4",
+      "ios": "3.2",
+      "opera": "10",
+      "safari": "3.1",
+      "ie": "6"
+    },
+    {
+      "chrome": "77",
+      "edge": "78",
+      "firefox": "69",
+      "samsung": "11.2"
+    }
   ]
 }

crates/swc_css_prefixer/src/prefixer.rs

@@ -535,6 +535,16 @@ macro_rules! to_integer {
     }};
 }
 
+macro_rules! to_number {
+    ($val:expr) => {{
+        ComponentValue::Number(Box::new(Number {
+            span: DUMMY_SP,
+            value: $val,
+            raw: None,
+        }))
+    }};
+}
+
 #[derive(Debug, PartialEq, Eq, Clone, Copy)]
 pub enum Prefix {
     Webkit,
@@ -1431,6 +1441,36 @@ impl VisitMut for Prefixer {
                     }
                 }
             }};
+
+            ($property:expr, $value:expr) => {{
+                if should_prefix($property, self.env, true) {
+                    // Check we don't have prefixed property
+
+                    let name = DeclarationName::Ident(Ident {
+                        span: DUMMY_SP,
+                        value: $property.into(),
+                        raw: None,
+                    });
+
+                    let value: Option<Box<dyn Fn() -> Vec<ComponentValue>>> = $value;
+
+                    if let Some(value) = value {
+                        self.added_declarations.push(Box::new(Declaration {
+                            span: n.span,
+                            name,
+                            value: value(),
+                            important: n.important.clone(),
+                        }));
+                    } else {
+                        self.added_declarations.push(Box::new(Declaration {
+                            span: n.span,
+                            name,
+                            value: n.value.clone(),
+                            important: n.important.clone(),
+                        }));
+                    }
+                }
+            }};
         }
 
         let property_name = &*name.to_ascii_lowercase();
@@ -1970,6 +2010,22 @@ impl VisitMut for Prefixer {
                 );
             }
 
+            "opacity" if should_prefix("opacity", self.env, true) => {
+                let old_value = match n.value.get(0) {
+                    Some(ComponentValue::Percentage(percentage)) => Some(percentage.value.value),
+                    _ => None,
+                };
+
+                if let Some(old_value) = old_value {
+                    let rounded_alpha = (old_value * 1000.0).round() / 100000.0;
+
+                    add_declaration!(
+                        "opacity",
+                        Some(Box::new(|| { vec![to_number!(rounded_alpha)] }))
+                    );
+                }
+            }
+
             "order" => {
                 let old_spec_num = match n.value.get(0) {
                     Some(ComponentValue::Integer(integer)) => Some(integer.value + 1),

crates/swc_css_prefixer/tests/fixture/opacity/input.css

@@ -0,0 +1,18 @@
+.class {
+    opacity: 0%;
+    opacity: 45%;
+    opacity: 0.45%;
+    opacity: 0.045%;
+    opacity: 0.00000000000045%;
+    opacity: 0.33%;
+    opacity: 0.3333333333%;
+    opacity: 99%;
+    opacity: 100%;
+    opacity: 120%;
+    opacity: 0.9999999999%;
+}
+
+.bar {
+    opacity: 0.3;
+    opacity: initial;
+}

crates/swc_css_prefixer/tests/fixture/opacity/output.css

@@ -0,0 +1,28 @@
+.class {
+  opacity: 0;
+  opacity: 0%;
+  opacity: 0.45;
+  opacity: 45%;
+  opacity: 0.0045;
+  opacity: 0.45%;
+  opacity: 0.00045;
+  opacity: 0.045%;
+  opacity: 0;
+  opacity: 0.00000000000045%;
+  opacity: 0.0033;
+  opacity: 0.33%;
+  opacity: 0.00333;
+  opacity: 0.3333333333%;
+  opacity: 0.99;
+  opacity: 99%;
+  opacity: 1;
+  opacity: 100%;
+  opacity: 1.2;
+  opacity: 120%;
+  opacity: 0.01;
+  opacity: 0.9999999999%;
+}
+.bar {
+  opacity: 0.3;
+  opacity: initial;
+}

crates/swc_css_prefixer/tests/fixture/opacity/output.defaults-not-ie-11.css

@@ -0,0 +1,28 @@
+.class {
+  opacity: 0;
+  opacity: 0%;
+  opacity: 0.45;
+  opacity: 45%;
+  opacity: 0.0045;
+  opacity: 0.45%;
+  opacity: 0.00045;
+  opacity: 0.045%;
+  opacity: 0;
+  opacity: 0.00000000000045%;
+  opacity: 0.0033;
+  opacity: 0.33%;
+  opacity: 0.00333;
+  opacity: 0.3333333333%;
+  opacity: 0.99;
+  opacity: 99%;
+  opacity: 1;
+  opacity: 100%;
+  opacity: 1.2;
+  opacity: 120%;
+  opacity: 0.01;
+  opacity: 0.9999999999%;
+}
+.bar {
+  opacity: 0.3;
+  opacity: initial;
+}