Custom tags are handled in block-formatting context

[jongio]

🐛 Bug Report

Whitespace in innerHTML is not preserved.

To Reproduce

When you format this:

<template>
 <div id="app">
  <div id="nav">
   <router-link to="/">Home</router-link> |
   <router-link to="/about">About</router-link>
  </div>
  <router-view />
 </div>
</template>

Expected behavior

The space after Home</router-link> should be preserved.

<template>
 <div id="app">
  <div id="nav">
   <router-link to="/">Home</router-link>|
   <router-link to="/about">About</router-link>
  </div>
  <router-view/>
 </div>
</template>

Context

• Angular
• Svelte
• [x ] Vue
• Riot
• HTML5 only

Your Environment

• Prettyhtml version:
• NodeJs version: 10.15.1
• Environment name and version: VS Code1.30.2
  61122f88f0bf01e2ac16bdb9e1bc4571755f5bd8
  x64
• Operating System and version: Windows

[StarpTech]

Hi @jongio the reason is that we handle custom-tags in case-insensitive context. I would accept a PR to handle all custom tags as case-sensitive. As a workaround you could do:

<template>
 <div id="app">
  <!--prettyhtml-preserve-whitespace-->
  <div id="nav">
   <router-link to="/">Home</router-link> |
   <router-link to="/about">About</router-link>
  </div>
  <router-view/>
 </div>
</template>

[jongio]

@StarpTech - Are you saying that the space is removed due to case sensitivity? I'm not following that, but I also don't know the code. To me, not sure that new title describes the issue.

[StarpTech]

Hi @jongio you're right the title wasn't accurate. For more informations see https://medium.com/@patrickbrosset/when-does-white-space-matter-in-html-b90e8a7cdd33

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[y912765390]

Hello, I don't know why this library is introduced into the Vue project. With this API, the project will not run. They say we can't find the third party.
Can you help me? Thank you very much.