feat(css/minifier): Compress more properties (#4155)

crates/swc_css_minifier/src/compress/declaration.rs

@@ -8,7 +8,7 @@ pub fn compress_declaration() -> impl VisitMut {
 struct CompressDeclaration {}
 
 impl CompressDeclaration {
-    fn is_same_dimension_length_nodes(
+    fn is_same_length_nodes(
         &self,
         node_1: Option<&ComponentValue>,
         node_2: Option<&ComponentValue>,
@@ -34,6 +34,60 @@ impl CompressDeclaration {
                 Some(ComponentValue::Integer(Integer { value: 0, .. })),
                 Some(ComponentValue::Integer(Integer { value: 0, .. })),
             ) => true,
+            (
+                Some(ComponentValue::Number(Number {
+                    value: first_number,
+                    ..
+                })),
+                Some(ComponentValue::Number(Number {
+                    value: second_number,
+                    ..
+                })),
+            ) if first_number == second_number => true,
+            _ => false,
+        }
+    }
+
+    fn is_same_length_percentage_nodes(
+        &self,
+        node_1: Option<&ComponentValue>,
+        node_2: Option<&ComponentValue>,
+    ) -> bool {
+        match (node_1, node_2) {
+            (
+                Some(ComponentValue::Dimension(Dimension::Length(Length {
+                    value: value_1,
+                    unit: unit_1,
+                    ..
+                }))),
+                Some(ComponentValue::Dimension(Dimension::Length(Length {
+                    value: value_2,
+                    unit: unit_2,
+                    ..
+                }))),
+            ) if value_1.value == value_2.value
+                && unit_1.value.to_lowercase() == unit_2.value.to_lowercase() =>
+            {
+                true
+            }
+            (
+                Some(ComponentValue::Percentage(Percentage { value: value_1, .. })),
+                Some(ComponentValue::Percentage(Percentage { value: value_2, .. })),
+            ) if value_1.value == value_2.value => true,
+            (
+                Some(ComponentValue::Integer(Integer { value: 0, .. })),
+                Some(ComponentValue::Integer(Integer { value: 0, .. })),
+            ) => true,
+            (
+                Some(ComponentValue::Number(Number {
+                    value: first_number,
+                    ..
+                })),
+                Some(ComponentValue::Number(Number {
+                    value: second_number,
+                    ..
+                })),
+            ) if first_number == second_number => true,
             _ => false,
         }
     }
@@ -247,8 +301,18 @@ impl VisitMut for CompressDeclaration {
                         _ => {}
                     }
                 }
-                "padding" | "margin" | "border-width" | "inset" | "scroll-margin"
+                // TODO handle `auto`
+                // TODO compress numbers too
+                "padding"
+                | "margin"
+                | "border-width"
+                | "inset"
+                | "scroll-margin"
                 | "scroll-padding"
+                | "mask-border-outset"
+                | "border-image-width"
+                | "border-image-outset"
+                | "border-image-slice"
                     if declaration.value.len() > 1 =>
                 {
                     let top = declaration.value.get(0);
@@ -266,9 +330,9 @@ impl VisitMut for CompressDeclaration {
                         .or_else(|| declaration.value.get(1))
                         .or_else(|| declaration.value.get(0));
 
-                    if self.is_same_dimension_length_nodes(left, right) {
+                    if self.is_same_length_percentage_nodes(left, right) {
-                        if self.is_same_dimension_length_nodes(bottom, top) {
+                        if self.is_same_length_percentage_nodes(bottom, top) {
-                            if self.is_same_dimension_length_nodes(right, top) {
+                            if self.is_same_length_percentage_nodes(right, top) {
                                 declaration.value = vec![top.unwrap().clone()];
                             } else {
                                 declaration.value =
@@ -296,17 +360,66 @@ impl VisitMut for CompressDeclaration {
                 | "scroll-padding-block"
                 | "scroll-margin-inline"
                 | "scroll-margin-block"
+                | "border-top-left-radius"
+                | "border-top-right-radius"
+                | "border-bottom-right-radius"
+                | "border-bottom-left-radius"
+                | "border-start-start-radius"
+                | "border-start-end-radius"
+                | "border-end-start-radius"
+                | "border-end-end-radius"
                     if declaration.value.len() == 2 =>
                 {
                     let first = declaration.value.get(0);
                     let second = declaration.value.get(1);
 
-                    if self.is_same_dimension_length_nodes(first, second)
+                    if self.is_same_length_percentage_nodes(first, second)
                         || self.is_same_ident(first, second)
                     {
                         declaration.value.remove(1);
                     }
                 }
+                "border-style" if declaration.value.len() > 1 => {
+                    let top = declaration.value.get(0);
+                    let right = declaration
+                        .value
+                        .get(1)
+                        .or_else(|| declaration.value.get(0));
+                    let bottom = declaration
+                        .value
+                        .get(2)
+                        .or_else(|| declaration.value.get(0));
+                    let left = declaration
+                        .value
+                        .get(3)
+                        .or_else(|| declaration.value.get(1))
+                        .or_else(|| declaration.value.get(0));
+
+                    if self.is_same_ident(left, right) {
+                        if self.is_same_ident(bottom, top) {
+                            if self.is_same_ident(right, top) {
+                                declaration.value = vec![top.unwrap().clone()];
+                            } else {
+                                declaration.value =
+                                    vec![top.unwrap().clone(), right.unwrap().clone()];
+                            }
+                        } else {
+                            declaration.value = vec![
+                                top.unwrap().clone(),
+                                right.unwrap().clone(),
+                                bottom.unwrap().clone(),
+                            ];
+                        }
+                    }
+                }
+                "border-spacing" | "border-image-repeat" if declaration.value.len() == 2 => {
+                    let first = declaration.value.get(0);
+                    let second = declaration.value.get(1);
+
+                    if self.is_same_length_nodes(first, second) {
+                        declaration.value.remove(1);
+                    }
+                }
                 "font-weight" => {
                     declaration.value = declaration
                         .value
@@ -384,6 +497,9 @@ impl VisitMut for CompressDeclaration {
                 | "overscroll-behavior"
                 | "scroll-snap-align"
                 | "overflow"
+                | "place-self"
+                | "place-items"
+                | "place-content"
                     if declaration.value.len() == 2 =>
                 {
                     let first = declaration.value.get(0);

crates/swc_css_minifier/tests/fixture/compress-declaration/border-bottom-left-radius/input.css

@@ -0,0 +1,11 @@
+.class-1 {
+    border-bottom-left-radius: 40px;
+}
+
+.class-2 {
+    border-bottom-left-radius: 40px 40px;
+}
+
+.class-3 {
+    border-bottom-left-radius: 50% 50%;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-bottom-left-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-bottom-left-radius:40px}.class-2{border-bottom-left-radius:40px}.class-3{border-bottom-left-radius:50%}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-bottom-right-radius/input.css

@@ -0,0 +1,11 @@
+.class-1 {
+    border-bottom-right-radius: 40px;
+}
+
+.class-2 {
+    border-bottom-right-radius: 40px 40px;
+}
+
+.class-3 {
+    border-bottom-right-radius: 50% 50%;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-bottom-right-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-bottom-right-radius:40px}.class-2{border-bottom-right-radius:40px}.class-3{border-bottom-right-radius:50%}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-end-end-radius/input.css

@@ -0,0 +1,3 @@
+.class-1 {
+    border-end-end-radius: 20px 20px;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-end-end-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-end-end-radius:20px}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-end-start-radius/input.css

@@ -0,0 +1,3 @@
+.class-1 {
+    border-end-start-radius: 20px 20px;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-end-start-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-end-start-radius:20px}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-repeat/output.min.css

@@ -1 +1 @@
-.class-1{border-image-repeat:round stretch}.class-2{border-image-repeat:round}.class-3{border-image-repeat:space}
+.class-1{border-image-repeat:round stretch}.class-2{border-image-repeat:round round}.class-3{border-image-repeat:space space}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-slice/input.css

@@ -0,0 +1,7 @@
+.class-1 {
+    border-image-slice: 30 30% 45;
+}
+
+.class-2 {
+    border-image-slice: 30% 30% 30% 30%;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-slice/output.min.css

@@ -0,0 +1 @@
+.class-1{border-image-slice:30 30%45}.class-2{border-image-slice:30%}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-width/input.css

@@ -0,0 +1,11 @@
+.class {
+    border-image-width: 5% 2em 10% auto;
+}
+
+.class-1 {
+    border-image-width: 5% 5%;
+}
+
+.class-2 {
+    border-image-width: 20px 20px 20px 20px;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-image-width/output.min.css

@@ -0,0 +1 @@
+.class{border-image-width:5%2em 10%auto}.class-1{border-image-width:5%}.class-2{border-image-width:20px}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-spacing/input.css

@@ -0,0 +1,27 @@
+.class-1 {
+    border-spacing: 2px;
+}
+
+.class-2 {
+    border-spacing: 1cm 2em;
+}
+
+.class-3 {
+    border-spacing: 1cm 1cm;
+}
+
+.class-4 {
+    border-spacing: 1cm 1cm;
+}
+
+.class-5 {
+    border-spacing: 0 1cm;
+}
+
+.class-6 {
+    border-spacing: 0 0;
+}
+
+.class-7 {
+    border-spacing: 0px 0px;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-spacing/output.min.css

@@ -0,0 +1 @@
+.class-1{border-spacing:2px}.class-2{border-spacing:1cm 2em}.class-3{border-spacing:1cm}.class-4{border-spacing:1cm}.class-5{border-spacing:0 1cm}.class-6{border-spacing:0}.class-7{border-spacing:0}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-start-end-radius/input.css

@@ -0,0 +1,3 @@
+.class-1 {
+    border-start-end-radius: 20px 20px;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-start-end-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-start-end-radius:20px}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-start-start-radius/input.css

@@ -0,0 +1,3 @@
+.class-1 {
+    border-start-start-radius: 20px 20px;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-start-start-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-start-start-radius:20px}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-style/input.css

@@ -0,0 +1,11 @@
+.class-1 {
+    border-style: none solid dotted dashed;
+}
+
+.class-2 {
+    border-style: solid solid solid solid;
+}
+
+.class-3 {
+    border-style: double solid solid solid;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-style/output.min.css

@@ -0,0 +1 @@
+.class-1{border-style:none solid dotted dashed}.class-2{border-style:solid}.class-3{border-style:double solid solid}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-top-left-radius/input.css

@@ -0,0 +1,11 @@
+.class-1 {
+    border-top-left-radius: 40px;
+}
+
+.class-2 {
+    border-top-left-radius: 40px 40px;
+}
+
+.class-3 {
+    border-top-left-radius: 50% 50%;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-top-left-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-top-left-radius:40px}.class-2{border-top-left-radius:40px}.class-3{border-top-left-radius:50%}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-top-right-radius/input.css

@@ -0,0 +1,11 @@
+.class-1 {
+    border-top-right-radius: 40px;
+}
+
+.class-2 {
+    border-top-right-radius: 40px 40px;
+}
+
+.class-3 {
+    border-top-right-radius: 50% 50%;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/border-top-right-radius/output.min.css

@@ -0,0 +1 @@
+.class-1{border-top-right-radius:40px}.class-2{border-top-right-radius:40px}.class-3{border-top-right-radius:50%}

crates/swc_css_minifier/tests/fixture/compress-declaration/inset/input.css

@@ -75,3 +75,7 @@
 .class20 {
     inset: 20px 3em 20px 3em;
 }
+
+.class-21 {
+    inset: 10% 5% 5% 5%;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/inset/output.min.css

@@ -1 +1 @@
-.class1{inset:20px}.class2{inset:20px 21px 22px 23px}.class4{inset:20px 21px 22px}.class5{inset:20px 21px}.class6{inset:20px}.class7{inset:20px 21px}.class8{inset:20px}.class10{inset:20px}.class11{inset:20px 20px 21px}.class12{inset:var(--inset)}.class13{inset:20px var(--inset)}.class14{inset:20px 20px var(--inset)}.class15{inset:20px 20px 20px var(--inset)}.class16{inset:var(--inset)}.class17{inset:var(--inset)var(--inset)}.class18{inset:var(--inset)var(--inset)var(--inset)var(--inset)}.class19{INSET:20PX}.class20{inset:20px 3em}
+.class1{inset:20px}.class2{inset:20px 21px 22px 23px}.class4{inset:20px 21px 22px}.class5{inset:20px 21px}.class6{inset:20px}.class7{inset:20px 21px}.class8{inset:20px}.class10{inset:20px}.class11{inset:20px 20px 21px}.class12{inset:var(--inset)}.class13{inset:20px var(--inset)}.class14{inset:20px 20px var(--inset)}.class15{inset:20px 20px 20px var(--inset)}.class16{inset:var(--inset)}.class17{inset:var(--inset)var(--inset)}.class18{inset:var(--inset)var(--inset)var(--inset)var(--inset)}.class19{INSET:20PX}.class20{inset:20px 3em}.class-21{inset:10%5%5%}

crates/swc_css_minifier/tests/fixture/compress-declaration/mask-border-outset/input.css

@@ -0,0 +1,11 @@
+.class-1 {
+    mask-border-outset: 7px 12px 14px 5px;
+}
+
+.class-2 {
+    mask-border-outset: 1.2 1.2;
+}
+
+.class-3 {
+    mask-border-outset: 45px 2 45px 2;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/mask-border-outset/output.min.css

@@ -0,0 +1 @@
+.class-1{mask-border-outset:7px 12px 14px 5px}.class-2{mask-border-outset:1.2}.class-3{mask-border-outset:45px 2 45px 2}

crates/swc_css_minifier/tests/fixture/compress-declaration/place-content/input.css

@@ -0,0 +1,11 @@
+.class-1 {
+    place-content: center center;
+}
+
+.class-2 {
+    place-content: first baseline space-evenly;
+}
+
+.class-3 {
+    place-content: flex-start;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/place-content/output.min.css

@@ -0,0 +1 @@
+.class-1{place-content:center}.class-2{place-content:first baseline space-evenly}.class-3{place-content:flex-start}

crates/swc_css_minifier/tests/fixture/compress-declaration/place-items/input.css

@@ -0,0 +1,4 @@
+.class-1 {
+    place-items: center center;
+}
+

crates/swc_css_minifier/tests/fixture/compress-declaration/place-items/output.min.css

@@ -0,0 +1 @@
+.class-1{place-items:center}

crates/swc_css_minifier/tests/fixture/compress-declaration/place-self/input.css

@@ -0,0 +1,15 @@
+.class-1 {
+    place-self: baseline normal;
+}
+
+.class-2 {
+    place-self: normal start;
+}
+
+.class-3 {
+    place-self: first baseline auto;
+}
+
+.class-4 {
+    place-self: self-start self-start;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/place-self/output.min.css

@@ -0,0 +1 @@
+.class-1{place-self:baseline normal}.class-2{place-self:normal start}.class-3{place-self:first baseline auto}.class-4{place-self:self-start}

crates/swc_css_minifier/tests/fixture/compress-declaration/scroll-padding/input.css

@@ -75,3 +75,15 @@
 .class20 {
     scroll-padding: 20px 3em 20px 3em;
 }
+
+.class21 {
+    scroll-padding: 10%;
+}
+
+.class22 {
+    scroll-padding: 10% 20% 10% 20%;
+}
+
+.class23 {
+    scroll-padding: 10% 10% 10% 10%;
+}

crates/swc_css_minifier/tests/fixture/compress-declaration/scroll-padding/output.min.css

@@ -1 +1 @@
-.class1{scroll-padding:20px}.class2{scroll-padding:20px 21px 22px 23px}.class4{scroll-padding:20px 21px 22px}.class5{scroll-padding:20px 21px}.class6{scroll-padding:20px}.class7{scroll-padding:20px 21px}.class8{scroll-padding:20px}.class10{scroll-padding:20px}.class11{scroll-padding:20px 20px 21px}.class12{scroll-padding:var(--scroll-padding)}.class13{scroll-padding:20px var(--scroll-padding)}.class14{scroll-padding:20px 20px var(--scroll-padding)}.class15{scroll-padding:20px 20px 20px var(--scroll-padding)}.class16{scroll-padding:var(--scroll-padding)}.class17{scroll-padding:var(--scroll-padding)var(--scroll-padding)}.class18{scroll-padding:var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)}.class19{scroll-padding:20PX}.class20{scroll-padding:20px 3em}
+.class1{scroll-padding:20px}.class2{scroll-padding:20px 21px 22px 23px}.class4{scroll-padding:20px 21px 22px}.class5{scroll-padding:20px 21px}.class6{scroll-padding:20px}.class7{scroll-padding:20px 21px}.class8{scroll-padding:20px}.class10{scroll-padding:20px}.class11{scroll-padding:20px 20px 21px}.class12{scroll-padding:var(--scroll-padding)}.class13{scroll-padding:20px var(--scroll-padding)}.class14{scroll-padding:20px 20px var(--scroll-padding)}.class15{scroll-padding:20px 20px 20px var(--scroll-padding)}.class16{scroll-padding:var(--scroll-padding)}.class17{scroll-padding:var(--scroll-padding)var(--scroll-padding)}.class18{scroll-padding:var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)var(--scroll-padding)}.class19{scroll-padding:20PX}.class20{scroll-padding:20px 3em}.class21{scroll-padding:10%}.class22{scroll-padding:10%20%}.class23{scroll-padding:10%}