Investigate HTML whitespace changes during parse/stringify

Some whitespace changes occur from parse5 when we parse the HTML to an AST, modify it, and then convert the AST back to a string.

Example

Input:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <p class="cool cow moo">
      Hi there!
    </p>
    <!--
      <span class="dog">comments are skipped</span>
    -->
    <h1 class="cool cat nice wow">
      Meow
    </h1>
    <h2 class="dog">
      Woof
    </h2>
  </body>
</html>

Output:

<!DOCTYPE html><html><head>
    <title>Test</title>
  </head>
  <body>
    <p class="cool moo rp__font-size__--COLON12px rp__padding__--COLON8px">
      Hi there!
    </p>
    <!--
      <span class="dog">comments are skipped</span>
    -->
    <h1 class="cool nice wow rp__font-size__--COLON12px rp__padding__--COLON8px">
      Meow
    </h1>
    <h2 class="rp__font-size__--COLON12px rp__background__--COLON__--OCTOTHORPF00 rp__padding__--COLON8px">
      Woof
    </h2>

</body></html>

This may be caused by our code:

Not passing in proper settings to the parsing step
Not passing in proper settings to the stringify step
Something during the modification of the AST

If it is not on our end, then it is a problem with parse5. We would need to either create a PR against parse5 to fix it (it's pretty well written and clean JS). Or find an alternative HTML parser and swap it out.

red-perfume / red-perfume-html

Investigate HTML whitespace changes during parse/stringify #1

Example