feat(css/minifier): Compress contents of @keyframes at-rule (#3579)

crates/swc_css_minifier/src/compress/keyframes.rs

@@ -0,0 +1,56 @@
+use swc_common::DUMMY_SP;
+use swc_css_ast::*;
+use swc_css_visit::{VisitMut, VisitMutWith};
+
+pub fn compress_keyframes() -> impl VisitMut {
+    CompressKeyframes {}
+}
+
+struct CompressKeyframes {}
+
+impl VisitMut for CompressKeyframes {
+    fn visit_mut_keyframes_rule(&mut self, keyframes_rule: &mut KeyframesRule) {
+        keyframes_rule.visit_mut_children_with(self);
+
+        match &keyframes_rule.name {
+            KeyframesName::Str(i)
+                if !matches!(
+                    &*i.value.to_lowercase(),
+                    "initial" | "inherit" | "unset" | "revert" | "default"
+                ) =>
+            {
+                keyframes_rule.name = KeyframesName::CustomIdent(CustomIdent {
+                    span: i.span,
+                    value: i.value.to_string().into(),
+                    raw: i.raw[1..i.raw.len() - 1].to_string().into(),
+                })
+            }
+            _ => {}
+        }
+    }
+
+    fn visit_mut_keyframe_selector(&mut self, keyframe_selector: &mut KeyframeSelector) {
+        keyframe_selector.visit_mut_children_with(self);
+
+        match keyframe_selector {
+            KeyframeSelector::Ident(i) if &*i.value.to_lowercase() == "from" => {
+                *keyframe_selector = KeyframeSelector::Percentage(Percentage {
+                    span: i.span,
+                    value: Number {
+                        span: DUMMY_SP,
+                        value: 0.0,
+                        raw: "0%".into(),
+                    },
+                })
+            }
+            KeyframeSelector::Percentage(i) if i.value.value == 100.0 => {
+                *keyframe_selector = KeyframeSelector::Ident(Ident {
+                    span: i.span,
+                    value: "to".into(),
+                    raw: "to".into(),
+                })
+            }
+            _ => {}
+        }
+    }
+}

crates/swc_css_minifier/src/compress/mod.rs

@@ -1,3 +1,4 @@
 pub mod angle;
 pub mod empty_qualified_rule;
+pub mod keyframes;
 pub mod time;

crates/swc_css_minifier/src/lib.rs

@@ -2,12 +2,14 @@ use swc_css_ast::*;
 use swc_css_visit::VisitMutWith;
 
 use self::compress::{
-    angle::compress_angle, empty_qualified_rule::compress_empty_qualified_rule, time::compress_time,
+    angle::compress_angle, empty_qualified_rule::compress_empty_qualified_rule,
+    keyframes::compress_keyframes, time::compress_time,
 };
 
 mod compress;
 
 pub fn minify(stylesheet: &mut Stylesheet) {
+    stylesheet.visit_mut_with(&mut compress_keyframes());
     stylesheet.visit_mut_with(&mut compress_empty_qualified_rule());
     stylesheet.visit_mut_with(&mut compress_time());
     stylesheet.visit_mut_with(&mut compress_angle());

crates/swc_css_minifier/tests/fixture/compress-keyframe-selector/input.css

@@ -0,0 +1,90 @@
+@keyframes slide-right {
+    from {
+        margin-left: 0px;
+    }
+    50% {
+        margin-left: 110px;
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.9;
+    }
+    to {
+        margin-left: 200px;
+    }
+}
+
+@keyframes slide-right-upper-case {
+    FROM {
+        margin-left: 0px;
+    }
+    50% {
+        margin-left: 110px;
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.9;
+    }
+    TO {
+        margin-left: 200px;
+    }
+}
+
+@keyframes slide-right-one {
+    0% {
+        margin-left: 0px;
+    }
+    50% {
+        margin-left: 110px;
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.9;
+    }
+    100% {
+        margin-left: 200px;
+    }
+}
+
+@keyframes slide-right-two {
+    0% {
+        margin-left: 0px;
+    }
+    50% {
+        margin-left: 110px;
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.9;
+    }
+    100.0000% {
+        margin-left: 200px;
+    }
+}
+
+@keyframes slide-right-three {
+    0%, 50% {
+        margin-left: 0px;
+    }
+    60%, 100% {
+        margin-left: 200px;
+    }
+}
+
+@keyframes "foo" {
+    0% {
+        margin-left: 0px;
+    }
+    100% {
+        margin-left: 200px;
+    }
+}
+
+@keyframes "initial" {
+    0% {
+        margin-left: 0px;
+    }
+    100% {
+        margin-left: 200px;
+    }
+}

crates/swc_css_minifier/tests/fixture/compress-keyframe-selector/output.min.css

@@ -0,0 +1 @@
+@keyframes slide-right{0%{margin-left:0px}50%{margin-left:110px;opacity:1}50%{opacity:.9}to{margin-left:200px}}@keyframes slide-right-upper-case{0%{margin-left:0px}50%{margin-left:110px;opacity:1}50%{opacity:.9}TO{margin-left:200px}}@keyframes slide-right-one{0%{margin-left:0px}50%{margin-left:110px;opacity:1}50%{opacity:.9}to{margin-left:200px}}@keyframes slide-right-two{0%{margin-left:0px}50%{margin-left:110px;opacity:1}50%{opacity:.9}to{margin-left:200px}}@keyframes slide-right-three{0%,50%{margin-left:0px}60%,to{margin-left:200px}}@keyframes foo{0%{margin-left:0px}to{margin-left:200px}}@keyframes"initial"{0%{margin-left:0px}to{margin-left:200px}}