Merge adjacent @media and @supports rules with identical queries

devongovett · devongovett · commit ae87b831412c · 2022-07-09T10:17:28.000-07:00
Closes parcel-bundler#104
diff --git a/src/lib.rs b/src/lib.rs
@@ -6504,6 +6504,7 @@ mod tests {
       },
     );
   }
+
   #[test]
   fn test_merge_layers() {
     test(
@@ -6537,6 +6538,7 @@ mod tests {
     "#},
     );
   }
+
   #[test]
   fn test_merge_rules() {
     test(
@@ -7063,6 +7065,146 @@ mod tests {
     );
   }
 
+  #[test]
+  fn test_merge_media_rules() {
+    test(
+      r#"
+      @media (hover) {
+        .foo {
+          color: red;
+        }
+      }
+      @media (hover) {
+        .foo {
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+      "#,
+      indoc! {r#"
+      @media (hover) {
+        .foo {
+          color: red;
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+    "#},
+    );
+
+    test(
+      r#"
+      @media (hover) {
+        .foo {
+          color: red;
+        }
+      }
+      @media (min-width: 250px) {
+        .foo {
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+      "#,
+      indoc! {r#"
+      @media (hover) {
+        .foo {
+          color: red;
+        }
+      }
+      
+      @media (min-width: 250px) {
+        .foo {
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+    "#},
+    );
+  }
+
+  #[test]
+  fn test_merge_supports() {
+    test(
+      r#"
+      @supports (flex: 1) {
+        .foo {
+          color: red;
+        }
+      }
+      @supports (flex: 1) {
+        .foo {
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+      "#,
+      indoc! {r#"
+      @supports (flex: 1) {
+        .foo {
+          color: red;
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+    "#},
+    );
+
+    test(
+      r#"
+      @supports (flex: 1) {
+        .foo {
+          color: red;
+        }
+      }
+      @supports (display: grid) {
+        .foo {
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+      "#,
+      indoc! {r#"
+      @supports (flex: 1) {
+        .foo {
+          color: red;
+        }
+      }
+      
+      @supports (display: grid) {
+        .foo {
+          background: #fff;
+        }
+
+        .baz {
+          color: #fff;
+        }
+      }
+    "#},
+    );
+  }
+
   #[test]
   fn test_opacity() {
     minify_test(".foo { opacity: 0 }", ".foo{opacity:0}");
diff --git a/src/rules/mod.rs b/src/rules/mod.rs
@@ -291,21 +291,37 @@ impl<'i> CssRuleList<'i> {
           }
         }
         CssRule::Media(media) => {
+          if let Some(CssRule::Media(last_rule)) = rules.last_mut() {
+            if last_rule.query == media.query {
+              last_rule.rules.0.extend(media.rules.0.drain(..));
+              last_rule.minify(context, parent_is_unused)?;
+              continue;
+            }
+          }
+
           if media.minify(context, parent_is_unused)? {
             continue;
           }
         }
         CssRule::Supports(supports) => {
+          if let Some(CssRule::Supports(last_rule)) = rules.last_mut() {
+            if last_rule.condition == supports.condition {
+              last_rule.rules.0.extend(supports.rules.0.drain(..));
+              last_rule.minify(context, parent_is_unused)?;
+              continue;
+            }
+          }
+
           supports.minify(context, parent_is_unused)?;
           if supports.rules.0.is_empty() {
             continue;
           }
         }
         CssRule::LayerBlock(layer) => {
-          if let Some(CssRule::LayerBlock(last_style_rule)) = rules.last_mut() {
-            if last_style_rule.name == layer.name {
-              last_style_rule.rules.0.extend(layer.rules.0.drain(..));
-              last_style_rule.minify(context, parent_is_unused)?;
+          if let Some(CssRule::LayerBlock(last_rule)) = rules.last_mut() {
+            if last_rule.name == layer.name {
+              last_rule.rules.0.extend(layer.rules.0.drain(..));
+              last_rule.minify(context, parent_is_unused)?;
               continue;
             }
           }

Original file line number	Diff line number	Diff line change
`@@ -291,21 +291,37 @@ impl<'i> CssRuleList<'i> {`
`291`	`291`	`}`
`292`	`292`	`}`
`293`	`293`	`CssRule::Media(media) => {`
	`294`	`+ if let Some(CssRule::Media(last_rule)) = rules.last_mut() {`
	`295`	`+ if last_rule.query == media.query {`
	`296`	`+ last_rule.rules.0.extend(media.rules.0.drain(..));`
	`297`	`+ last_rule.minify(context, parent_is_unused)?;`
	`298`	`+ continue;`
	`299`	`+ }`
	`300`	`+ }`
	`301`	`+`
`294`	`302`	`if media.minify(context, parent_is_unused)? {`
`295`	`303`	`continue;`
`296`	`304`	`}`
`297`	`305`	`}`
`298`	`306`	`CssRule::Supports(supports) => {`
	`307`	`+ if let Some(CssRule::Supports(last_rule)) = rules.last_mut() {`
	`308`	`+ if last_rule.condition == supports.condition {`
	`309`	`+ last_rule.rules.0.extend(supports.rules.0.drain(..));`
	`310`	`+ last_rule.minify(context, parent_is_unused)?;`
	`311`	`+ continue;`
	`312`	`+ }`
	`313`	`+ }`
	`314`	`+`
`299`	`315`	`supports.minify(context, parent_is_unused)?;`
`300`	`316`	`if supports.rules.0.is_empty() {`
`301`	`317`	`continue;`
`302`	`318`	`}`
`303`	`319`	`}`
`304`	`320`	`CssRule::LayerBlock(layer) => {`
`305`		`- if let Some(CssRule::LayerBlock(last_style_rule)) = rules.last_mut() {`
`306`		`- if last_style_rule.name == layer.name {`
`307`		`- last_style_rule.rules.0.extend(layer.rules.0.drain(..));`
`308`		`- last_style_rule.minify(context, parent_is_unused)?;`
	`321`	`+ if let Some(CssRule::LayerBlock(last_rule)) = rules.last_mut() {`
	`322`	`+ if last_rule.name == layer.name {`
	`323`	`+ last_rule.rules.0.extend(layer.rules.0.drain(..));`
	`324`	`+ last_rule.minify(context, parent_is_unused)?;`
`309`	`325`	`continue;`
`310`	`326`	`}`
`311`	`327`	`}`