Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
catrope opened this issue Jul 26, 2022 · 0 comments · Fixed by #6828
Closed

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

catrope opened this issue Jul 26, 2022 · 0 comments · Fixed by #6828

Comments

@catrope
Copy link
Contributor

catrope commented Jul 26, 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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant