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): fixes for smart mode and safe whitespaces #5058

Merged
merged 19 commits into from Jun 29, 2022
Merged

fix(html/minifier): fixes for smart mode and safe whitespaces #5058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
816a750
test(html/minifier): more
alexander-akait Jun 27, 2022
0845800
test(html/minifier): more
alexander-akait Jun 27, 2022
69c89e0
test: more
alexander-akait Jun 27, 2022
98d59a2
test: more
alexander-akait Jun 27, 2022
1026cd4
test: more
alexander-akait Jun 27, 2022
fd9fe64
test: more
alexander-akait Jun 27, 2022
3051d2b
fix: bug with collapsing between comments
alexander-akait Jun 27, 2022
9009888
refactor: code
alexander-akait Jun 27, 2022
e2ae6b9
refactor: code
alexander-akait Jun 27, 2022
97b2e3d
fix: leading and trailing whitespaces
alexander-akait Jun 28, 2022
2673ae1
refactor: code
alexander-akait Jun 28, 2022
7913b69
fix: bugs
alexander-akait Jun 28, 2022
a814cce
refactor: code
alexander-akait Jun 28, 2022
fd51129
refactor: code
alexander-akait Jun 28, 2022
48600b7
refactor: code
alexander-akait Jun 28, 2022
06135bd
refactor: code
alexander-akait Jun 29, 2022
1e3d2c8
test: more
alexander-akait Jun 29, 2022
1764ed8
Merge branch 'main' into test-more
swc-bot Jun 29, 2022
431bfbd
Merge branch 'main' into test-more
swc-bot Jun 29, 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
474 changes: 278 additions & 196 deletions crates/swc_html_minifier/src/lib.rs
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions crates/swc_html_minifier/tests/fixture/comment/basic/input.html
View file
Open in desktop
Expand Up @@ -79,5 +79,19 @@
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>

<div>a <!-- test --> b <!-- test --> c</div>
<div>

a

<!-- test -->

b

<!-- test -->

c
</div>
</body>
</html>
16 changes: 15 additions & 1 deletion crates/swc_html_minifier/tests/fixture/comment/basic/output.min.html
View file
Open in desktop
Expand Up @@ -52,4 +52,18 @@
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br>
<!-- <![endif]-->

</p>

<div>a b c</div>
<div>

a



b



c
</div>
5 changes: 1 addition & 4 deletions crates/swc_html_minifier/tests/fixture/comment/html/output.min.html
View file
Open in desktop
@@ -1,4 +1 @@
<!doctype html><html lang=en><title>Document</title><body>

<div>test</div>

<!doctype html><html lang=en><title>Document</title><div>test</div>
3 changes: 3 additions & 0 deletions crates/swc_html_minifier/tests/fixture/comment/spaces/config.json
View file
Open in desktop
@@ -0,0 +1,3 @@
{
"collapseWhitespaces": "smart"
}
8 changes: 8 additions & 0 deletions crates/swc_html_minifier/tests/fixture/comment/spaces/input.html
View file
Open in desktop
@@ -0,0 +1,8 @@
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<!-- a --> <!-- b --> <!-- c --><link>
</head>
<body><div>foo<div> baz </div> bar</div></body>
</html>
1 change: 1 addition & 0 deletions crates/swc_html_minifier/tests/fixture/comment/spaces/output.min.html
View file
Open in desktop
@@ -0,0 +1 @@
<!doctype html><html lang=en><title>Document</title><link><div>foo<div>baz</div>bar</div>
3 changes: 3 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/angular/config.json
View file
Open in desktop
@@ -0,0 +1,3 @@
{
"collapseWhitespaces": "smart"
}
22 changes: 22 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/angular/input.html
View file
Open in desktop
@@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template ngFor #hero [ngForOf]="heroes">
<hero-detail *ngIf="hero" [hero]="hero"></hero-detail>
</template>
<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control"
required
ngControl="firstName"
[(ngModel)]="currentHero.firstName">
</div>
<button type="submit" [disabled]="!theForm.form.valid">Submit</button>
</form>
</body>
</html>
1 change: 1 addition & 0 deletions crates/swc_html_minifier/tests/fixture/text/angular/output.min.html
View file
Open in desktop
@@ -0,0 +1 @@
<!doctype html><html lang=en><meta charset=UTF-8><title>Document</title><body><template ngfor #hero [ngforof]=heroes><hero-detail *ngif=hero [hero]=hero></hero-detail></template><form (ngsubmit)=onSubmit(theForm) #theform=ngForm><div class=form-group><label for=name>Name</label> <input class=form-control required ngcontrol=firstName [(ngmodel)]=currentHero.firstName></div><button [disabled]=!theForm.form.valid>Submit</button></form>
31 changes: 31 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-all/input.html
View file
Open in desktop
Expand Up @@ -255,5 +255,36 @@
<div>test </div><span><span><span><span>foo <span>baz</span></span></span></span></span>
<span><span><span><span>foo <span>baz</span></span></span></span></span><div>test </div>

<div><div>

<!--test-->

</div></div>

<pre>
foo
<!-- bar -->
baz
</pre>

<div> a <input> c </div>

<div>Empty <!-- NOT --> </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 <!-- text --><!-- text --> b</div>

<div>a <!-- text --> b <!-- text --> c <!-- text --> d</div>

<div> <!-- test --> text <!-- test --></div>

<span> <!-- test --> text </span>
<span> text <!-- test --> </span>

</body>
</html>
6 changes: 5 additions & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-all/output.min.html
View file
Open in desktop
Expand Up @@ -25,4 +25,8 @@

test

</xmp><div>foo<a>baz</a>bar foo<a>baz</a>bar foo<a>baz</a>bar</div><div>foo<a>baz</a>bar foo<a>baz</a>bar foo<a>baz</a>bar</div><div>foo<img src=https://prettier.io/icon.png></div><div>text<img src=https://colourlex.com/wp-content/uploads/2021/02/vine-black-painted-swatch.jpg alt=test>test</div><span>test<script>console.log("test")</script>test</span><span>test<script>console.log("test")</script>test</span><div><p>blah</div><div>test<br>test</div><div>test<wbr>test</div><div>a<input>c</div><div><div>a</div><div>b</div></div><div><span>a</span><span>b</span></div><div><div>test</div><span>test</span></div><div><div>test</div><span>test</span></div><div><span>test</span><div>test</div></div><div><span>test</span><span>test</span></div><div><div>test</div><div>test</div></div><div><span>test</span><p>test<p>test<p>test</div><div><p>test<p>test<p>test</p><span>test</span></div><div><a href=test>test</a><a href=test>test</a></div><div><a href=test>test</a><a href=test>test</a></div><div><p>blah</div><div>test<button>test</button></div><div><button>test</button><button>test</button></div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div><span>foo</span></div><p>foo<img>bar<p>foo<img>bar<p>foo<img>bar<p>foo<img>bar<p>foo<wbr>bar<p>foo<br>bar<p>foo<nobr>a</nobr>bar<div> fo o </div><div> fo o </div><p><p>ab<div class=leaveAlone></div><div>foo bar</div><div class=leaveAlone><div></div><span></span>foo bar</div><div class=leaveAlone><span></span>foo bar</div><p>foo<span></span><p>foo<span></span><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo<button>test</button>foo</div><div>foo<span>foo</span>foo</div><div>foo<span>foo</span>foo</div><div><span>a</span>b<span>c</span></div><div><span>a</span>b<span>c</span></div><div><span>a</span>b<span>c</span></div><div>foo<span>baz</span></div><div>foo<span>baz</span></div><div>foo<span>baz</span></div><div>foo<span>baz</span></div><span>test</span><span><span><span><span>foo<span>baz</span></span></span></span></span><span><span><span><span>foo<span>baz</span></span></span></span></span><span>test</span><div>test</div><span><span><span><span>foo<span>baz</span></span></span></span></span><span><span><span><span>foo<span>baz</span></span></span></span></span><div>test</div>
</xmp><div>foo<a>baz</a>bar foo<a>baz</a>bar foo<a>baz</a>bar</div><div>foo<a>baz</a>bar foo<a>baz</a>bar foo<a>baz</a>bar</div><div>foo<img src=https://prettier.io/icon.png></div><div>text<img src=https://colourlex.com/wp-content/uploads/2021/02/vine-black-painted-swatch.jpg alt=test>test</div><span>test<script>console.log("test")</script>test</span><span>test<script>console.log("test")</script>test</span><div><p>blah</div><div>test<br>test</div><div>test<wbr>test</div><div>a<input>c</div><div><div>a</div><div>b</div></div><div><span>a</span><span>b</span></div><div><div>test</div><span>test</span></div><div><div>test</div><span>test</span></div><div><span>test</span><div>test</div></div><div><span>test</span><span>test</span></div><div><div>test</div><div>test</div></div><div><span>test</span><p>test<p>test<p>test</div><div><p>test<p>test<p>test</p><span>test</span></div><div><a href=test>test</a><a href=test>test</a></div><div><a href=test>test</a><a href=test>test</a></div><div><p>blah</div><div>test<button>test</button></div><div><button>test</button><button>test</button></div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo</div><div><span>foo</span></div><p>foo<img>bar<p>foo<img>bar<p>foo<img>bar<p>foo<img>bar<p>foo<wbr>bar<p>foo<br>bar<p>foo<nobr>a</nobr>bar<div> fo o </div><div> fo o </div><p><p>a b<div class=leaveAlone></div><div>foo bar</div><div class=leaveAlone><div></div><span></span>foo bar</div><div class=leaveAlone><span></span>foo bar</div><p>foo<span></span><p>foo<span></span><div>foo<button>test</button>foo</div><div>foo<button>test</button>foo<button>test</button>foo</div><div>foo<span>foo</span>foo</div><div>foo<span>foo</span>foo</div><div><span>a</span>b<span>c</span></div><div><span>a</span>b<span>c</span></div><div><span>a</span>b<span>c</span></div><div>foo<span>baz</span></div><div>foo<span>baz</span></div><div>foo<span>baz</span></div><div>foo<span>baz</span></div><span>test</span><span><span><span><span>foo<span>baz</span></span></span></span></span><span><span><span><span>foo<span>baz</span></span></span></span></span><span>test</span><div>test</div><span><span><span><span>foo<span>baz</span></span></span></span></span><span><span><span><span>foo<span>baz</span></span></span></span></span><div>test</div><div><div></div></div><pre>
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>
35 changes: 35 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-conservative/input.html
View file
Open in desktop
Expand Up @@ -255,5 +255,40 @@
<div>test </div><span><span><span><span>foo <span>baz</span></span></span></span></span>
<span><span><span><span>foo <span>baz</span></span></span></span></span><div>test </div>

<div><b> foo

</b></div>

<div><div>

<!--test-->

</div></div>

<pre>
foo
<!-- bar -->
baz
</pre>

<div> a <input> c </div>

<div>Empty <!-- NOT --> </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 <!-- text --><!-- text --> b</div>

<div>a <!-- text --> b <!-- text --> c <!-- text --> d</div>

<div> <!-- test --> text <!-- test --></div>

<span> <!-- test --> text </span>
<span> text <!-- test --> </span>

</body>
</html>
6 changes: 5 additions & 1 deletion crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-conservative/output.min.html
View file
Open in desktop
Expand Up @@ -25,4 +25,8 @@

test

</xmp> <div> foo <a> baz </a> bar foo <a> baz </a> bar foo <a> baz </a> bar </div> <div> foo <a> baz </a> bar foo <a> baz </a> bar foo <a> baz </a> bar </div> <div> foo <img src=https://prettier.io/icon.png> </div> <div> text <img src=https://colourlex.com/wp-content/uploads/2021/02/vine-black-painted-swatch.jpg alt=test> test </div> <span>test<script>console.log("test")</script>test</span> <span>test <script>console.log("test")</script> test</span> <div> <p>blah</p> </div> <div>test <br> test</div> <div>test <wbr> test</div> <div> a <input> c </div> <div> <div>a</div> <div>b</div> </div> <div><span> a </span> <span>b</span></div> <div><div>test</div> <span>test</span></div> <div> <div>test</div> <span>test</span> </div> <div> <span>test</span> <div>test</div> </div> <div> <span>test</span> <span>test</span> </div> <div> <div>test</div> <div>test</div> </div> <div> <span>test</span> <p>test</p> <p>test</p> <p>test</p> </div> <div> <p>test</p> <p>test</p> <p>test</p> <span>test</span> </div> <div> <a href=test> test </a> <a href=test>test</a> </div> <div> <a href=test>test</a><a href=test>test</a> </div> <div> <p>blah</p> </div> <div>test <button>test</button></div> <div><button>test</button> <button>test</button></div> <div>foo <button>test</button> foo</div> <div>foo<button>test</button>foo</div> <div>foo <button>test</button>foo</div> <div>foo<button>test</button> foo</div> <div>foo<button> test </button>foo</div> <div>foo <button> test </button>foo</div> <div>foo<button> test </button> foo</div> <div><span> foo </span></div> <p>foo <img> bar</p> <p>foo<img>bar</p> <p>foo <img>bar</p> <p>foo<img> bar</p> <p>foo <wbr> bar</p> <p>foo <br> bar</p> <p>foo <nobr>a</nobr> bar</p> <div> fo o </div> <div> fo o </div> <p></p> <p>a b</p> <div class=leaveAlone></div><div> foo bar </div> <div class=leaveAlone><div></div><span> </span> foo bar</div> <div class=leaveAlone><span> </span> foo bar</div> <p>foo <span></span></p> <p>foo<span></span></p> <div>foo <button> test </button> foo</div> <div>foo <button> test </button> foo <button> test </button> foo</div> <div> foo <span>foo</span> foo</div> <div> foo<span> foo</span>foo </div> <div> <span>a </span> b<span> c</span> </div> <div> <span>a </span> b <span> c</span> </div> <div> <span>a </span> b <span>c</span> </div> <div>foo <span> baz</span></div> <div>foo <span>baz</span></div> <div>foo<span> baz</span></div> <div>foo<span>baz</span></div> <span>test </span><span><span><span><span>foo <span>baz</span></span></span></span></span> <span><span><span><span>foo <span>baz</span></span></span></span></span><span>test </span> <div>test </div><span><span><span><span>foo <span>baz</span></span></span></span></span> <span><span><span><span>foo <span>baz</span></span></span></span></span><div>test </div>
</xmp> <div> foo <a> baz </a> bar foo <a> baz </a> bar foo <a> baz </a> bar </div> <div> foo <a> baz </a> bar foo <a> baz </a> bar foo <a> baz </a> bar </div> <div> foo <img src=https://prettier.io/icon.png> </div> <div> text <img src=https://colourlex.com/wp-content/uploads/2021/02/vine-black-painted-swatch.jpg alt=test> test </div> <span>test<script>console.log("test")</script>test</span> <span>test <script>console.log("test")</script> test</span> <div> <p>blah</p> </div> <div>test <br> test</div> <div>test <wbr> test</div> <div> a <input> c </div> <div> <div>a</div> <div>b</div> </div> <div><span> a </span> <span>b</span></div> <div><div>test</div> <span>test</span></div> <div> <div>test</div> <span>test</span> </div> <div> <span>test</span> <div>test</div> </div> <div> <span>test</span> <span>test</span> </div> <div> <div>test</div> <div>test</div> </div> <div> <span>test</span> <p>test</p> <p>test</p> <p>test</p> </div> <div> <p>test</p> <p>test</p> <p>test</p> <span>test</span> </div> <div> <a href=test> test </a> <a href=test>test</a> </div> <div> <a href=test>test</a><a href=test>test</a> </div> <div> <p>blah</p> </div> <div>test <button>test</button></div> <div><button>test</button> <button>test</button></div> <div>foo <button>test</button> foo</div> <div>foo<button>test</button>foo</div> <div>foo <button>test</button>foo</div> <div>foo<button>test</button> foo</div> <div>foo<button> test </button>foo</div> <div>foo <button> test </button>foo</div> <div>foo<button> test </button> foo</div> <div><span> foo </span></div> <p>foo <img> bar</p> <p>foo<img>bar</p> <p>foo <img>bar</p> <p>foo<img> bar</p> <p>foo <wbr> bar</p> <p>foo <br> bar</p> <p>foo <nobr>a</nobr> bar</p> <div> fo o </div> <div> fo o </div> <p></p> <p>a b</p> <div class=leaveAlone></div><div> foo bar </div> <div class=leaveAlone><div></div><span> </span> foo bar</div> <div class=leaveAlone><span> </span> foo bar</div> <p>foo <span></span></p> <p>foo<span></span></p> <div>foo <button> test </button> foo</div> <div>foo <button> test </button> foo <button> test </button> foo</div> <div> foo <span>foo</span> foo</div> <div> foo<span> foo</span>foo </div> <div> <span>a </span> b<span> c</span> </div> <div> <span>a </span> b <span> c</span> </div> <div> <span>a </span> b <span>c</span> </div> <div>foo <span> baz</span></div> <div>foo <span>baz</span></div> <div>foo<span> baz</span></div> <div>foo<span>baz</span></div> <span>test </span><span><span><span><span>foo <span>baz</span></span></span></span></span> <span><span><span><span>foo <span>baz</span></span></span></span></span><span>test </span> <div>test </div><span><span><span><span>foo <span>baz</span></span></span></span></span> <span><span><span><span>foo <span>baz</span></span></span></span></span><div>test </div> <div><b> foo </b></div> <div><div> </div></div> <pre>
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>
31 changes: 31 additions & 0 deletions crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-smart/input.html
View file
Open in desktop
Expand Up @@ -255,5 +255,36 @@
<div>test </div><span><span><span><span>foo <span>baz</span></span></span></span></span>
<span><span><span><span>foo <span>baz</span></span></span></span></span><div>test </div>

<div><div>

<!--test-->

</div></div>

<pre>
foo
<!-- bar -->
baz
</pre>

<div> a <input> c </div>

<div>Empty <!-- NOT --> </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 <!-- text --><!-- text --> b</div>

<div>a <!-- text --> b <!-- text --> c <!-- text --> d</div>

<div> <!-- test --> text <!-- test --></div>

<span> <!-- test --> text </span>
<span> text <!-- test --> </span>

</body>
</html>