Spaces between html tags (like \n\t\t\t)

[frederikhors]

First of all thanks a lot for your work: Svelte is amazing!

Now I have a problem with spaces.

If you just use the below code in a REPL:

<li>
  <span>Test</span>
  <span>username</span>
</li>

The compiler on my machine create a js with this code:

.innerHTML="<span>Test</span>\n\t\t\t  <span>username</span>"

Maybe I'm wrong, but I would like to understand how to get everything compiled without \n\t\t\t .

So from this:

.innerHTML="<span>Test</span>\n\t\t\t  <span>username</span>"

to this:

.innerHTML="<span>Test</span><span>username</span>"

Am I wrong?

[Conduitry]

It looks like the collapsing of whitespace in #2258 (which defaults to on) isn't happening when the content is completely static and we're able to use innerHTML. It probably should.

With that fix though, this would be getting compiled to

.innerHTML = `<span>Test</span> <span>username</span>`;

to be consistent (and to be safer). We don't in generally want to remove all of the whitespace.

[frederikhors]

@Conduitry there is something I can do now until fix?

[frederikhors]

@Conduitry I think the space is not useful there. In React and Vue it doesn't exists.

Many components with the same DOM will loose style with the space.

Many browsers add a space between elements if there is a space in HTML. I think the space is not good there.

E.g: Bootstrap navbars. With spaces all becomes a problem.

[frederikhors]

I think if I need space I can add myself a {' '} like in JSX world, nope?

[Conduitry]

If you need to have no whitespace between two elements, you should place them right next to each other. Svelte's syntax isn't JSX, and its whitespace handling rules more closely follow those of HTML. This is intentional.

Yes, there are situations where it is safe to remove the spaces but we currently aren't. Those can be enhancements for later though, and aren't really bugs that need to be fixed. Not behaving like JSX is certainly not a bug. More whitespace optimizations can happen as part of #189.

What is a bug is that the whitespace is not being automatically collapsed to one space when an element has no dynamic contents and we can set it with .innerHTML = whatever instead of creating individual elements in it.

[mrkishi]

Until that happens, you are free to use an html minifier on the markup preprocessor, eg:

import { minify } from 'html-minifier';

...

preprocess: !dev && {
	markup({ content }) {
		return {
			code: html_minify(content, {
				caseSensitive: true,
				collapseWhitespace: true,
				decodeEntities: true,
				keepClosingSlash: true,
				removeAttributeQuotes: true,
				removeComments: true,
				removeRedundantAttributes: true,
				removeScriptTypeAttributes: true,
				removeStyleLinkTypeAttributes: true,
				sortAttributes: true,
				sortClassName: true,

				ignoreCustomFragments: [/<script>[\s\S]*?<\/script>/, /\{[\s\S]*?\}/],
			})
		}
	}
},

[maxmilton]

For what it's worth, I've made a Svelte markup preprocessor which removes excessive whitespace: https://github.com/WeAreGenki/minna-ui/tree/master/utils/preprocess

When all you care about is getting rid of excessive whitespace it might be a viable option for you, otherwise html-minifier (like mrkishi mentioned) or even PostHTML might be better as they are more feature packed. Personally I could never get them to work well when I had objects in the template (e.g. {doSomething({ val: 1 })}), so I use a simpler whitespace only approach.

[simonbuchan]

Here's an example which shows the difference between collapsing and removing whitespace, and why it's not safe in general; and showing a case in JSX where it would behave differently, and a CSS workaround.

I feel like JSX has a good trade-off, once you understand it, in HTML removing the whitespace from the DOM can require very ugly formatting, but in practice you normally just need a bit more styling.

[creaven]

yet one ugly workaround if want no space, but write in multiple lines - add comment

        <button>First</button><!--
     --><button>Second</button>

[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.