Description
What problem does this feature solve?
The whitespace
option of vue-template-compiler currently allows preserve
and condense
(default in Vue CLI). While condense
will result in smaller code size, it also breaks a common way to structure HTML as it removes all whitespace between elements if it contains new lines.
Please add an option that condenses all whitespace between elements into a single space regardless of whether it contains new lines. Such an option might also be the better default than condense
as it is closer to what you would expect from your HTML.
Example using Vue CLI with the default condense
option:
<p>
<span>1</span> <span>a</span>
</p>
<p>
<span>2</span>
<span>b</span>
</p>
<p>
<span>3</span>
<span>
c
</span>
</p>
This results in the following output in the browser:
1 a
2b
3 c
As you can see, there is no whitespace between 2b
. While this behaviour is properly documented in the vue-template-compiler docs, it is not intuitive. Structuring HTML like in 2
is very common and it should not be necessary to restructure it like 3
. In addition to being unintuitive, it is currently very hard to find out which package with which configuration and which default options is actually responsible for that behaviour. It is thus super hard to reconfigure your setup according to your needs. And even if you manage to do that, you must decide between no minification with preserve
and minification that might break your HTML with condense
. I think there should be a middle ground.
What does the proposed API look like?
Introduce an option condense-keep
or similar. Using that instead of condense
will always keep one whitespace between elements regardless of any new lines.