feat(css/minifier): Improve compression of media at-rules (#6665)

Author: alexander-akait

crates/swc_css_minifier/src/compressor/media.rs

@@ -175,6 +175,12 @@ impl VisitMut for Compressor {
         self.compress_media_in_parens(n);
     }
 
+    fn visit_mut_media_feature(&mut self, n: &mut MediaFeature) {
+        n.visit_mut_children_with(self);
+
+        self.compress_media_feature(n);
+    }
+
     fn visit_mut_media_feature_value(&mut self, n: &mut MediaFeatureValue) {
         n.visit_mut_children_with(self);
 

crates/swc_css_minifier/src/compressor/mod.rs

@@ -73,3 +73,38 @@
 @media (max-width: calc(5px + 1rem)) { body { color: red; } }
 
 @media (-webkit-calc(10px + 100px) < width <= calc(1000px + 10px)) { body { color: red; } }
+
+@media (color) { body { color: red; } }
+@media (min-color: 1) { body { color: red; } }
+@media (color >= 1) { body { color: red; } }
+@media (1 <= color) { body { color: red; } }
+
+@media (color-index) { body { color: red; } }
+@media (min-color-index: 1) { body { color: red; } }
+@media (color-index >= 1) { body { color: red; } }
+@media (1 <= color-index) { body { color: red; } }
+
+@media (monochrome) { body { color: red; } }
+@media (min-monochrome: 1) { body { color: red; } }
+@media (monochrome >= 1) { body { color: red; } }
+@media (1 <= monochrome) { body { color: red; } }
+
+@media (width = 1024px) { body {background: green;} }
+@media (1024px = width) { body {background: green;} }
+@media (width: 1024px) { body {background: green;} }
+
+@media (min-width: 900px) and (min-width: 900px) and (min-width: 900px),
+    (min-width: 900px) or (min-width: 900px) or (min-width: 900px) or (min-width: 900px)
+{
+    a {
+        color: red;
+    }
+}
+
+@media screen and (min-width: 900px) and (min-width: 900px) and (min-width: 900px),
+    (min-width: 900px) or (min-width: 900px) or (min-width: 900px) or (min-width: 900px)
+{
+    a {
+        color: red;
+    }
+}

crates/swc_css_minifier/tests/fixture/compress-at-rule/media/input.css

@@ -215,3 +215,15 @@
         animation: fade 3s cubic-bezier(0.25, 0.1, 0.25, 1)
     }
 }
+
+@supports (display: table-cell) and (display: list-item) and (display: list-item) and (display: contents) and (display: contents) {
+    .color {
+        color: red;
+    }
+}
+
+@supports (display: table-cell) and ((display: list-item) and (display: contents)) and ((display: list-item) and (display: contents)) {
+    .color {
+        color: blue;
+    }
+}