feat(css/minifier): Remove adjacent identical declarations (#6619)

crates/swc_css_minifier/src/compressor/declaration.rs

@@ -343,18 +343,18 @@ impl Compressor {
                             ComponentValue::Ident(box Ident { value, span, .. })
                                 if value.eq_ignore_ascii_case(&js_word!("normal")) =>
                             {
-                                ComponentValue::Number(Box::new(Number {
+                                ComponentValue::Integer(Box::new(Integer {
                                     span,
-                                    value: 400.0,
+                                    value: 400,
                                     raw: None,
                                 }))
                             }
                             ComponentValue::Ident(box Ident { value, span, .. })
                                 if value.eq_ignore_ascii_case(&js_word!("bold")) =>
                             {
-                                ComponentValue::Number(Box::new(Number {
+                                ComponentValue::Integer(Box::new(Integer {
                                     span,
-                                    value: 700.0,
+                                    value: 700,
                                     raw: None,
                                 }))
                             }

crates/swc_css_minifier/src/compressor/rules.rs

@@ -58,6 +58,13 @@ impl Compressor {
         }
     }
 
+    fn get_declaration_name(&self, declaration: &Declaration) -> JsWord {
+        match &declaration.name {
+            DeclarationName::Ident(Ident { value, .. }) => value.to_ascii_lowercase(),
+            DeclarationName::DashedIdent(DashedIdent { value, .. }) => value.to_ascii_lowercase(),
+        }
+    }
+
     fn collect_names(&self, at_rule: &AtRule, names: &mut AHashMap<Name, isize>) {
         match &at_rule.prelude {
             Some(box AtRulePrelude::CounterStylePrelude(CustomIdent { value: name, .. })) => {
@@ -532,6 +539,18 @@ impl Compressor {
 
                     true
                 }
+                ComponentValue::Declaration(box declaration) if prev_rule.is_some() => {
+                    if let Some(ComponentValue::Declaration(box prev_rule)) = &mut prev_rule {
+                        if self.get_declaration_name(prev_rule)
+                            == self.get_declaration_name(declaration)
+                            && prev_rule.value.eq_ignore_span(&declaration.value)
+                        {
+                            remove_rules_list.push(prev_index);
+                        }
+                    }
+
+                    true
+                }
                 _ => {
                     if let ComponentValue::AtRule(rule) = rule {
                         self.collect_names(rule, &mut names);
@@ -547,11 +566,14 @@ impl Compressor {
                         prev_index = index;
                         prev_rule_idx = Some(index);
                     }
-
                     ComponentValue::QualifiedRule(_) => {
                         prev_index = index;
                         prev_rule_idx = Some(index);
                     }
+                    ComponentValue::Declaration(_) => {
+                        prev_index = index;
+                        prev_rule_idx = Some(index);
+                    }
                     _ => {
                         prev_rule_idx = None;
                     }

crates/swc_css_minifier/tests/fixture/compress-color/output.min.css

@@ -1 +1 @@
-.color{color:rgb(from rgba(0,0,0,0)255 255 255)}.color-1,.color-2{color:rgb(from red 255 255 255)}.color-3{color:rgb(from#f00 255 255 255)}.color-4{color:rgb(from#eee8aa 255 255 255)}.color-5{color:rgb(from#ff0 255 255 255)}.color-6{color:rgb(from snow 255 255 255)}.color-7{color:rgba(123,123,123,0)}.color-8,.color-9,.color-10,.color-11{color:#7b7b7b}.color-12{color:rgba(51,102,77,.23)}.color-13{color:#7b7b7b}.color-14{color:#6496c8}.class-15{color:#7b7b7b}.class-16{color:rgba(123,123,123,.99)}.class-17{color:#7b7b7b}.class-18{color:rgba(179,82,31,.13)}.class-19{color:rgba(180,82,31,.13)}.class-20{color:rgba(181,82,31,.13)}.class-21{color:rgba(182,82,31,.13)}.class-22{color:rgba(184,82,31,.13)}.class-23{color:rgba(181,181,181,.13)}.class-24{color:rgba(182,181,181,.13)}.class-25{color:rgba(181,181,181,.1%)}.class-26{color:rgba(181,181,181,.4%)}.color-27{color:rgb(from#eee8aa 255 255 255)}.color-28{color:rgb(from teal 255 255 255)}.color-29,.color-30{color:rgb(from red 255 255 255)}.class-31{color:#ff0800;color:gray;color:#000;color:#80ff00;color:#a6ff00;color:#f9ff00;color:#80ff00;color:red;color:red;color:red;color:#00ffae;color:red;color:#ff00bf;color:#8000ff;color:#0040ff;color:#0ff;color:#00ff40;color:#80ff00;color:#ffbf00;color:red;color:red;color:#ff00bf;color:rgba(128,0,255,.5);color:rgba(0,64,255,.5);color:rgba(0,255,255,.5);color:rgba(0,255,64,.5);color:rgba(128,255,0,.5);color:rgba(255,191,0,.5);color:rgba(255,0,0,.5);color:red;color:#ff00bf;color:#8000ff;color:#0040ff;color:#0ff;color:#00ff40;color:#80ff00;color:#ffbf00;color:red;color:red;color:#ff00bf;color:rgba(128,0,255,.5);color:rgba(0,64,255,.5);color:rgba(0,255,255,.5);color:rgba(0,255,64,.5);color:rgba(128,255,0,.5);color:rgba(255,191,0,.5);color:rgba(255,0,0,.5);color:#ff0400;color:#ff0800;color:#ff0d00}.class-32{color:gray;color:#4d7f4d;color:#fff;color:#fd3;color:#ccb333;color:green;color:#000;color:gray;color:#33b333;color:gray;color:gray;color:rgba(128,128,128,.2);color:gray;color:rgba(128,128,128,.2);color:#6b8056;color:#4d7f4d;color:rgba(77,127,77,.5);color:red;color:red;color:rgba(255,0,0,0);color:rgba(255,0,0,0);color:#0f0;color:#0f0;color:#cfc;color:#cfc;color:green;color:green;color:rgba(77,127,77,0);color:rgba(77,127,77,0);color:rgba(170,170,170,0);color:rgba(170,170,170,0);color:#4d7f4d}.class-33{color:red}.class-34,.class-35{color:rgba(2,3,4,.5)}.class-36{color:#0f0}.class-37{color:rgba(0,255,0,.25)}.class-38{color:#000304}.class-39{color:#64c8ff}.class-40{color:rgba(20,10,0,0)}.class-41{color:#fff;color:#000}.class-42{color:rgba(0,0,0,0)}.class-43{color:maroon}.class-44{color:rgba(128,0,0,0)}.class-45{color:rgba(0,0,0,.5)}.class-46{color:#300}.class-47{color:rgba(51,0,0,0)}.class-48{color:rgba(0,0,0,.5)}.class-49{color:#000}.class-50{color:rgba(0,0,0,0)}.class-51{color:maroon}.class-52{color:rgba(128,0,0,0)}.class-53{color:rgba(0,0,0,.5)}.class-54{color:#300}.class-55{color:rgba(51,0,0,0)}.class-56{color:rgba(0,0,0,.5)}.class-57{color:#59a659}.class-58{color:rgba(77,127,77,.5)}.class-59,.class-60{color:red}.class-61,.class-62{color:rgba(255,0,0,0)}.class-63,.class-64{color:#0f0}.class-65,.class-66{color:#cfc}.class-67,.class-68{color:green}.class-69,.class-70{color:rgba(77,127,77,0)}.class-71,.class-72{color:rgba(170,170,170,0)}.class-73{color:#fff}.class-74{color:#000}.class-75{color:#fff}.class-76,.class-77,.class-78{color:#000}.class-79{color:#fff}.class-80,.class-81{color:#646464}.class-82,.class-83{color:rgba(100,100,100,0)}
+.color{color:rgb(from rgba(0,0,0,0)255 255 255)}.color-1,.color-2{color:rgb(from red 255 255 255)}.color-3{color:rgb(from#f00 255 255 255)}.color-4{color:rgb(from#eee8aa 255 255 255)}.color-5{color:rgb(from#ff0 255 255 255)}.color-6{color:rgb(from snow 255 255 255)}.color-7{color:rgba(123,123,123,0)}.color-8,.color-9,.color-10,.color-11{color:#7b7b7b}.color-12{color:rgba(51,102,77,.23)}.color-13{color:#7b7b7b}.color-14{color:#6496c8}.class-15{color:#7b7b7b}.class-16{color:rgba(123,123,123,.99)}.class-17{color:#7b7b7b}.class-18{color:rgba(179,82,31,.13)}.class-19{color:rgba(180,82,31,.13)}.class-20{color:rgba(181,82,31,.13)}.class-21{color:rgba(182,82,31,.13)}.class-22{color:rgba(184,82,31,.13)}.class-23{color:rgba(181,181,181,.13)}.class-24{color:rgba(182,181,181,.13)}.class-25{color:rgba(181,181,181,.1%)}.class-26{color:rgba(181,181,181,.4%)}.color-27{color:rgb(from#eee8aa 255 255 255)}.color-28{color:rgb(from teal 255 255 255)}.color-29,.color-30{color:rgb(from red 255 255 255)}.class-31{color:#ff0800;color:gray;color:#000;color:#80ff00;color:#a6ff00;color:#f9ff00;color:#80ff00;color:red;color:#00ffae;color:red;color:#ff00bf;color:#8000ff;color:#0040ff;color:#0ff;color:#00ff40;color:#80ff00;color:#ffbf00;color:red;color:#ff00bf;color:rgba(128,0,255,.5);color:rgba(0,64,255,.5);color:rgba(0,255,255,.5);color:rgba(0,255,64,.5);color:rgba(128,255,0,.5);color:rgba(255,191,0,.5);color:rgba(255,0,0,.5);color:red;color:#ff00bf;color:#8000ff;color:#0040ff;color:#0ff;color:#00ff40;color:#80ff00;color:#ffbf00;color:red;color:#ff00bf;color:rgba(128,0,255,.5);color:rgba(0,64,255,.5);color:rgba(0,255,255,.5);color:rgba(0,255,64,.5);color:rgba(128,255,0,.5);color:rgba(255,191,0,.5);color:rgba(255,0,0,.5);color:#ff0400;color:#ff0800;color:#ff0d00}.class-32{color:gray;color:#4d7f4d;color:#fff;color:#fd3;color:#ccb333;color:green;color:#000;color:gray;color:#33b333;color:gray;color:rgba(128,128,128,.2);color:gray;color:rgba(128,128,128,.2);color:#6b8056;color:#4d7f4d;color:rgba(77,127,77,.5);color:red;color:rgba(255,0,0,0);color:#0f0;color:#cfc;color:green;color:rgba(77,127,77,0);color:rgba(170,170,170,0);color:#4d7f4d}.class-33{color:red}.class-34,.class-35{color:rgba(2,3,4,.5)}.class-36{color:#0f0}.class-37{color:rgba(0,255,0,.25)}.class-38{color:#000304}.class-39{color:#64c8ff}.class-40{color:rgba(20,10,0,0)}.class-41{color:#fff;color:#000}.class-42{color:rgba(0,0,0,0)}.class-43{color:maroon}.class-44{color:rgba(128,0,0,0)}.class-45{color:rgba(0,0,0,.5)}.class-46{color:#300}.class-47{color:rgba(51,0,0,0)}.class-48{color:rgba(0,0,0,.5)}.class-49{color:#000}.class-50{color:rgba(0,0,0,0)}.class-51{color:maroon}.class-52{color:rgba(128,0,0,0)}.class-53{color:rgba(0,0,0,.5)}.class-54{color:#300}.class-55{color:rgba(51,0,0,0)}.class-56{color:rgba(0,0,0,.5)}.class-57{color:#59a659}.class-58{color:rgba(77,127,77,.5)}.class-59,.class-60{color:red}.class-61,.class-62{color:rgba(255,0,0,0)}.class-63,.class-64{color:#0f0}.class-65,.class-66{color:#cfc}.class-67,.class-68{color:green}.class-69,.class-70{color:rgba(77,127,77,0)}.class-71,.class-72{color:rgba(170,170,170,0)}.class-73{color:#fff}.class-74{color:#000}.class-75{color:#fff}.class-76,.class-77,.class-78{color:#000}.class-79{color:#fff}.class-80,.class-81{color:#646464}.class-82,.class-83{color:rgba(100,100,100,0)}

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

@@ -0,0 +1,108 @@
+a {
+    color: red;
+    color: red;
+
+    .class {
+        color: red;
+        color: red;
+    }
+
+    @media screen and (min-width: 100px) {
+        color: red;
+        color: red;
+    }
+
+    @supports (display: flex) {
+        color: red;
+        color: red;
+
+        .other {
+            color: red;
+            color: red;
+        }
+    }
+
+    .case-insensitivity {
+        color: red;
+        COLOR: red;
+    }
+}
+
+.font {
+    > h1 { font-weight: bold }
+    > h1 { font-weight: 700 }
+}
+
+.class {
+    > h1 { font-weight: bold }
+    > h1 { font-weight: bold }
+}
+
+.other {
+    > h1 { font-weight: 700 }
+    > h1 { font-weight: 700 }
+}
+
+.base {
+    color: red;
+
+    .class {
+        color: red;
+    }
+
+    .class-other {
+        color: red;
+    }
+
+    @media screen {
+        .class {
+            color: red;
+        }
+
+        .class-other {
+            color: red;
+        }
+    }
+}
+
+h1{/*test*/font-weight:bold}
+h1{/*test*/font-weight:bold}
+
+.white {
+    _color:white;
+    color:white
+}
+
+h1,h2{font-weight:bold}
+h2,h1{font-weight:bold}
+
+.margin{margin:10px 0 10px 0;margin:10px 0}
+
+h1{font-weight:bold;font-weight:bold}
+h1{font-weight:bold}
+
+@media print{
+    h1 {
+        display:block
+    }
+}
+@media print{
+    h1 {
+        display:block
+    }
+}
+
+.other {
+    & h1 { font-weight: bold }
+    & h1 { font-weight: bold }
+}
+
+@media print{
+    h1, h2 {
+        font-weight:bold
+    }
+
+    h2, h1{
+        font-weight:bold
+    }
+}

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

@@ -0,0 +1 @@
+a{color:red;.class{color:red}@media screen and (min-width:100px){color:red}@supports(display:flex){color:red;.other{color:red}}.case-insensitivity{color:red}}.font,.class,.other{>h1{font-weight:700}}.base{color:red;.class,.class-other{color:red}@media screen{.class,.class-other{color:red}}}h1{font-weight:700}.white{_color:white;color:white}h1,h2{font-weight:700}.margin{margin:10px 0}h1{font-weight:700}@media print{h1{display:block}}.other{& h1{font-weight:700}}@media print{h1,h2{font-weight:700}}

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

@@ -1 +1 @@
-.class1{font-weight:1;font-weight:400;font-weight:1000}.class2{font-weight:400}.class3{font-weight:700;font-weight:700}.class4{font-weight:400 700}.class5{font-weight:600 700}
+.class1{font-weight:1;font-weight:400;font-weight:1000}.class2{font-weight:400}.class3{font-weight:700}.class4{font-weight:400 700}.class5{font-weight:600 700}

crates/swc_css_minifier/tests/fixture/compress-frequency/output.min.css

@@ -1 +1 @@
-div{prop:0hz;prop:0hz;prop:1hz;prop:10hz;prop:100hz;prop:101hz;prop:500hz;prop:500hz;prop:999hz;prop:1khz;prop:2khz;prop:5khz;prop:9999hz;prop:10khz;prop:50khz;prop:50005hz;prop:500005hz;prop:5000005hz;prop:0hz;prop:0hz;prop:1khz;prop:10khz;prop:100khz;prop:1e3khz;prop:1e4khz;prop:5e4khz;prop:50005khz;prop:1hz;prop:.1hz;prop:1hz;prop:5hz;prop:50hz;prop:50hz;prop:.5khz;prop:.1khz;prop:.543khz}
+div{prop:0hz;prop:1hz;prop:10hz;prop:100hz;prop:101hz;prop:500hz;prop:999hz;prop:1khz;prop:2khz;prop:5khz;prop:9999hz;prop:10khz;prop:50khz;prop:50005hz;prop:500005hz;prop:5000005hz;prop:0hz;prop:1khz;prop:10khz;prop:100khz;prop:1e3khz;prop:1e4khz;prop:5e4khz;prop:50005khz;prop:1hz;prop:.1hz;prop:1hz;prop:5hz;prop:50hz;prop:.5khz;prop:.1khz;prop:.543khz}

crates/swc_css_minifier/tests/fixture/compress_angle/output.min.css

@@ -1 +1 @@
-.deg{transform:rotate(0);transform:rotate(0);transform:rotate(9deg);transform:rotate(-9deg);transform:rotate(10deg);transform:rotate(180deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(0);transform:rotate(350deg);transform:rotate(-9deg);transform:rotate(0);transform:rotate(360.5deg);transform:rotate(-360.5deg);transform:rotate(1deg);transform:rotate(-1deg)}.grad{transform:rotate(0);transform:rotate(0);transform:rotate(9grad);transform:rotate(-9grad);transform:rotate(9deg);transform:rotate(180deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(0);transform:rotate(0);transform:rotate(0);transform:rotate(0);transform:rotate(800.5grad);transform:rotate(-800.5grad);transform:rotate(821grad);transform:rotate(-821grad)}.rad{transform:rotate(0);transform:rotate(0);transform:rotate(1rad);transform:rotate(1.5rad);transform:rotate(-1.5rad)}.turn{transform:rotate(0);transform:rotate(0);transform:rotate(180deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(0);transform:rotate(180deg);transform:rotate(0);transform:rotate(180deg);transform:rotate(0)}.cross{transform:rotate(90deg);transform:rotate(90deg);transform:rotate(90deg);transform:rotate(1.57rad);transform:rotate(3.1416rad)}.class1{transform:rotate(0)}.class2{transform:skew(0,0)}.class3{transform:skewx(0)}.class4{transform:skewy(0)}.class5{transform:rotate3d(10,10,10,0)}.class6{transform:rotatex(0)}.class7{transform:rotatey(0)}.class8{transform:rotate(0)}.class9,.class10{transform:rotate(0)}.class11{transform:rotate(0)}@keyframes spinner-border{to{transform:rotate(360deg)}}
+.deg{transform:rotate(0);transform:rotate(9deg);transform:rotate(-9deg);transform:rotate(10deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(350deg);transform:rotate(-9deg);transform:rotate(0);transform:rotate(360.5deg);transform:rotate(-360.5deg);transform:rotate(1deg);transform:rotate(-1deg)}.grad{transform:rotate(0);transform:rotate(9grad);transform:rotate(-9grad);transform:rotate(9deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(800.5grad);transform:rotate(-800.5grad);transform:rotate(821grad);transform:rotate(-821grad)}.rad{transform:rotate(0);transform:rotate(1rad);transform:rotate(1.5rad);transform:rotate(-1.5rad)}.turn{transform:rotate(0);transform:rotate(180deg);transform:rotate(0);transform:rotate(180deg);transform:rotate(0);transform:rotate(180deg);transform:rotate(0)}.cross{transform:rotate(90deg);transform:rotate(1.57rad);transform:rotate(3.1416rad)}.class1{transform:rotate(0)}.class2{transform:skew(0,0)}.class3{transform:skewx(0)}.class4{transform:skewy(0)}.class5{transform:rotate3d(10,10,10,0)}.class6{transform:rotatex(0)}.class7{transform:rotatey(0)}.class8{transform:rotate(0)}.class9,.class10{transform:rotate(0)}.class11{transform:rotate(0)}@keyframes spinner-border{to{transform:rotate(360deg)}}

crates/swc_css_minifier/tests/fixture/compress_time/output.min.css

@@ -1 +1 @@
-div{transition-duration:0s;transition-duration:0s;transition-duration:1ms;transition-duration:10ms;transition-duration:.1s;transition-duration:.101s;transition-duration:.5s;transition-duration:.5s;transition-duration:.999s;transition-duration:1s;transition-duration:9.999s;transition-duration:10s;transition-duration:50s;transition-duration:50.005s;transition-duration:0s;transition-duration:0s;transition-duration:1s;transition-duration:10s;transition-duration:100s;transition-duration:1e3s;transition-duration:1e4s;transition-duration:5e4s;transition-duration:50005s;transition-duration:1ms;transition-duration:1ms;transition-duration:5ms;transition-duration:50ms;transition-duration:50ms;transition-duration:.5s;transition-duration:.543s;transition-duration:.1s;transition-duration:10ms;transition-duration:.32s;transition-duration:75ms;transition-duration:.075ms}
+div{transition-duration:0s;transition-duration:1ms;transition-duration:10ms;transition-duration:.1s;transition-duration:.101s;transition-duration:.5s;transition-duration:.999s;transition-duration:1s;transition-duration:9.999s;transition-duration:10s;transition-duration:50s;transition-duration:50.005s;transition-duration:0s;transition-duration:1s;transition-duration:10s;transition-duration:100s;transition-duration:1e3s;transition-duration:1e4s;transition-duration:5e4s;transition-duration:50005s;transition-duration:1ms;transition-duration:5ms;transition-duration:50ms;transition-duration:.5s;transition-duration:.543s;transition-duration:.1s;transition-duration:10ms;transition-duration:.32s;transition-duration:75ms;transition-duration:.075ms}