<p> paragraphs break when compressing, closing tag missing

[posido]

What is this bug about (expected vs actual behaviour)?

expected:
closing tag of a paragraph should still exist in HTML output after compressing:

actual:
closing tag is removed after compression

How can I reproduce it?

use voku\helper\HtmlMin;

$html = "
<p>
    This is a simple test to show compressing paragraphs does not work.
    #compressing html
</p>
";
$htmlMin = new HtmlMin();
echo $htmlMin->minify($html);

output:
<p> This is a simple test to show compressing paragraphs does not work. #compressing html

Does it take minutes, hours or days to fix?

not sure

Any additional information?

It also affects https://github.com/voku/html-compress-twig

[voku]

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

It's optional in HTML5. Do you see any problems in the browser?

[posido]

Unfortunately, yes. With compression and removed

my image gallery JavaScript layout switch works but shows the images completely strange. With a closing

it is as expected.

[voku]

Do you have an example (html code or a link) for me, maybe we can spot the error.

[posido]

Actually, not so easy. I use several NPM JS components relevant for switching the view mode of the gallery. The responsible JS code looks good:

    jQuery(".grid-system > a").on("click", function(event){
        event.preventDefault();
        var selector = jQuery(this).parent().parent().next().find('div.item');
        var classStr = jQuery(selector).attr('class'),
            lastClass = classStr.substr( classStr.lastIndexOf(' ') + 1);
        jQuery(selector)
            // Remove last class
            .removeClass(lastClass)
            // Put back .item class + the clicked elements class with the added prefix "group-item-".
            .addClass('item group-item-' + jQuery(this).attr('class') );
        if(jQuery(this).hasClass("current")!== true)
        {
            jQuery('.grid-system > a').removeClass("current");
            jQuery(this).addClass("current");
        }
    });

That's the whole JS code which switches the styles on click.

[voku]

Ok, I can't see anything with this code, but you can disable the feature via:

$htmlMin->doRemoveOmittedHtmlTags(false); // remove ommitted html tags e.g. <p>lall</p> => <p>lall

---

Does this workaround help you, should I close the issue?

[posido]

Hi, Yes that should help. Thanks. Just need to find out how to provide that option to voku/html-compress-twig within services.yaml (Symfony):

voku\helper\HtmlMin:
    tags:
        - { name: HtmlMin }

voku\twig\MinifyHtmlExtension:
    arguments:
        $forceCompression: false
    tags:
        - { name: twig.extension }

[posido]

You may close this issue. Found a solution.