prettier
defect html tags for svg (+path)
Prettier 2.6.2 Playground link
--parser html
--no-semi
--single-quote
--html-whitespace-sensitivity strict
Input:
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg class="w-4 h-4 mr-2 text-green-600" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>Components
</p>
</div>
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg class="w-4 h-4 mr-2 text-green-600" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>Updates
</p>
</div>
Output:
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-600"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 512 512"
>
<path
fill="currentColor"
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
></path></svg
>Components
</p>
</div>
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-600"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 512 512"
>
<path
fill="currentColor"
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
></path></svg
>Updates
</p>
</div>
Expected behavior:
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-600"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 512 512"
>
<path
fill="currentColor"
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
></path>
</svg>Components
</p>
</div>
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-600"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 512 512"
>
<path
fill="currentColor"
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
></path>
</svg>Updates
</p>
</div>
In my view there is something broken for html tags.
Does setting HTML Whitespace Sensitivity to ignore solve your problem?
Prettier 2.6.2 Playground link
--parser html
--no-semi
--single-quote
--html-whitespace-sensitivity ignore
Input:
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg class="w-4 h-4 mr-2 text-green-600" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>Components
</p>
</div>
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg class="w-4 h-4 mr-2 text-green-600" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>Updates
</p>
</div>
Output:
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-600"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 512 512"
>
<path
fill="currentColor"
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
></path>
</svg>
Components
</p>
</div>
<div class="w-full lg:w-6/12 xl:w-4/12 mb-4">
<p class="flex items-center">
<svg
class="w-4 h-4 mr-2 text-green-600"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 512 512"
>
<path
fill="currentColor"
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
></path>
</svg>
Updates
</p>
</div>
Yes, but breaks other parts. CSS or Strict would the only option I can use without breaking other stuff.
@Dexus What is broken? I don't see different between input and output, do you have something exotic in HTML/CSS?
@alexander-akait
this is SVG close tag
></path></svg
>Updates
</p>
No nothing very exotic html/css, but our build system is something big and static...
Hi, I'm having the same issue. Are there any updates?
If you want to know more about my case, just take a look at this issue that has been opened to prettier-vscode.
I say we should implement svg support(or adopt a plugin, if any). For svg inside html, we can call that parser to format.
That's ok in that case, but I think the problem is extended on every html tag, not only the svg one. I've seen this problem for a long time before opening an issue, sometimes on divs, sometimes on spans and sometimes on angular things such as ng-container, ng-content or components selectors.
One solution might be that closing tags cannot be split across multiple lines like opening tags?
This isn't SVG-specific. I'd say this is a duplicate of https://github.com/prettier/prettier/issues/8302, see also https://github.com/prettier/prettier/issues/7153
Here's a demo of the same behavior with the button tags instead of svg:
Prettier 2.7.1 Playground link
--parser html
Input:
<div>
<button>
<div>Click me!</div>
<b>Click</b> me!
</button>Update<button>
<div>Click me!</div>
<b>Click</b> me!
</button>Update
</div>
Output:
<div>
<button>
<div>Click me!</div>
<b>Click</b> me!</button
>Update<button>
<div>Click me!</div>
<b>Click</b> me!</button
>Update
</div>
