Missing whitespace between elements if one has non-executed "if" branch

[johnnysprinkles]

Describe the bug

I'm seeing something weird with whitespace... if I add an "if" block that won't execute, i.e. the condition is false, it messes up the whitespace collapsing logic somehow. Best to see the repl.

Reproduction

https://svelte.dev/repl/2014f35ca35a47f387d62c2bb510332c?version=3.52.0

See example 2 in there. The "jewel" components run together.

Logs

No response

System Info

System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 5.56 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - /opt/brew/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 99.0.1
    Safari: 16.0
    Safari Technology Preview: 16.4
  npmPackages:
    svelte: ^3.44.0 => 3.50.1

Severity

annoyance

[Mark2M]

Odd indeed… but personally I’d just stick a margin-inline: .2em; and the problem goes away.

[Prinzhorn]

display: inline is weird, please compare these two minimal examples, which don't require Svelte at all

https://svelte.dev/repl/bab55fc1bbf24f9e9d988907b45d23f3?version=3.52.0

so if you remove the newline it works

https://svelte.dev/repl/205b608760474e20b2a418f60bea897d?version=3.52.0

There are countless open issues here about white-space control in Svelte, but I'm not sure if this is something that can be solved in a nice way. Even if {#if} would allow more control about trimming white-space, you'd still have to know what you're doing and that the newline breaks display: inline.

[brunnerh]

Switching to display: inline-block; would also fix this (if that is an option here).
I am curious why this behaves the way it does, though...

[Prinzhorn]

I am curious why this behaves the way it does, though...

Svelte or inline? Svelte arguably does the correct thing and the newline is preserved. The span in the last example fixes the spacing, see updated version here: https://svelte.dev/repl/bab55fc1bbf24f9e9d988907b45d23f3?version=3.52.0

[brunnerh]

The inline. Usually people battle it adding unwanted white space, not removing it.

[Prinzhorn]

All I can say is that

1. It behaves the same in Firefox and Chromium, so it's probably according to spec
2. It behaves the same without Svelte in jsbin

For some reason the browser decides not to add a whitespace between the middle one (see dev tools).

[johnnysprinkles]

Thanks for taking a look at this. In my case I'm actually using an inline-block already, and if I run things together on one line it fixes case 2 but breaks case 3, deleting the interstitial space.

https://svelte.dev/repl/8345055991ef4814a65738ea940edd5b?version=3.52.0

I'll keep playing with this.

[johnnysprinkles]

I guess a nonbreaking space could work: https://svelte.dev/repl/20151491249640cb956a39536924085c?version=3.52.0