A tags and figures are not handled correctly
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 5k
- Forks
- 577
- PR merge metrics
- No merged PRs in 30d
Description
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the command in the report and the linked src/art/index.html input. Compare the minified output with the expected version, focusing on preserving each figure inside its surrounding anchor, then validate the corrected fragment with the W3C Nu HTML Checker.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100