Skip to content

Commit

Permalink
fix(html/minifier): Merge style blocks (#6264)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-akait
alexander-akait committed Oct 27, 2022
1 parent c41fe0d commit 028951c
Show file tree
Hide file tree
Showing 10 changed files with 102 additions and 12 deletions.
72 changes: 65 additions & 7 deletions crates/swc_html_minifier/src/lib.rs
View file
Expand Up @@ -1335,13 +1335,71 @@ impl Minifier<'_> {
}

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));
if let Some(Child::Element(left)) = left {
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")
{
let mut need_skip = false;

let mut left_attributes = left
.attributes
.clone()
.into_iter()
.filter(|attribute| match attribute.name {
js_word!("type") => {
if let Some(value) = &attribute.value {
if value.trim().to_ascii_lowercase() == "text/css" {
false
} else {
need_skip = true;

true
}
} else {
true
}
}
_ => true,
})
.collect::<Vec<Attribute>>();

if need_skip {
return false;
}

let mut right_attributes = right
.attributes
.clone()
.into_iter()
.filter(|attribute| match attribute.name {
js_word!("type") => {
if let Some(value) = &attribute.value {
if value.trim().to_ascii_lowercase() == "text/css" {
false
} else {
need_skip = true;

true
}
} else {
true
}
}
_ => true,
})
.collect::<Vec<Attribute>>();

if need_skip {
return false;
}

left_attributes.sort_by(|a, b| a.name.cmp(&b.name));
right_attributes.sort_by(|a, b| a.name.cmp(&b.name));

return left_attributes.eq_ignore_span(&right_attributes);
}
}

false
Expand Down
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/attribute/style/output.min.html
View file
@@ -1,4 +1,4 @@
<!doctype html><html lang=en><title>Document</title><style>h1{color:red}p{color:blue}</style><style>h1{color:red}p{color:blue}</style><style>h1{color:red}p{color:blue}</style><style type="">
<!doctype html><html lang=en><title>Document</title><style>h1{color:red}p{color:blue}h1{color:red}p{color:blue}h1{color:red}p{color:blue}</style><style type="">
h1 {color:red;}
p {color:blue;}
</style><style>h1{color:red}p{color:blue}</style><style type=unknown/unknown>
Expand Down
4 changes: 2 additions & 2 deletions crates/swc_html_minifier/tests/fixture/element/style-disable-compress-css/output.min.html
View file
Expand Up @@ -2,11 +2,11 @@
a {
color: red;
}
</style><style>

a {
color: red;
}
</style><style>

a {
color: red;
}
Expand Down
2 changes: 2 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/style-group-1/input.html
View file
Expand Up @@ -60,5 +60,7 @@
<div>test</div>
<style></style>
<style>a { color: red }</style>
<div>test</div>
<style type="text/css"></style><style>a { color: red }</style>
</body>
</html>
2 changes: 2 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/style-group-1/output.min.html
View file
@@ -1,4 +1,6 @@
<!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;color:blue;background-color:yellow}</style><style media="all and (max-width:500px)">p{color:blue;background-color:yellow}</style><style>.first,.second{color:red}</style><style media=all>p{color:blue;color:red}</style><div>test</div>
<style>a{color:red}</style>
<div>test</div>
<style>a{color:red}</style>
<div>test</div>
<style>a{color:red}</style>
2 changes: 2 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/style-group-2/input.html
View file
Expand Up @@ -60,5 +60,7 @@
<div>test</div>
<style></style>
<style>a { color: red }</style>
<div>test</div>
<style type="text/css"></style><style>a { color: red }</style>
</body>
</html>
2 changes: 2 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/style-group-2/output.min.html
View file
@@ -1,4 +1,6 @@
<!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>
<div>test</div>
<style></style><style>a{color:red}</style>
12 changes: 12 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/style-group/input.html
View file
Expand Up @@ -76,5 +76,17 @@ <h1>Text</h1>
<style>a { color: red }</style>
<style>html { color: red }</style>
<style>body { color: red }</style>
<div>test</div>
<style type="text/css"></style><style>a { color: red }</style>
<div>test</div>
<style type="text/css"></style><style type=" text/css ">a { color: red }</style>
<div>test</div>
<style media="screen" title="test">a { display: block }</style><style title="test" media="screen">a { color: red }</style>
<div>test</div>
<style type="text/css" media="screen"></style><style media="screen">a { color: red }</style>
<div>test</div>
<style title="test" media="screen"></style><style media="screen">a { color: red }</style>
<div>test</div>
<style type="unknown">a { color: red }</style><style type="unknown"></style>
</body>
</html>
14 changes: 13 additions & 1 deletion crates/swc_html_minifier/tests/fixture/element/style-group/output.min.html
View file
Expand Up @@ -6,4 +6,16 @@
<div>test</div>
<style>a{color:red}</style>
<div>test</div>
<style>a,html,body{color:red}</style>
<style>a,html,body{color:red}</style>
<div>test</div>
<style>a{color:red}</style>
<div>test</div>
<style>a{color:red}</style>
<div>test</div>
<style media=screen title=test>a{display:block;color:red}</style>
<div>test</div>
<style media=screen>a{color:red}</style>
<div>test</div>
<style title=test media=screen></style><style media=screen>a{color:red}</style>
<div>test</div>
<style type=unknown>a { color: red }</style><style type=unknown></style>
2 changes: 1 addition & 1 deletion crates/swc_html_minifier/tests/fixture/element/style/output.min.html
View file
@@ -1,4 +1,4 @@
<!doctype html><html lang=en><title>Document</title><body><style>a{color:red}</style><style>a{color:red}</style><style>a{color:red}</style><style type=not/css>
<!doctype html><html lang=en><title>Document</title><body><style>a{color:red}</style><style type=not/css>
K e E p
</style>
<svg>
Expand Down

1 comment on commit 028951c

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Benchmark

Benchmark suite Current: 028951c Previous: c3944ba Ratio
es/full/bugs-1 523139 ns/iter (± 104290) 397452 ns/iter (± 71644) 1.32
es/full/minify/libraries/antd 2476604712 ns/iter (± 358167713) 2001768198 ns/iter (± 168091298) 1.24
es/full/minify/libraries/d3 693448600 ns/iter (± 500555756) 468727830 ns/iter (± 28251545) 1.48
es/full/minify/libraries/echarts 2018928603 ns/iter (± 362065574) 1730299978 ns/iter (± 89972308) 1.17
es/full/minify/libraries/jquery 187114269 ns/iter (± 71476763) 119528740 ns/iter (± 2577573) 1.57
es/full/minify/libraries/lodash 178539062 ns/iter (± 16352359) 134261476 ns/iter (± 9171074) 1.33
es/full/minify/libraries/moment 83190097 ns/iter (± 2325405) 67268639 ns/iter (± 3472432) 1.24
es/full/minify/libraries/react 35734108 ns/iter (± 5646426) 21163625 ns/iter (± 1403202) 1.69
es/full/minify/libraries/terser 454024071 ns/iter (± 36248729) 354027460 ns/iter (± 20789272) 1.28
es/full/minify/libraries/three 734013077 ns/iter (± 35275805) 615801677 ns/iter (± 29349556) 1.19
es/full/minify/libraries/typescript 4822398544 ns/iter (± 195210026) 3747255820 ns/iter (± 118824858) 1.29
es/full/minify/libraries/victory 1136864874 ns/iter (± 162350080) 905913650 ns/iter (± 29641733) 1.25
es/full/minify/libraries/vue 239013924 ns/iter (± 12858980) 179824665 ns/iter (± 6197929) 1.33
es/full/codegen/es3 37789 ns/iter (± 5884) 34071 ns/iter (± 1527) 1.11
es/full/codegen/es5 40089 ns/iter (± 7303) 34071 ns/iter (± 654) 1.18
es/full/codegen/es2015 44010 ns/iter (± 9115) 34040 ns/iter (± 447) 1.29
es/full/codegen/es2016 39110 ns/iter (± 5943) 33852 ns/iter (± 426) 1.16
es/full/codegen/es2017 39676 ns/iter (± 8532) 34113 ns/iter (± 1360) 1.16
es/full/codegen/es2018 43822 ns/iter (± 12339) 34223 ns/iter (± 1616) 1.28
es/full/codegen/es2019 41865 ns/iter (± 10318) 34116 ns/iter (± 1816) 1.23
es/full/codegen/es2020 39435 ns/iter (± 7945) 34138 ns/iter (± 5259) 1.16
es/full/all/es3 294289350 ns/iter (± 28921183) 220113760 ns/iter (± 16060622) 1.34
es/full/all/es5 269296059 ns/iter (± 25232592) 205841879 ns/iter (± 27416810) 1.31
es/full/all/es2015 226053314 ns/iter (± 22289084) 163016206 ns/iter (± 21054029) 1.39
es/full/all/es2016 217398595 ns/iter (± 33067393) 163261290 ns/iter (± 17514109) 1.33
es/full/all/es2017 220018052 ns/iter (± 44207878) 158447748 ns/iter (± 17194754) 1.39
es/full/all/es2018 200216752 ns/iter (± 34090109) 149574306 ns/iter (± 17994375) 1.34
es/full/all/es2019 210586891 ns/iter (± 25716428) 155766738 ns/iter (± 18556498) 1.35
es/full/all/es2020 207610928 ns/iter (± 31465004) 154508749 ns/iter (± 16893130) 1.34
es/full/parser 904535 ns/iter (± 236845) 741215 ns/iter (± 59805) 1.22
es/full/base/fixer 30116 ns/iter (± 5264) 26525 ns/iter (± 1146) 1.14
es/full/base/resolver_and_hygiene 101470 ns/iter (± 16785) 92139 ns/iter (± 5587) 1.10
serialization of ast node 277 ns/iter (± 51) 227 ns/iter (± 3) 1.22
serialization of serde 268 ns/iter (± 55) 228 ns/iter (± 6) 1.18

This comment was automatically generated by workflow using github-action-benchmark.

Please sign in to comment.