inconsistent behaviour of whitespace: 'condense' handling if second element text is an interpolated var #7542
Description
Vue version
3.2.45
Link to minimal reproduction
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 reproduceAny 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 wholecondensething 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.