Giters

antfu-collective / vite-ssg

Static site generation for Vue 3 on Vite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bug: mismatching HTML output

privatenumber opened this issue · comments

commented

Describe the bug

vite-ssg generates mismatching server-generated and frontend HTML.

Specifically, this is happening because JSDOM is used to modify the input HTML structure during the server-side rendering process.

Input

<!DOCTYPE html>
<html>
  <body>
    <p>
      <span>span</span>
      <h1>h1</h1>
    </p>
  </body>
</html>

JSDOM Output

JSDOM is changing the input HTML structure. It is moving the h1 tag outside of the p tag.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p>
      <span>span</span>
    </p>
    <h1>h1</h1>
    <p></p>
</body>
</html>

So technically, this is actually correct behavior because apparently by HTML spec, h1 tag cannot be inside a p tag.

However, in my case, the HTML is generated by vite-plugin-vue-markdown (which uses markdown-it) when I provide it with the following input:

<span>span</span><h1>h1</h1>

Proposed solution

Using happy-dom instead of jsdom yields the expected behavior.

Happy DOM Output

<!DOCTYPE html>
<html>
  <body>
    <p>
      <span>span</span>
      <h1>h1</h1>
    </p>
  </body>
</html>

Reproduction

https://stackblitz.com/edit/stackblitz-starters-pcu9op?file=index.mjs

System Info

N/A

Used Package Manager

npm

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.
commented

Upon trying to open a fix, I realized critters will apply the same fix too, moving the h1 out of the p tag. Also prettier complains if there's a h1 inside of a p tag.

This may have to be fixed on the HTML generation side when parsing the markdown.