Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(html/minifier): remove empty script and style with attributes #6447

Merged
merged 6 commits into from Nov 17, 2022
Merged

fix(html/minifier): remove empty script and style with attributes #6447

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b6bf66a
fix(html/minifier): remove empty script and style with attributes
alexander-akait Nov 15, 2022
3997b20
fix: clippy
alexander-akait Nov 15, 2022
ecd0c58
test: more
alexander-akait Nov 16, 2022
26daa59
test: update
alexander-akait Nov 16, 2022
bd64862
test: update
alexander-akait Nov 16, 2022
83fed2d
Merge branch 'main' into fix-empty-elements-for-script-and-style
swc-bot Nov 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
58 changes: 43 additions & 15 deletions crates/swc_html_minifier/src/lib.rs
View file
Open in desktop
Expand Up @@ -608,6 +608,12 @@ impl Minifier<'_> {
}
}

fn is_type_text_css(&self, value: &JsWord) -> bool {
let value = value.trim().to_ascii_lowercase();

matches!(&*value, "text/css")
}

fn is_default_attribute_value(&self, element: &Element, attribute: &Attribute) -> bool {
let attribute_value = match &attribute.value {
Some(value) => value,
Expand Down Expand Up @@ -652,7 +658,7 @@ impl Minifier<'_> {
},
js_word!("link") => {
if attribute.name == js_word!("type")
&& &*attribute_value.trim().to_ascii_lowercase() == "text/css"
&& self.is_type_text_css(attribute_value)
{
return true;
}
Expand Down Expand Up @@ -1305,9 +1311,38 @@ impl Minifier<'_> {

fn is_empty_metadata_element(&self, child: &Child) -> bool {
if let Child::Element(element) = child {
if (!self.is_element_displayed(element)
|| (matches!(element.namespace, Namespace::HTML | Namespace::SVG)
&& element.tag_name == js_word!("script"))
if matches!(element.namespace, Namespace::HTML | Namespace::SVG)
&& element.tag_name == js_word!("style")
&& self.is_empty_children(&element.children)
{
if element.attributes.is_empty() {
return true;
}

if element.attributes.len() == 1 {
return element.attributes.iter().all(|attr| {
attr.name == js_word!("type")
&& attr.value.is_some()
&& self.is_type_text_css(attr.value.as_ref().unwrap())
});
}
} else if matches!(element.namespace, Namespace::HTML | Namespace::SVG)
&& element.tag_name == js_word!("script")
&& self.is_empty_children(&element.children)
{
if element.attributes.is_empty() {
return true;
}

if element.attributes.len() == 1 {
return element.attributes.iter().all(|attr| {
attr.name == js_word!("type")
&& attr.value.is_some()
&& (attr.value == Some(js_word!("module"))
|| self.is_type_text_javascript(attr.value.as_ref().unwrap()))
});
}
} else if (!self.is_element_displayed(element)
|| (element.namespace == Namespace::HTML
&& element.tag_name == js_word!("noscript")))
&& element.attributes.is_empty()
Expand Down Expand Up @@ -1360,7 +1395,7 @@ impl Minifier<'_> {
}
js_word!("type") => {
if let Some(value) = &attribute.value {
if (is_style_tag && value.trim().to_ascii_lowercase() == "text/css")
if (is_style_tag && self.is_type_text_css(value))
|| (is_script_tag && self.is_type_text_javascript(value))
{
false
Expand Down Expand Up @@ -1402,7 +1437,7 @@ impl Minifier<'_> {
}
js_word!("type") => {
if let Some(value) = &attribute.value {
if (is_style_tag && value.trim().to_ascii_lowercase() == "text/css")
if (is_style_tag && self.is_type_text_css(value))
|| (is_script_tag && self.is_type_text_javascript(value))
{
false
Expand Down Expand Up @@ -3005,21 +3040,14 @@ impl VisitMut for Minifier<'_> {

for attribute in &current_element.attributes {
if attribute.name == js_word!("type") && attribute.value.is_some() {
type_attribute_value = Some(
attribute
.value
.as_ref()
.unwrap()
.trim()
.to_ascii_lowercase(),
);
type_attribute_value = Some(attribute.value.as_ref().unwrap());

break;
}
}

if type_attribute_value.is_none()
|| type_attribute_value == Some("text/css".into())
|| self.is_type_text_css(type_attribute_value.as_ref().unwrap())
{
text_type = Some(MinifierType::Css)
}
Expand Down
16 changes: 16 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/empty-metadata-elements/input.html
View file
Open in desktop
Expand Up @@ -19,5 +19,21 @@


</script>
<script type="module"></script>
<span>Empty modules</span>
<script type="module">



</script>
<script type="text/javascript"></script>
<span>Empty scripts</span>
<script type="text/javascript">



</script>
<span>Empty styles</span>
<style type="text/css"></style>
</body>
</html>
6 changes: 5 additions & 1 deletion crates/swc_html_minifier/tests/fixture/element/empty-metadata-elements/output.min.html
View file
Open in desktop
@@ -1,4 +1,8 @@
<!doctype html><html lang=en><svg>


</svg>
</svg>
<span>Empty modules</span>
<span>Empty scripts</span>

<span>Empty styles</span>
24 changes: 24 additions & 0 deletions crates/swc_html_minifier/tests/fixture/element/script-group/input.html
View file
Open in desktop
Expand Up @@ -223,5 +223,29 @@
<script type="module"></script>
<script type="module"></script>

<script type="module"></script>
<script type="module"></script>

<div>breaker</div>
<script type="module">

</script>
<script type="module">

</script>

<div>breaker</div>
<script type="text/javascript"></script>
<script type="application/javascript"></script>

<div>breaker</div>
<script type="text/javascript">

</script>
<script type="application/javascript">

</script>


</body>
</html>
15 changes: 13 additions & 2 deletions crates/swc_html_minifier/tests/fixture/element/script-group/output.min.html
View file
Open in desktop
Expand Up @@ -97,5 +97,16 @@


<div>breaker</div>
<script type=module></script>
<script type=module></script>






<div>breaker</div>

<div>breaker</div>



<div>breaker</div>