Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: mismatching HTML output #367

Open
5 tasks done
privatenumber opened this issue Jul 22, 2023 · 1 comment
Open
5 tasks done

bug: mismatching HTML output #367

privatenumber opened this issue Jul 22, 2023 · 1 comment

Comments

@privatenumber
Copy link

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.
@privatenumber
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@privatenumber