Skip to content

Add option to keep whitespace between elements regardless of new lines (vue-template-compiler) #11359

Closed
@troxler

Description

@troxler

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions