Linter: `html-no-self-closing` is flagging elements within `<svg>` element

[marcoroth]

I noticed the new rule introduced #407 is flagging elements within <svg> elements. Since SVGs are usually just copy-pasted I'm not sure if it really makes sense to flag them too. On the other hand, if they are inlined in HTML+ERB files they might as well follow the same formatting style.

<div class="flex items-center text-xs text-gray-500 mt-1">
  <svg class="w-3 h-3 mr-1 fill-gray-400" viewBox="0 0 24 24">
    <path
      d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2
.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
    />
  </svg>
</div>

Self-closing syntax `<path />` is not allowed in HTML. Use `<path></path>` instead. (html-no-self-closing)

From RubyEvents

Playground:
https://herb-tools.dev/playground?tab=diagnostics&diagnosticsFilter=linter#DwEwlgbgBAxgNgQwM5ILwCIBmcCmAPKMAFxwFskBaGHAOxICcoS8iK8kn9WBzehATwoBWAAwiopVgEZ0APgBQUKMCQRusRCgwB3CgGYoAC30T6FKVExg4cCrwEUALGPRQIYHNoBCAezwZxcQAmRygQuUUlZQAHBCJDSKioEAwAWSkgsIBhAA4AOikDTKEoIQKDEoBOGHEyoJKAdihCqCbCpAaKBryGxvM9Gv08nM69cq6JhoAvUnFKvKEYczy9HKgRCiD5BeWMzZ2ghaQpAqD9ksOhc7CF5tObi52TjIfry6n0RKgAegUlYG+qm4CgB4AgsiAA

[mguidetti]

I'd vote for self closing tags being allowed within SVG as they closer follow XML rules as I understand it. (although I could be mistaken!)

[marcoroth]

@mguidetti yeah, that's my understanding too. I'm torn 😅

[Cosmo]

Got an error in herb and came here to create an issue.

<path> does not have any children and qualifies as an empty element.
And in HTML5, svg and their elements count as foreign elements.

I'd go with the spec

So <path></path> and <path /> is allowed.

[marcoroth]

Thanks for the context @Cosmo, I think that makes sense!

I opened #442 to address this! 🙌🏼

[tapster]

Just came here to investigate the same after getting lots of warnings in neovim! Checked MDN and it does seem self closing tags are ok within an SVG tag.

In SVG and MathML, elements that cannot have any child nodes are allowed to be marked as self-closing. In such cases, if an element's start tag is marked as self-closing, the element must not have an end tag.

But then found you already addressed it! Thanks for that 👍

[marcoroth]

I just released v0.6.1 which should fix this! Please open an issue if it doesn't in your case, thank you!

[Cosmo]

Thanks @marcoroth!

I just tried it out:

I'm a happy man!

PS: Linter issues () is missing a number, right? Not sure if there is an issue for that already

[marcoroth]

Hey @Cosmo, thanks for giving it shot!

Yes, it definitely should have a number. There is no issue for it yet