Whitespaces are not preserved in non-pre tags, even with white-space; pre; on.

[martin-plessy]

Describe the bug

Whitespaces are not preserved in non-pre tags, even with white-space; pre; on.

Reproduction

Save this code in a classic .html file:

<div><pre>A</pre></div>
<div><pre>    B</pre></div>
<div><code style="white-space: pre;">C</code></div>
<div><code style="white-space: pre;">    D</code></div>

Expected render:

A
    B
C
    D

Now save it in a .svelte component. Actual render:

A
    B
C
D <-- note missing whitespace

Logs

No response

System Info

System:
  OS: Windows 10 10.0.19044
Binaries:
  Node: 18.19.1
  npm: 9.6.4
Browsers:
  Edge: Chromium (126.0.2592.61)
npmPackages:
  svelte: ^4.2.7 => 4.2.18

Severity

annoyance

[7nik]

white-space can be set in various ways in various places, so checking for this CSS property will never be reliable.
You need to set the compiler option preserveWhitespace to true.

You can define it dynamically, something like

// svelte.config.js
export default {
  //...
  vitePlugin: {
    dynamicCompileOptions({filename}) {
      if (filename.endsWith("/MyComponent.svelte") {
        return { preserveWhitespace: true };
      }
    }
  }
}

[Prinzhorn]

You can define it dynamically, something like

Or put it inside the component:

<svelte:options preserveWhitespace={true} />

<div><pre>A</pre></div>
<div><pre>    B</pre></div>
<div><code style="white-space: pre;">C</code></div>
<div><code style="white-space: pre;">    D</code></div>

https://svelte.dev/repl/fb3336b23b8b47b5b870bdebd04b8831?version=4.2.18