feat(css/codegen): Implement minification of hex colors (#3453)

crates/swc_css_codegen/src/lib.rs

@@ -1006,7 +1006,13 @@ where
     fn emit_hex_color(&mut self, n: &HexColor) -> Result {
         punct!(self, "#");
 
-        self.wr.write_raw(Some(n.span), &n.raw)?;
+        if self.config.minify {
+            let minified = minify_hex_color(&n.value);
+
+            self.wr.write_raw(Some(n.span), &minified)?;
+        } else {
+            self.wr.write_raw(Some(n.span), &n.raw)?;
+        }
     }
 
     #[emitter]
@@ -1446,3 +1452,37 @@ where
         Ok(())
     }
 }
+
+fn minify_hex_color(value: &str) -> String {
+    let length = value.len();
+
+    if length == 6 || length == 8 {
+        let chars = value.as_bytes();
+
+        if chars[0] == chars[1] && chars[2] == chars[3] && chars[4] == chars[5] {
+            // 6 -> 3 or 8 -> 3
+            if length == 6 || chars[6] == b'f' && chars[7] == b'f' {
+                let mut minified = String::new();
+
+                minified.push((chars[0] as char).to_ascii_lowercase());
+                minified.push((chars[2] as char).to_ascii_lowercase());
+                minified.push((chars[4] as char).to_ascii_lowercase());
+
+                return minified;
+            }
+            // 8 -> 4
+            else if length == 8 && chars[6] == chars[7] {
+                let mut minified = String::new();
+
+                minified.push((chars[0] as char).to_ascii_lowercase());
+                minified.push((chars[2] as char).to_ascii_lowercase());
+                minified.push((chars[4] as char).to_ascii_lowercase());
+                minified.push((chars[6] as char).to_ascii_lowercase());
+
+                return minified;
+            }
+        }
+    }
+
+    value.to_ascii_lowercase()
+}

crates/swc_css_codegen/tests/fixture.rs

@@ -3,7 +3,7 @@ use std::{
     path::{Path, PathBuf},
 };
 use swc_common::{FileName, Span};
-use swc_css_ast::{Number, Str, Stylesheet, UrlValueRaw};
+use swc_css_ast::{HexColor, Number, Str, Stylesheet, UrlValueRaw};
 use swc_css_codegen::{
     writer::basic::{BasicCssWriter, BasicCssWriterConfig},
     CodeGenerator, CodegenConfig, Emit,
@@ -120,6 +120,13 @@ impl VisitMut for NormalizeTest {
 
         n.raw = "".into();
     }
+
+    fn visit_mut_hex_color(&mut self, n: &mut HexColor) {
+        n.visit_mut_children_with(self);
+
+        n.value = "fff".into();
+        n.raw = "fff".into();
+    }
 }
 
 #[testing::fixture("tests/fixture/**/input.css")]

crates/swc_css_codegen/tests/fixture/values/color/hex-color/input.css

@@ -0,0 +1,21 @@
+div {
+    color: #fff;
+    color: #ffffff;
+    color: #FFF;
+    color: #FFFFFF;
+    color: #dc143c;
+    color: #ff0000;
+    color: #ff0000ff;
+    color: #f09;
+    color: #ff0099;
+    color: #0f38;
+    color: #00ff3388;
+    color: #0a0a0a;
+    color: #0a0a0afa;
+}
+
+div {
+    background: url("starsolid.gif") #99f repeat-y fixed;
+    background: url("starsolid.gif") repeat-y fixed #99f;
+    background: url("starsolid.gif") repeat-y 12 #99f;
+}

crates/swc_css_codegen/tests/fixture/values/color/hex-color/output.css

@@ -0,0 +1,16 @@
+div {color: #fff;
+color: #ffffff;
+color: #FFF;
+color: #FFFFFF;
+color: #dc143c;
+color: #ff0000;
+color: #ff0000ff;
+color: #f09;
+color: #ff0099;
+color: #0f38;
+color: #00ff3388;
+color: #0a0a0a;
+color: #0a0a0afa}
+div {background: url("starsolid.gif") #99f repeat-y fixed;
+background: url("starsolid.gif") repeat-y fixed #99f;
+background: url("starsolid.gif") repeat-y 12 #99f}

crates/swc_css_codegen/tests/fixture/values/color/hex-color/output.min.css

@@ -0,0 +1 @@
+div{color:#fff;color:#fff;color:#fff;color:#fff;color:#dc143c;color:#f00;color:#f00;color:#f09;color:#f09;color:#0f38;color:#0f38;color:#0a0a0a;color:#0a0a0afa}div{background:url("starsolid.gif")#99f repeat-y fixed;background:url("starsolid.gif")repeat-y fixed#99f;background:url("starsolid.gif")repeat-y 12#99f}

crates/swc_css_codegen/tests/fixture/values/color/input.css

@@ -1,3 +0,0 @@
-div {
-    background: url("starsolid.gif") #99f repeat-y fixed;
-}

crates/swc_css_codegen/tests/fixture/values/color/output.css

@@ -1 +0,0 @@
-div {background: url("starsolid.gif") #99f repeat-y fixed}

crates/swc_css_codegen/tests/fixture/values/color/output.min.css

@@ -1 +0,0 @@
-div{background:url("starsolid.gif")#99f repeat-y fixed}