Custom/vue template closing tags removed; `keep_closing_tags` ignored

[jono-hayward]

I've just identified this issue in our build process that uses minify-html. We use a lot of vue components mixed in with our markup, but minify-html seems to be very eager about removing the closing tags from some of these components.

So something like this:

<Tooltip x="center" y="below">
  <template #trigger>
    <Icon name="info" css="icon--sm" />
  </template>
  <template #content>
    <h3 class="font-sans text-sm font-semibold m-0">Note:</h3>
    <p class="text-sm m-0">Sed maxime alias sed id quis rerum voluptatum accusamus quod. Qui
      aspernatur id maxime quae et qui ut. Repudiandae nihil facilis inventore enim explicabo.
      Non neque et deserunt reiciendis occaecati est deserunt aut aut.</p>
  </template>
</Tooltip>

Becomes this:

<tooltip x=left y=below> <template #trigger>
  <icon css=icon--sm name=info> <template #content>
      <h3 class="font-sans text-sm font-semibold m-0">Note:</h3>
      <p class="text-sm m-0">Quis itaque dolore dolor non exercitationem error id dolor dicta. Eveniet sed illo
        corporis cupiditate aut consequuntur error. Omnis unde vitae. Aperiam nulla voluptatem quis. Alias
        pariatur ad qui.</p>
    </template>

I've tried adding keep_closing_tags: true to the minifier config but this doesn't seem to make any difference to the output.

Any ideas? Am I just barking up the wrong tree hoping to use a minifer like this for custom markup?

[wilsonzlin]

I did some digging into the provided example. I believe the issue is that <Icon a=b /> is reinterpreted as <Icon a=b> i.e. the starting tag, as per the parsing rules. This causes all the following closing tags to be ignored by the parser (not dropped by the minifier), as mentioned in the parsing rules, because they don't match the opening tag.

Self-closing tags aren't valid in HTML and browsers typically reinterpret as an opening tag, although (as noted in the parsing rules) browsers have far more complex logic well outside the scope of this minifier. In this case, I would just change it to <Icon a=b></Icon>. Once changed, everything works fine, although the tag names get lowercased.