Whitespace is removed when a comment appears between a tag and an interpolation

catrope

Jul 26th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqtU0tv2zAM/iusLtmA2EbWw4DALbrbLrsN2EUXxWISb9YDIp0MMPzfR8tt0iV7dzeTn/Q9KHNQ72IsDz2qtaqpSW1kIOQ+3mvfuhgSwwAJtzDCNgUHCzm60F77JnhicLSDuwl/tXiPXRfgU0idvVm81r6uZjohkoLRxc4wSgUA9U1RwMc9wga7cJT73mIiMARa1fvV/QckMjtc15UUMDMfM7NWUBSZpLbtAZrOEN1ptQvBapX7mq8Y5vYwZLvjKMV0vxKCGZqqv3H0B4Y25smPAD/yc5JsCZrgHHqGxvSEBCw2KJpmMsNHRJ87+xUYb/Mn41cGDgKLURcOaJ88AJxSvjDjLPKTdL032y02jHb1u5QTzUutBAmd/peh67HbIEP34XH+/zL+pXyfL2dc+IkNt835ac4xLgdSV6f9UEs1713hTCw/U/CymUM+9giQVmvInakn+zjVWu2ZI62rqvfxy66UbNWDYFXqPbcOCxvcw235prx9K7rEz/slkis2KRwJkyhqtXxGXknzgKmYnwjTL8Uuzn4neIFdiU6a8tOOavwGnbt+Pw==

Steps to reproduce

In your template, have a tag followed by an interpolation that returns text, like this:

<template>
    <div class="foo">
        <h1>Message:</h1>
        {{ msg }}
    </div>
</template>

Then, add a comment between the h1 and the interpolation:

<template>
    <div class="foo">
        <h1>Message:</h1>
        <!-- A comment explaining the interpolation below -->
        {{ msg }}
    </div>
</template>

What is expected?

Adding the comment should not affect the output (other than the comment being added to the output in dev mode, perhaps)

What is actually happening?

Without the comment, a space is rendered between the tag and the interpolation (as expected). With the comment, that space is not rendered, which can cause layout issues. This only happens when the text is generated by an interpolation; if it's static text, the space is always there, regardless of whether there's a comment or not.

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 1.20 GB / 15.39 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.9.1/bin/yarn
    npm: 8.5.3 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Chromium: 103.0.5060.53
    Firefox: 102.0

Any additional comments?

No response

GitHub Track