Spaces on the edges of elements are not preserved

[TehShrike]

When I render this html in the browser:

<h1>Hello <strong>World! </strong><span>How are you?</span></h1>

The space at the end of the strong element is preserved, and there is a space between the two sentences.

However, right now (1.21.0) Svelte strips that space. REPL reproduction

[Conduitry]

This is a bit less straightforward to handle than I was initially thinking. This gets us right into that optimizing/collapsing whitespace stuff that's come up before - when do we want to trim whitespace? when do we want to collapse to a single space? when do we want to leave all whitespace as-is? We can't know this for certain without examining CSS, which we can't reliably do at compile time.

My suggestion (and part of this might have to wait until version 2 as it would be a breaking change) is to more aggressively remove whitespace, but to encourage the use of mustaches with static string literals if specific whitespace is needed. I've seen this idiom in JSX I believe. It's a bit less user friendly than I'd like, but I don't see what else would be practical to implement.

The compiled component code generated from static string mustaches actually isn't bad at the moment, but if this were to be officially endorsed as a method of addressing this, it may be good to tidy up the generated code a bit.

[TehShrike]

JSX leaves <div> the whitespace on the edges of this element </div> alone, but trims all the whitespace around

  <div>
    this text here.
  </div>

I think saying "whitespace will be treated as if all mustache html was white-space: normal" would be the least surprising to people.

[frederikhors]

I opened an issue on VSCode Svelte plugin repo (jamesbirtles/svelte-vscode#50).

The problem is I need this code to stay like this:

<div>
  Test (<span class="color">one</span>)
</div>

It becomes this instead:

<div>
  Test (
  <span class="color">one</span>
  )
</div>

Is it related to Svelte compiler or an issue with ghost spaces added by vscode plugin?

What can I do?

I'm not understanding.