inconsistent behaviour of whitespace: 'condense' handling if second element text is an interpolated var

[renatodeleao]

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNqdUktu20AMvQo7XagFbI0dNEAqKAa6DNBV19qMZMoaw/PBcKQsBN2lZ8nJwpECRPkgQLIR+EjqvTckR/HH+3zoURSipCZoH4Ew9v5QWW28CxFGCNjCBG1wBjJuzSpb2cZZimDoBLep/iO7g6MD6yJ0akAgrxrcAA5oQbeg7RFtxOMGamxUTwgalAEFgwpa1Rf8lv2sbCkXB6zNIKLxFxWREUDZ7Q/3nY44ExeQsT5TEmbMyIra9aGU3DQ3EzZROzuDBL2yh7+qxkvBEgmsCy+Nq8X6qo/DFd3nuJcY4O4F+fMQ5rE8/fC+4tc1x/Hhf9rPNH0oADBn6gByqSnoeKG3lehi9FRIedKx6+u8cUby9s+UvlIT9Ujy99Xu5vscc9nwY7a/rne7/dX1/qYSh3/YYkCbxqmYvJSrnYqNWA5sa5TPz+Qsn+A4+3kqUCUKmDMpx6IJP9uitkmHe6bchVPylIfeRm0wRzLbOrh7wsDEldisOPjlYcCwZVtH9hY+4nzV+oY30fJwJzE9AvXCGTY=

Steps to reproduce

N/A

What is expected?

As described by Evan's words, indenting the subsequent element will add a space between text content of the two nodes

<template>
  <span>Foo</span>
  <span>
    Bar
  </span>
</template>
<!-- outputs Foo Bar -->

When the second element's content is a variable (not hardcoded text) the template compiler does not recognize it as text and removes the space.

<script setup>
const bar = ref('Bar')
</script>

<template>
  <span>Foo</span>
  <span>
    {{ bar }}
  </span>
</template>
<!-- expect to output Foo Bar, but outputs FooBar -->

What is actually happening?

It outputs Foo Bar in the first example as expected and FooBar in the second which is not expected.

System Info

N/A it's vue's SFC playground env, which uses `whitespace: 'condense'` (default), the only requirement to reproduce

Any additional comments?

The behaviour is inconsistent, and it's especially problematic when you're dealing with dynamic content — a classic real-world scenario is looping through a key/value object and outputting a definition list of things for example.

Known workarounds

• Setting compilers whitespace: 'preserve' would work, but is not an option for me because it breaks a lot of other rather critical stuff
• Manually Adding   HTML entity, but damn this whole condense thing is not aligned with the last 20 years of HTML (that I can remember of) and I would rather not go down that rabbit hole.

[edison1105]

It is inconsistent with vue2. so I feel this should be a bug.

[mikemklee]

Also being blocked by this while trying to migrate a codebase from Vue 2 to Vue 3.
Most of the existing snapshot tests are breaking because of a couple whitespaces missing.

[jcuenod]

Not sure if it's the same issue, but I'm mapping through a list of words to create clickable spans. Each word should be separated by various "before" and "after" text that does not need to be in its own node. Leading and trailing whitespace is elided in these cases.

[lucasfischer]

Running into the same issue while migrating from Vue 2 to Vue 3. Are there any known workarounds yet?

[SampsonCrowley]

honestly I wish the leading and trailing whitespace were also removed for static content it's very inconvenient that code formatting affects layout.

I would much rather have that leading/trailing whitespace always removed. and if I need to guarantee a space, that's what either   is for, or margin or padding