feat(html/minifier): merge the same metadata elements

crates/swc_html_minifier/src/lib.rs

@@ -8,8 +8,8 @@ use serde_json::Value;
 use swc_atoms::{js_word, JsWord};
 use swc_cached::regex::CachedRegex;
 use swc_common::{
-    collections::AHashMap, comments::SingleThreadedComments, sync::Lrc, FileName, FilePathMapping,
-    Mark, SourceMap, DUMMY_SP,
+    collections::AHashMap, comments::SingleThreadedComments, sync::Lrc, EqIgnoreSpan, FileName,
+    FilePathMapping, Mark, SourceMap, DUMMY_SP,
 };
 use swc_html_ast::*;
 use swc_html_parser::parser::ParserConfig;
@@ -1201,6 +1201,39 @@ impl Minifier<'_> {
         true
     }
 
+    fn allow_elements_to_merge(&self, left: Option<&Child>, right: &Element) -> bool {
+        if let Some(left) = left {
+            return matches!((left, right), (Child::Element(left), right)
+                if matches!(left.namespace, Namespace::HTML | Namespace::SVG)
+                    && left.tag_name == js_word!("style")
+                    && matches!(right.namespace, Namespace::HTML | Namespace::SVG)
+                    && right.tag_name == js_word!("style")
+                    && left.attributes.eq_ignore_span(&right.attributes));
+        }
+
+        false
+    }
+
+    fn merge_text_children(&self, left: &Element, right: &Element) -> Vec<Child> {
+        let data = left.children.iter().chain(right.children.iter()).fold(
+            String::new(),
+            |mut acc, child| match child {
+                Child::Text(text) => {
+                    acc.push_str(&text.data);
+
+                    acc
+                }
+                _ => acc,
+            },
+        );
+
+        vec![Child::Text(Text {
+            span: DUMMY_SP,
+            data: data.into(),
+            raw: None,
+        })]
+    }
+
     fn minify_children(&mut self, children: &mut Vec<Child>) -> Vec<Child> {
         let (namespace, tag_name) = match &self.current_element {
             Some(element) => (element.namespace, &element.tag_name),
@@ -1212,7 +1245,7 @@ impl Minifier<'_> {
         let mode = self.get_whitespace_minification_for_tag(namespace, tag_name);
 
         let child_will_be_retained =
-            |child: &mut Child, prev_children: &Vec<Child>, next_children: &Vec<Child>| {
+            |child: &mut Child, prev_children: &mut Vec<Child>, next_children: &mut Vec<Child>| {
                 match child {
                     Child::Comment(comment) if self.options.remove_comments => {
                         self.is_preserved_comment(&comment.data)
@@ -1233,6 +1266,16 @@ impl Minifier<'_> {
                     {
                         false
                     }
+                    Child::Element(element)
+                        if self.options.merge_metadata_elements
+                            && self.allow_elements_to_merge(prev_children.last(), element) =>
+                    {
+                        if let Some(Child::Element(prev)) = prev_children.last_mut() {
+                            prev.children = self.merge_text_children(prev, element);
+                        }
+
+                        false
+                    }
                     Child::Text(text) if text.data.is_empty() => false,
                     Child::Text(text)
                         if self.need_collapse_whitespace()
@@ -1539,7 +1582,7 @@ impl Minifier<'_> {
                 }
             };
 
-            let result = child_will_be_retained(&mut child, &new_children, children);
+            let result = child_will_be_retained(&mut child, &mut new_children, children);
 
             if result {
                 new_children.push(child);

crates/swc_html_minifier/src/option.rs

@@ -140,6 +140,10 @@ pub struct MinifyOptions {
     pub remove_redundant_attributes: bool,
     #[serde(default = "true_by_default")]
     pub collapse_boolean_attributes: bool,
+    /// Merge the same metadata elements into one (for example, consecutive
+    /// `style` elements will be merged into one `style` element)
+    #[serde(default = "true_by_default")]
+    pub merge_metadata_elements: bool,
     /// Remove extra whitespace in space and comma separated attribute values
     /// (where it is safe) and remove `javascript:` prefix for event handler
     /// attributes

crates/swc_html_minifier/tests/fixture/attribute/custom-attribute/input.html

@@ -10,6 +10,8 @@
 <button type="button" onclick="a(1 + 2)" ng-click="a(1 + 2)" data-click="a(1 + 2)"></button>
 <button type="button" onclick="a(1 + 2)" ng-click="a(1 + 2)" data-click="a(1 + 2)"></button>
 <div data-json='{ "foo": "bar" }'></div>
+<div data-json="{ &quot;foo&quot;: &quot;bar&quot; }"></div>
+<div data-json='{ &quot;foo&quot;: &quot;bar&quot; }'></div>
 <div data-style="color: red; background-color: red"></div>
 <iframe srcdoc="<html> <body> <p>test.</p>" src="nosrcdoc.html"></iframe>
 <div data-html="<html> <body> <p>test.</p>" src="nosrcdoc.html"></div>

crates/swc_html_minifier/tests/fixture/attribute/custom-attribute/output.min.html

@@ -1,6 +1,8 @@
 <!doctype html><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><title>Document</title><button type=button onclick=a(3) ng-click=a(3) data-click=a(3)></button>
 <button type=button onclick=a(3) ng-click=a(3) data-click=a(3)></button>
 <div data-json='{"foo":"bar"}'></div>
+<div data-json='{"foo":"bar"}'></div>
+<div data-json='{"foo":"bar"}'></div>
 <div data-style=color:red;background-color:red></div>
 <iframe srcdoc="<p>test." src=nosrcdoc.html></iframe>
 <div data-html="<p>test." src=nosrcdoc.html></div>

crates/swc_html_minifier/tests/fixture/attribute/srcdoc/input.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Document</title>
+</head>
+<body>
+<iframe srcdoc="<p>hello<!-- comment -->         </p>"></iframe>
+</body>
+</html>

crates/swc_html_minifier/tests/fixture/attribute/srcdoc/output.min.html

@@ -0,0 +1 @@
+<!doctype html><html lang=en><title>Document</title><iframe srcdoc="<p>hello"></iframe>

crates/swc_html_minifier/tests/fixture/element/custom/input.html

@@ -10,5 +10,6 @@
 <CUSTOM-TAG></CUSTOM-TAG><div>Hello :)</div>
 <tag v-ref:vm_pv :imgs=" objpicsurl_ "></tag>
 <span><phrasing-element></phrasing-element></span>
+<p>Click <my-link>here</my-link> and <my-link>here</my-link></p>
 </body>
 </html>

crates/swc_html_minifier/tests/fixture/element/custom/output.min.html

@@ -3,4 +3,5 @@
 [\']["]
 <custom-tag></custom-tag><div>Hello :)</div>
 <tag v-ref:vm_pv :imgs=" objpicsurl_ "></tag>
-<span><phrasing-element></phrasing-element></span>
+<span><phrasing-element></phrasing-element></span>
+<p>Click <my-link>here</my-link> and <my-link>here</my-link>

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

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

crates/swc_html_minifier/tests/fixture/element/style-group-1/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-1/output.min.html

@@ -0,0 +1,4 @@
+<!doctype html><html lang=en><title>Document</title><style>a{color:red}b{color:blue}p{color:white;background-color:blue;padding:5px;border:1px solid black}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}.second{color:red}</style><style media=all>p{color:blue}p{color:red}</style><div>test</div>
+<style>a{color:red}</style>
+<div>test</div>
+<style>a{color:red}</style>

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

@@ -0,0 +1,76 @@
+<!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>
+<h1>Text</h1>
+<div>Text</div>
+<style>
+    a {
+        color:red
+    }
+</style>
+<style>
+    b {
+        color:blue
+    }
+</style>
+<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/output.min.html

@@ -0,0 +1,8 @@
+<!doctype html><html lang=en><title>Document</title><style>a{color:red}b{color:blue}p{color:white;background-color:blue;padding:5px;border:1px solid black}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}.second{color:red}</style><style media=all>p{color:blue}p{color:red}</style><h1>Text</h1>
+<div>Text</div>
+<style>a{color:red}b{color:blue}</style>
+<div>test</div>
+<style>a{color:red}</style>
+<div>test</div>
+
+<style>a{color:red}</style>

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

@@ -4,7 +4,7 @@
 <svg>
     <style>a{color:red}</style>
 </svg>
-<style>p{color:red}</style><style>a{color:red}@media all{p{color:red}}</style><style>.test{color:red}</style>
+<style>p{color:red}a{color:red}@media all{p{color:red}}.test{color:red}</style>
 <svg viewBox="0 0 10 10">
     <style>circle{fill:gold;stroke:maroon;stroke-width:2px}</style>
 

crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-advanced-conservative/output.min.html

@@ -29,4 +29,4 @@
     foo
 
     baz
-</pre> <div> a <input> c </div> <div>Empty </div> <!--[if lte IE 6]> <span>A</span> <span title=" sigificant     whitespace   ">blah blah</span> <![endif]--> <div> <a href=#> <span> <b> foo </b> <i> bar </i> </span> </a> </div> <div>a b</div> <div>a b c d</div> <div> text </div> <span> text </span> <span> text </span> <div> <style>a{color:red}</style> <span>test</span> <style>a{color:red}</style> </div> <div> <style>a{color:red}</style><style>a{color:red}</style> </div> <div> <style>a{color:red}</style> <span>test</span> <span>test</span> <style>a{color:red}</style> </div> <div> <script>console.log("test")</script><script>console.log("test")</script> </div>
+</pre> <div> a <input> c </div> <div>Empty </div> <!--[if lte IE 6]> <span>A</span> <span title=" sigificant     whitespace   ">blah blah</span> <![endif]--> <div> <a href=#> <span> <b> foo </b> <i> bar </i> </span> </a> </div> <div>a b</div> <div>a b c d</div> <div> text </div> <span> text </span> <span> text </span> <div> <style>a{color:red}</style> <span>test</span> <style>a{color:red}</style> </div> <div> <style>a{color:red}a{color:red}</style> </div> <div> <style>a{color:red}</style> <span>test</span> <span>test</span> <style>a{color:red}</style> </div> <div> <script>console.log("test")</script><script>console.log("test")</script> </div>

crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-only-metdata/output.min.html

@@ -275,7 +275,7 @@
 </div>
 
 <div>
-    <style>a{color:red}</style><style>a{color:red}</style>
+    <style>a{color:red}a{color:red}</style>
 </div>
 
 <div>

crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-smart/output.min.html

@@ -29,4 +29,4 @@
     foo
 
     baz
-</pre><div>a <input> c</div><div>Empty</div><!--[if lte IE 6]> <span>A</span> <span title=" sigificant     whitespace   ">blah blah</span> <![endif]--><div><a href=#> <span><b>foo </b><i> bar </i></span></a></div><div>a b</div><div>a b c d</div><div>text</div><span> text </span><span> text </span><div><span>test</span> <span>test</span></div><div><span>test</span> <command>test</command><span>test</span></div><div><span>test</span><link rel=stylesheet href=""> <span>test</span></div><div><span>test</span><meta name=content> <span>test</span></div><div><span>test</span><script>console.log("test")</script> <span>test</span></div><div><span>test</span><style>a{color:red}</style> <span>test</span></div><div><span>test</span><title>test</title> <span>test</span></div><div><meta name=test><meta name=test></div><div><link rel=stylesheet href=""><link rel=stylesheet href=""></div><div><script>console.log("test")</script><script>console.log("test")</script></div><div><script>console.log("test")</script> <span>test</span><script>console.log("test")</script></div><div><style>a{color:red}</style><style>a{color:red}</style></div><div><script>console.log("test")</script><style>a{color:red}</style></div><div><span itemscope><meta itemprop=name content="The Castle">test</span> <span>test</span></div><div><meta name=test></div><div><style>a{color:red}</style></div><div><meta name=test><div>test</div><meta name=test></div><div><meta name=test> <span>test</span><meta name=test></div><svg> <title>test</title> <metadata>test</metadata> <desc>test</desc> </svg><svg> <a>test</a> <a>test</a> </svg><svg><text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan></text></svg><svg> <tspan>test</tspan><foreignObject>test</foreignObject></svg><svg><text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan></text></svg><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg><svg> <script>console.log("test")</script></svg><svg> <style>a{color:red}</style></svg><div><span>test</span> a b <span>test</span> <span>test</span> a b <span>test</span> <span>test</span> a b <span>test</span></div><div><foo-bar> <span>test</span> </foo-bar> <foo-bar> <span>test</span> </foo-bar></div><div><svg> <linearGradient id=gradient /> </svg><span>a</span></div>
+</pre><div>a <input> c</div><div>Empty</div><!--[if lte IE 6]> <span>A</span> <span title=" sigificant     whitespace   ">blah blah</span> <![endif]--><div><a href=#> <span><b>foo </b><i> bar </i></span></a></div><div>a b</div><div>a b c d</div><div>text</div><span> text </span><span> text </span><div><span>test</span> <span>test</span></div><div><span>test</span> <command>test</command><span>test</span></div><div><span>test</span><link rel=stylesheet href=""> <span>test</span></div><div><span>test</span><meta name=content> <span>test</span></div><div><span>test</span><script>console.log("test")</script> <span>test</span></div><div><span>test</span><style>a{color:red}</style> <span>test</span></div><div><span>test</span><title>test</title> <span>test</span></div><div><meta name=test><meta name=test></div><div><link rel=stylesheet href=""><link rel=stylesheet href=""></div><div><script>console.log("test")</script><script>console.log("test")</script></div><div><script>console.log("test")</script> <span>test</span><script>console.log("test")</script></div><div><style>a{color:red}a{color:red}</style></div><div><script>console.log("test")</script><style>a{color:red}</style></div><div><span itemscope><meta itemprop=name content="The Castle">test</span> <span>test</span></div><div><meta name=test></div><div><style>a{color:red}</style></div><div><meta name=test><div>test</div><meta name=test></div><div><meta name=test> <span>test</span><meta name=test></div><svg> <title>test</title> <metadata>test</metadata> <desc>test</desc> </svg><svg> <a>test</a> <a>test</a> </svg><svg><text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan></text></svg><svg> <tspan>test</tspan><foreignObject>test</foreignObject></svg><svg><text x=20 y=35><tspan font-weight=bold fill=red>This is bold and red</tspan> <tspan font-weight=bold fill=red>This is bold and red</tspan></text></svg><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style=width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1> <linearGradient id=gradient><stop class=begin offset=0% /><stop class=end offset=100% /></linearGradient><rect width=100 height=100 style=fill:url(#gradient) /> <circle cx=50 cy=50 r=30 style=fill:url(#gradient) /> </svg><svg> <script>console.log("test")</script></svg><svg> <style>a{color:red}</style></svg><div><span>test</span> a b <span>test</span> <span>test</span> a b <span>test</span> <span>test</span> a b <span>test</span></div><div><foo-bar> <span>test</span> </foo-bar> <foo-bar> <span>test</span> </foo-bar></div><div><svg> <linearGradient id=gradient /> </svg><span>a</span></div>