feat(css/minifier): Compress alpha of values (#3707)

crates/swc_css_minifier/src/compress/alpha_value.rs

@@ -0,0 +1,57 @@
+use swc_css_ast::*;
+use swc_css_visit::{VisitMut, VisitMutWith};
+
+pub fn compress_alpha_value() -> impl VisitMut {
+    CompressAlphaValue { preserve: true }
+}
+
+struct CompressAlphaValue {
+    preserve: bool,
+}
+
+impl VisitMut for CompressAlphaValue {
+    fn visit_mut_declaration(&mut self, declaration: &mut Declaration) {
+        declaration.visit_mut_children_with(self);
+
+        if let DeclarationName::Ident(Ident { value, .. }) = &declaration.name {
+            match &*value.to_lowercase() {
+                "opacity" | "fill-opacity" | "stroke-opacity" | "shape-image-threshold" => {
+                    let old_preserve = self.preserve;
+
+                    self.preserve = false;
+
+                    declaration.visit_mut_children_with(self);
+
+                    self.preserve = old_preserve;
+                }
+                _ => {
+                    declaration.visit_mut_children_with(self);
+                }
+            }
+        }
+    }
+
+    fn visit_mut_value(&mut self, value: &mut Value) {
+        value.visit_mut_children_with(self);
+
+        if self.preserve {
+            return;
+        }
+
+        match value {
+            Value::Percentage(Percentage {
+                span,
+                value: number,
+            }) if number.value % 10.0 == 0.0 => {
+                let new_value = number.value / 100.0;
+
+                *value = Value::Number(Number {
+                    span: *span,
+                    value: new_value,
+                    raw: new_value.to_string().into(),
+                });
+            }
+            _ => {}
+        }
+    }
+}

crates/swc_css_minifier/src/compress/mod.rs

@@ -1,3 +1,4 @@
+pub mod alpha_value;
 pub mod angle;
 pub mod declaration;
 pub mod easing_function;

crates/swc_css_minifier/src/lib.rs

@@ -4,7 +4,7 @@ use swc_css_ast::*;
 use swc_css_visit::VisitMutWith;
 
 use self::compress::{
-    angle::compress_angle, declaration::compress_declaration,
+    alpha_value::compress_alpha_value, angle::compress_angle, declaration::compress_declaration,
     easing_function::compress_easing_function, empty::compress_empty,
     frequency::compress_frequency, keyframes::compress_keyframes, length::compress_length,
     selector::compress_selector, time::compress_time,
@@ -15,6 +15,7 @@ mod compress;
 
 pub fn minify(stylesheet: &mut Stylesheet) {
     stylesheet.visit_mut_with(&mut compress_empty());
+    stylesheet.visit_mut_with(&mut compress_alpha_value());
     stylesheet.visit_mut_with(&mut compress_length());
     stylesheet.visit_mut_with(&mut compress_angle());
     stylesheet.visit_mut_with(&mut compress_time());

crates/swc_css_minifier/tests/fixture/compress-alpha-value/input.css

@@ -0,0 +1,47 @@
+.class1 { 
+    opacity: 0 
+}
+
+.class2 {
+    opacity: 0%;
+}
+
+.class3 {
+    opacity: 0.5;
+}
+
+.class4 {
+    opacity: 50%;
+}
+
+.class5 {
+    opacity: 1;
+}
+
+.class6 {
+    opacity: 100%;
+}
+
+.class7 {
+    shape-image-threshold: 70%;
+}
+
+.class8 {
+    fill-opacity: 50%;
+}
+
+.class9 {
+    stroke-opacity: 50%;
+}
+
+.class10 {
+    shape-image-threshold: 50%;
+}
+
+.class11 {
+    opacity: 53%;
+}
+
+.class12 {
+    OPACITY: 0
+}

crates/swc_css_minifier/tests/fixture/compress-alpha-value/output.min.css

@@ -0,0 +1 @@
+.class1{opacity:0}.class2{opacity:0}.class3{opacity:.5}.class4{opacity:.5}.class5{opacity:1}.class6{opacity:1}.class7{shape-image-threshold:.7}.class8{fill-opacity:.5}.class9{stroke-opacity:.5}.class10{shape-image-threshold:.5}.class11{opacity:53%}.class12{OPACITY:0}