kangax / kangax/html-minifier

A tags and figures are not handled correctly

Open
#1,158 5 comments 1 reaction 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.