fix(html/minifier): Fix bugs of merging and removing metadata elements (

#6200)

crates/swc_html_minifier/src/lib.rs

@@ -1204,7 +1204,25 @@ impl Minifier<'_> {
         None
     }
 
-    fn empty_children(&self, children: &Vec<Child>) -> bool {
+    fn is_empty_metadata_element(&self, child: &Child) -> bool {
+        if let Child::Element(element) = child {
+            if (!self.is_element_displayed(element.namespace, &element.tag_name)
+                || (matches!(element.namespace, Namespace::HTML | Namespace::SVG)
+                    && element.tag_name == js_word!("script"))
+                || (element.namespace == Namespace::HTML
+                    && element.tag_name == js_word!("noscript")))
+                && element.attributes.is_empty()
+                && self.is_empty_children(&element.children)
+                && element.content.is_none()
+            {
+                return true;
+            }
+        }
+
+        false
+    }
+
+    fn is_empty_children(&self, children: &Vec<Child>) -> bool {
         for child in children {
             match child {
                 Child::Text(text) if text.data.chars().all(is_whitespace) => {
@@ -1251,6 +1269,10 @@ impl Minifier<'_> {
     }
 
     fn minify_children(&mut self, children: &mut Vec<Child>) -> Vec<Child> {
+        if children.is_empty() {
+            return vec![];
+        }
+
         let (namespace, tag_name) = match &self.current_element {
             Some(element) => (element.namespace, &element.tag_name),
             _ => {
@@ -1266,22 +1288,6 @@ impl Minifier<'_> {
                     Child::Comment(comment) if self.options.remove_comments => {
                         self.is_preserved_comment(&comment.data)
                     }
-                    Child::Element(element)
-                        if self.options.remove_empty_metadata_elements
-                            && (!self
-                                .is_element_displayed(element.namespace, &element.tag_name)
-                                || (matches!(
-                                    element.namespace,
-                                    Namespace::HTML | Namespace::SVG
-                                ) && element.tag_name == js_word!("script"))
-                                || (element.namespace == Namespace::HTML
-                                    && element.tag_name == js_word!("noscript")))
-                            && element.attributes.is_empty()
-                            && self.empty_children(&element.children)
-                            && element.content.is_none() =>
-                    {
-                        false
-                    }
                     Child::Element(element)
                         if self.options.merge_metadata_elements
                             && self.allow_elements_to_merge(prev_children.last(), element) =>
@@ -1601,6 +1607,31 @@ impl Minifier<'_> {
             let result = child_will_be_retained(&mut child, &mut new_children, children);
 
             if result {
+                if self.options.remove_redundant_attributes
+                    && self.is_empty_metadata_element(&child)
+                {
+                    let need_continue = {
+                        let next_element = if let Some(Child::Element(element)) = children.get(0) {
+                            Some(element)
+                        } else if let Some(Child::Element(element)) = children.get(1) {
+                            Some(element)
+                        } else {
+                            None
+                        };
+
+                        if let Some(element) = next_element {
+                            self.options.merge_metadata_elements
+                                && !self.allow_elements_to_merge(Some(&child), element)
+                        } else {
+                            true
+                        }
+                    };
+
+                    if need_continue {
+                        continue;
+                    }
+                }
+
                 new_children.push(child);
             }
         }

crates/swc_html_minifier/tests/fixture/element/style-group-2/config.json

@@ -0,0 +1,4 @@
+{
+  "mergeMetadataElements": false,
+  "removeEmptyMetadataElements": false
+}

crates/swc_html_minifier/tests/fixture/element/style-group-2/input.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Document</title>
+    <style>
+        a {
+            color:red
+        }
+    </style><style>
+        b {
+            color:blue
+        }
+    </style>
+    <!-- test -->
+    <style>
+        p {
+            color: white;
+            background-color: blue;
+            padding: 5px;
+            border: 1px solid black;
+        }
+    </style>
+    <style>
+        p {
+            color: blue;
+            background-color: yellow;
+        }
+    </style>
+    <style media="all and (max-width: 500px)">
+        p {
+            color: blue;
+            background-color: yellow;
+        }
+    </style>
+    <style type="text/css">
+        .first {
+            color: red;
+        }
+    </style>
+    <style type="text/css">
+        .second {
+            color: red;
+        }
+    </style>
+    <style media="all">
+        p {
+            color: blue;
+        }
+    </style>
+    <style media="all">
+        p {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+<div>test</div>
+<style>a { color: red }</style>
+<style></style>
+<div>test</div>
+<style></style>
+<style>a { color: red }</style>
+</body>
+</html>

crates/swc_html_minifier/tests/fixture/element/style-group-2/output.min.html

@@ -0,0 +1,4 @@
+<!doctype html><html lang=en><title>Document</title><style>a{color:red}</style><style>b{color:blue}</style><style>p{color:white;background-color:blue;padding:5px;border:1px solid black}</style><style>p{color:blue;background-color:yellow}</style><style media="all and (max-width:500px)">p{color:blue;background-color:yellow}</style><style>.first{color:red}</style><style>.second{color:red}</style><style media=all>p{color:blue}</style><style media=all>p{color:red}</style><div>test</div>
+<style>a{color:red}</style><style></style>
+<div>test</div>
+<style></style><style>a{color:red}</style>

crates/swc_html_minifier/tests/fixture/element/style-group/output.min.html

@@ -4,5 +4,4 @@
 <div>test</div>
 <style>a{color:red}</style>
 <div>test</div>
-
 <style>a{color:red}</style>