Skip to content

White space escape characters are written into HTML when spread is used with SSR #4240

@jesseskinner

Description

@jesseskinner

Describe the bug
When new lines and tabs are used in attributes, then run through SSR, they end up written into the HTML, eg. <div class="\none\ntwo\n"></div>. This breaks the class name and can cause a FOUC with Sapper, and would completely break rendering of HTML-only static-generated pages.

Logs
N/A

To Reproduce

REPL: https://svelte.dev/repl/80b8863b778c4b608537a98fb811de43?version=3.16.7

If you download the REPL, change to generate:'ssr' and then console.log(App.render()), you get

<div class="
	white
	space
">A</div>

<div class="\n\twhite\n\tspace\n">B</div>

<div class="white\nspace">C</div>

Expected behavior
I would expect the white space to be rendered into the HTML as white space characters, like the first <div> above.

Stacktraces
N/A

Information about your Svelte project:

  • Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
    N/A

  • Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
    Arch Linux

  • Svelte version (Please check you can reproduce the issue with the latest release!)
    3.16.7

  • Whether your project uses Webpack or Rollup
    Rollup

Severity
HTML-only web pages would be severely broken by this bug, and it may not be obvious during development. Sapper sites will have a FOUC.

Additional context
I came across this bug by running into a bug causing a FOUC when I was using Svelte Material UI:
hperrin/svelte-material-ui#66

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions