primer
Add lint rule to ensure `<img>` is self closing
When <img> is does not have self closing slash like <img />, vercel deploys broke completely.
<img > is considered valid HTML as it is a void element, but for some reason <img > breaks vercel deploys.
Apparently <img> is not valid in XHTML or XML and needs to be <img /> so maybe XHTML or XML is being used under the hood somewhere? Not sure
We should investigate why this breaks and/or add a lint rule so we catch this at the linting stage and prevent future headaches.
@khiga8 does this happen in the design docs only, or across all primer.style docs?
This was specifically observed in this design repo in a .mdx file. Here's a related commit that fixed it.
JSX isn't HTML and has its own semantics. One of the ways it differs from HTML is that all elements need to close, either by self-closing or with a closing element.
<img> is invalid in JSX but is how we define images in HTML.
