html-minifier
html-minifier copied to clipboard
kangax
A tags and figures are not handled correctly
I am trying to minify an HTML fragment with HTML inside an anchor tag. The minifier moves the content from inside the a tag to outside the a tag.
The command used for minifying:
npx html-minifier --keep-closing-slash --remove-comments --collapse-whitespace --minify-js --minify-css --decode-entities --no-html5 --process-conditional-comments --remove-redundant-attributes --remove-script-type-attributes --remove-style-link-type-attributes --use-short-doctype --trim-custom-fragments -o index.html.min index.html
Source file https://github.com/humaknlght/ericperretsinfo/blob/master/src/art/index.html
<div class="artContent" contenteditable="false">
<a href="/art/img/2.jpg">
<figure>
<img src="/art/img/2.jpg" width="552" height="795"/>
<figcaption>Tetris</figcaption>
</figure>
</a>
<a href="/art/img/3.jpg">
<figure>
<img src="/art/img/3.jpg" loading="lazy" width="552" height="795"/>
<figcaption>Shapes</figcaption>
</figure>
</a>
<a href="/art/img/4.jpg">
<figure>
<img src="/art/img/4.jpg" loading="lazy" width="552" height="807"/>
<figcaption>Boxes and Lines</figcaption>
</figure>
</a>
<a href="/art/img/6.jpg">
<figure>
<img src="/art/img/6.jpg" loading="lazy" width="552" height="781"/>
<figcaption>Maze 1</figcaption>
</figure>
</a>
<a href="/art/img/7.jpg">
<figure>
<img src="/art/img/7.jpg" loading="lazy" width="552" height="804"/>
<figcaption>Maze 2</figcaption>
</figure>
</a>
<a href="/art/img/8.jpg">
<figure>
<img src="/art/img/8.jpg" loading="lazy" width="552" height="803"/>
<figcaption>Concentric Lines</figcaption>
</figure>
</a>
<a href="/art/img/9.jpg">
<figure>
<img src="/art/img/9.jpg" loading="lazy" width="552" height="800"/>
<figcaption>Lines</figcaption>
</figure>
</a>
<a href="/art/img/10.jpg">
<figure>
<img src="/art/img/10.jpg" loading="lazy" width="552" height="808"/>
<figcaption>Concentric Lines ontop of Tetris</figcaption>
</figure>
</a>
<a href="/art/img/11.jpg">
<figure>
<img src="/art/img/11.jpg" loading="lazy" width="552" height="786"/>
<figcaption>Triangles</figcaption>
</figure>
</a>
<a href="/art/img/12.jpg">
<figure>
<img src="/art/img/12.jpg" loading="lazy" width="552" height="800"/>
<figcaption>Concentric ERIC</figcaption>
</figure>
</a>
<a href="/art/img/13.jpg">
<figure>
<img src="/art/img/13.jpg" loading="lazy" width="552" height="797"/>
<figcaption>Boxes and Lines 2</figcaption>
</figure>
</a>
<a href="/art/img/14.jpg">
<figure>
<img src="/art/img/14.jpg" loading="lazy" width="552" height="802"/>
<figcaption>Concentric Lines 2</figcaption>
</figure>
</a>
<a href="/art/img/15.jpg">
<figure>
<img src="/art/img/15.jpg" loading="lazy" width="552" height="795"/>
<figcaption>L Shapes</figcaption>
</figure>
</a>
<a href="/art/img/16.jpg">
<figure>
<img src="/art/img/16.jpg" loading="lazy" width="552" height="791"/>
<figcaption>Boxes with Patterns</figcaption>
</figure>
</a>
<a href="/art/img/17.jpg">
<figure>
<img src="/art/img/17.jpg" loading="lazy" width="552" height="792"/>
<figcaption>Angles</figcaption>
</figure>
</a>
<a href="/art/img/18.jpg">
<figure>
<img src="/art/img/18.jpg" loading="lazy" width="552" height="794"/>
<figcaption>Triangles and Squares</figcaption>
</figure>
</a>
<a href="/art/img/19.jpg">
<figure>
<img src="/art/img/19.jpg" loading="lazy" width="552" height="796"/>
<figcaption>⊔, ⊓, ⊏, and ⊐</figcaption>
</figure>
</a>
<a href="/art/img/20.jpg">
<figure>
<img src="/art/img/20.jpg" loading="lazy" width="552" height="802"/>
<figcaption>Triangles and Diamonds</figcaption>
</figure>
</a>
<a href="/art/img/21.jpg">
<figure>
<img src="/art/img/21.jpg" loading="lazy" width="552" height="793"/>
<figcaption>Tetris Lines with a Box and Triangle Fissure.</figcaption>
</figure>
</a>
<a href="/art/img/5.jpg">
<figure>
<img src="/art/img/5.jpg" loading="lazy" width="552" height="811"/>
<figcaption>Triangles</figcaption>
</figure>
</a>
</div>
Actual Minified version
<div class="artContent" contenteditable="false"><a href="/art/img/2.jpg"></a><figure><img src="/art/img/2.jpg" width="552" height="795"/><figcaption>Tetris</figcaption></figure><a href="/art/img/3.jpg"></a><figure><img src="/art/img/3.jpg" loading="lazy" width="552" height="795"/><figcaption>Shapes</figcaption></figure><a href="/art/img/4.jpg"></a><figure><img src="/art/img/4.jpg" loading="lazy" width="552" height="807"/><figcaption>Boxes and Lines</figcaption></figure><a href="/art/img/6.jpg"></a><figure><img src="/art/img/6.jpg" loading="lazy" width="552" height="781"/><figcaption>Maze 1</figcaption></figure><a href="/art/img/7.jpg"></a><figure><img src="/art/img/7.jpg" loading="lazy" width="552" height="804"/><figcaption>Maze 2</figcaption></figure><a href="/art/img/8.jpg"></a><figure><img src="/art/img/8.jpg" loading="lazy" width="552" height="803"/><figcaption>Concentric Lines</figcaption></figure><a href="/art/img/9.jpg"></a><figure><img src="/art/img/9.jpg" loading="lazy" width="552" height="800"/><figcaption>Lines</figcaption></figure><a href="/art/img/10.jpg"></a><figure><img src="/art/img/10.jpg" loading="lazy" width="552" height="808"/><figcaption>Concentric Lines ontop of Tetris</figcaption></figure><a href="/art/img/11.jpg"></a><figure><img src="/art/img/11.jpg" loading="lazy" width="552" height="786"/><figcaption>Triangles</figcaption></figure><a href="/art/img/12.jpg"></a><figure><img src="/art/img/12.jpg" loading="lazy" width="552" height="800"/><figcaption>Concentric ERIC</figcaption></figure><a href="/art/img/13.jpg"></a><figure><img src="/art/img/13.jpg" loading="lazy" width="552" height="797"/><figcaption>Boxes and Lines 2</figcaption></figure><a href="/art/img/14.jpg"></a><figure><img src="/art/img/14.jpg" loading="lazy" width="552" height="802"/><figcaption>Concentric Lines 2</figcaption></figure><a href="/art/img/15.jpg"></a><figure><img src="/art/img/15.jpg" loading="lazy" width="552" height="795"/><figcaption>L Shapes</figcaption></figure><a href="/art/img/16.jpg"></a><figure><img src="/art/img/16.jpg" loading="lazy" width="552" height="791"/><figcaption>Boxes with Patterns</figcaption></figure><a href="/art/img/17.jpg"></a><figure><img src="/art/img/17.jpg" loading="lazy" width="552" height="792"/><figcaption>Angles</figcaption></figure><a href="/art/img/18.jpg"></a><figure><img src="/art/img/18.jpg" loading="lazy" width="552" height="794"/><figcaption>Triangles and Squares</figcaption></figure><a href="/art/img/19.jpg"></a><figure><img src="/art/img/19.jpg" loading="lazy" width="552" height="796"/><figcaption>⊔, ⊓, ⊏, and ⊐</figcaption></figure><a href="/art/img/20.jpg"></a><figure><img src="/art/img/20.jpg" loading="lazy" width="552" height="802"/><figcaption>Triangles and Diamonds</figcaption></figure><a href="/art/img/21.jpg"></a><figure><img src="/art/img/21.jpg" loading="lazy" width="552" height="793"/><figcaption>Tetris Lines with a Box and Triangle Fissure.</figcaption></figure><a href="/art/img/5.jpg"></a><figure><img src="/art/img/5.jpg" loading="lazy" width="552" height="811"/><figcaption>Triangles</figcaption></figure></div>
You can see that the a tags are empty, causing the HTML to be different.
Expected Minified version
<div class="artContent" contenteditable="false"><a href="/art/img/2.jpg"><figure><img src="/art/img/2.jpg" width="552" height="795"/><figcaption>Tetris</figcaption></figure></a><a href="/art/img/3.jpg"><figure><img src="/art/img/3.jpg" loading="lazy" width="552" height="795"/><figcaption>Shapes</figcaption></figure></a><a href="/art/img/4.jpg"><figure><img src="/art/img/4.jpg" loading="lazy" width="552" height="807"/><figcaption>Boxes and Lines</figcaption></figure></a><a href="/art/img/6.jpg"><figure><img src="/art/img/6.jpg" loading="lazy" width="552" height="781"/><figcaption>Maze 1</figcaption></figure></a><a href="/art/img/7.jpg"><figure><img src="/art/img/7.jpg" loading="lazy" width="552" height="804"/><figcaption>Maze 2</figcaption></figure></a><a href="/art/img/8.jpg"><figure><img src="/art/img/8.jpg" loading="lazy" width="552" height="803"/><figcaption>Concentric Lines</figcaption></figure></a><a href="/art/img/9.jpg"><figure><img src="/art/img/9.jpg" loading="lazy" width="552" height="800"/><figcaption>Lines</figcaption></figure></a><a href="/art/img/10.jpg"><figure><img src="/art/img/10.jpg" loading="lazy" width="552" height="808"/><figcaption>Concentric Lines ontop of Tetris</figcaption></figure></a><a href="/art/img/11.jpg"><figure><img src="/art/img/11.jpg" loading="lazy" width="552" height="786"/><figcaption>Triangles</figcaption></figure></a><a href="/art/img/12.jpg"><figure><img src="/art/img/12.jpg" loading="lazy" width="552" height="800"/><figcaption>Concentric ERIC</figcaption></figure></a><a href="/art/img/13.jpg"><figure><img src="/art/img/13.jpg" loading="lazy" width="552" height="797"/><figcaption>Boxes and Lines 2</figcaption></figure></a><a href="/art/img/14.jpg"><figure><img src="/art/img/14.jpg" loading="lazy" width="552" height="802"/><figcaption>Concentric Lines 2</figcaption></figure></a><a href="/art/img/15.jpg"><figure><img src="/art/img/15.jpg" loading="lazy" width="552" height="795"/><figcaption>L Shapes</figcaption></figure></a><a href="/art/img/16.jpg"><figure><img src="/art/img/16.jpg" loading="lazy" width="552" height="791"/><figcaption>Boxes with Patterns</figcaption></figure></a><a href="/art/img/17.jpg"><figure><img src="/art/img/17.jpg" loading="lazy" width="552" height="792"/><figcaption>Angles</figcaption></figure></a><a href="/art/img/18.jpg"><figure><img src="/art/img/18.jpg" loading="lazy" width="552" height="794"/><figcaption>Triangles and Squares</figcaption></figure></a><a href="/art/img/19.jpg"><figure><img src="/art/img/19.jpg" loading="lazy" width="552" height="796"/><figcaption>⊔, ⊓, ⊏, and ⊐</figcaption></figure></a><a href="/art/img/20.jpg"><figure><img src="/art/img/20.jpg" loading="lazy" width="552" height="802"/><figcaption>Triangles and Diamonds</figcaption></figure></a><a href="/art/img/21.jpg"><figure><img src="/art/img/21.jpg" loading="lazy" width="552" height="793"/><figcaption>Tetris Lines with a Box and Triangle Fissure.</figcaption></figure></a><a href="/art/img/5.jpg"><figure><img src="/art/img/5.jpg" loading="lazy" width="552" height="811"/><figcaption>Triangles</figcaption></figure></a></div>
I validated the HTML fragment using https://validator.w3.org/nu/ and the input is valid.
Does this issue still persist? When testing in the web versions both of HTML Minifier and of HTML Minifier Next (maintained fork), I cannot reproduce.
(If I missed a setting, it could be explained by that.)
I tried both versions of the web based minifier and it works as expected. I tried the latest version of both minifiers using the node base version of the CLI and it still generates the wrong version of the HTML.
Interesting! Added it to my list of issues to review for HTML Minifier Next. (This may take a while, but I do hope to get there.)
Here is the workaround I did to my file to make it work.
https://github.com/humaknlght/ericperretsinfo/commit/8a98627c43354f30b8c97d47bc527f2f167224bf
@humaknlght, I dug into this and it seems this is due to the --no-html5 flag. In HMN, you can reproduce in the web version when flicking the HTML option.
I would suggest just not to use this CLI option. In this project, it’s not maintained, and I’m likely to deprecate (or redo) it in HMN.