Unsubmitted bug report for Prettier handling of Processing Instructions

Input: Any Processing Instruction element, eg. <? string >?

Output modified Processing Instruction element

Expected Processing Instruction element passed through unchanged.

MDN and the DOM spec state that Processing Instructions should be treated as comments in HTML documents:

ProcessingInstruction nodes are only supported in XML documents, not in HTML documents. In these, a process instruction will be considered as a comment and be represented as a Comment object in the tree.

Despite being described as a bogus comment in tests/format/html/comments/bogus.html, Prettier supports Processing Instructions correctly (pass-through unchanged), unless the element contains some HTML-ish strings.

These are all valid HTML fragments which parse and format like comments as expected (strings, single-tags, self-closing tags),

<a><!-- string --></a>
<a><? string ?></a>

<a><!-- <b> --></a>
<a><? <b> ?></a>

<a><!-- <b /> --></a>
<a><? <b /> ?></a>

However, if the Processing Instruction element contains an opening and closing tag, the parser tries to format the contents instead of passing the element through unchanged.

Works:

<a><!-- <b></b> --></a>

Fails with "Unexpected closing tag":

<a><? <b></b> ?></a>

The internal tags don't seem to matter, these also with "Unexpected closing tag":

<a><? <b></c> ?></a>
<a><? <b></ ?></a>

This issue this expands from #17336 to address pure HTML parsing issues. #5537 is similar, but ASP, JSP and ERB use <% %> delimiters which are not recognized by the DOM spec.

Prettier 3.5.3 Playground link

--parser html

Input:

<a><? <b></b> ?></a>

Output:

SyntaxError: Unexpected closing tag "b". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:10)
> 1 | <a><? <b></b> ?></a>
    |          ^^^^
  2 |

Expected output:

Why?

joemaller/prettier-processing-instructions-bug-report.md