Ignore CDATA in HTML or option to ignore it

[muuvmuuv]

Prettier 3.2.5
Playground link

--parser angular
--print-width 90
--prose-wrap always
--html-whitespace-sensitivity strict

Input:

<![CDATA[<app-alert>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</app-alert>]]>

Output:

<![CDATA[<app-alert> Lorem ipsum dolor sit amet consectetur adipisicing elit.
</app-alert>]]>

Expected output:

<![CDATA[<app-alert>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</app-alert>]]>

Why?

We use CDATA to show a code example of how someone should use a component surrounded by pre/code tags. Prettier always formats it. Alternatively, handle it separately and do not try to indent it with the rest of the code.

[sosukesuzuki]

@muuvmuuv Thanks for the report. I am not familiar with CDATA so let me ask a question. Is this a matter of code style preference? Or is there some processor or other that cannot accept the current Prettier output?

If it is a matter of style preference, we would not accept this request.

[muuvmuuv]

From MDN

used within XML to include extended portions of unescaped text
Since you cannot write HTML in HTML that is printed as “plain text” you need that unless you escape/ASCII the HTML tags yourself which is time-consuming.

It is a matter of style pref, but this isn't directly tied to Angular. CDATA is unformatted unescaped unstyled plain text. IMO, it should not get any formatting. You style the inner part of yourself.

Another quote: https://stackoverflow.com/questions/2784183/what-does-cdata-in-xml-mean

"a section of element content that is marked for the parser to interpret as only character data, not markup."

[fisker]

I agree that CDATA should not be formatted.

[yanapeycheva]

Hi! I am working on this issue, can you please assign it to me? Thanks!

[muuvmuuv]

Hey @yanapeycheva, great!

I wouldn't say this is only for Angular but any XML.