Whitespace being trimmed and not complying with HTML spec

[kdheepak]

Describe the bug

If I have the following code:

<pre style="background-color: #2e3440ff"><code><span class="line">
<span style="color: #81A1C1">local</span><span style="color: #D8DEE9FF"> execute </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> vim.</span><span style="color: #D8DEE9">api</span><span style="color: #D8DEE9FF">.</span><span style="color: #D8DEE9">nvim_command</span></span></code></pre>

This strips some of the whitespace in svelte:

https://svelte.dev/repl/d2c6b9c46dd045dc9726d0ba819f1f93?version=3.46.3

But this is what I'm expecting it to render as:

https://codebeautify.org/htmlviewer/y22174c86

This HTML is syntax highlighted code that is generated from Markdown, and works when rendering HTML in other locations.

Am I missing something? Why does it not work in Svelte?

Reproduction

https://svelte.dev/repl/d2c6b9c46dd045dc9726d0ba819f1f93?version=3.46.3

Logs

No response

System Info

npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
    Memory: 2.12 GB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 17.1.0 - ~/miniconda3/bin/node
    npm: 8.1.2 - ~/miniconda3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    svelte: ^3.44.0 => 3.46.2

Severity

blocking all usage of svelte

[baseballyama]

codebeautify.org define white-space: pre; to <pre> tag globally.
But Svelte doesn't do that because <pre> tag doesn't have white-space: pre;.

If you want to keep spaces, you need to add white-space: pre; to <pre> tag.

[UPDATE] This was the wrong comment so I rescinded it.

[kdheepak]

I don't think that's what is going on here? For example, I tried copying the HTML I pasted into a index.html file, ran python -m http.server and opened localhost:8000 in Firefox. This is what I get:

There's no white-space: pre style in the above example.

I also updated the Svelte code in the REPL to the following based on your suggestion and I still get incorrect spacing:

<pre style="background-color: #2e3440ff; white-space:pre"><code><span class="line">
<span style="color: #81A1C1">local</span><span style="color: #D8DEE9FF"> execute </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> vim.</span><span style="color: #D8DEE9">api</span><span style="color: #D8DEE9FF">.</span><span style="color: #D8DEE9">nvim_command</span></span></code></pre>

<style>
  pre {
    white-space: pre
  }
</style>

[kdheepak]

The only way to solve it appears to be replacing all spaces with {' '} everywhere, e.g.:

<pre style="background-color: #2e3440ff><code><span class="line">
<span style="color: #81A1C1">local</span><span style="color: #D8DEE9FF">{' '}execute </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">{' '}vim.</span><span style="color: #D8DEE9">api</span><span style="color: #D8DEE9FF">.</span><span style="color: #D8DEE9">nvim_command</span></span></code></pre>

Is this really the recommended way to do this?

[baseballyama]

Oops. Sorry, I said wrong things...

When I comment above, at the same time I changed space (' ') to  
But I misunderstood white-space: pre; is working.

This issue has been fixed in this PR.
I think it will be fixed in the next release.
#6990

I tried this on the latest master branch, and the spaces were inserted correctly.

[Code]

<pre style="background-color: #2e3440ff; white-space:pre"><code><span class="line">
<span style="color: #81A1C1">local</span><span style="color: #D8DEE9FF"> execute </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> vim.</span><span style="color: #D8DEE9">api</span><span style="color: #D8DEE9FF">.</span><span style="color: #D8DEE9">nvim_command</span></span></code></pre>

<pre style="background-color: #2e3440ff"><code><span class="line">
<span style="color: #81A1C1">local</span><span style="color: #D8DEE9FF">{' '}execute{' '}</span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF">{' '}vim.</span><span style="color: #D8DEE9">api</span><span style="color: #D8DEE9FF">.</span><span style="color: #D8DEE9">nvim_command</span></span></code></pre>

[dummdidumm]

This was fixed by #6990 and will be part of the next release

[kdheepak]

Ah, nice. I didn’t see that PR. Thanks!