Skip to content

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

Closed
@catrope

Description

@catrope

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

Activity

added a commit that references this issue on Nov 8, 2022
4887618
added a commit that references this issue on Feb 4, 2023
972ffc5
added a commit that references this issue on Apr 12, 2023
142252a
locked and limited conversation to collaborators on Sep 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @catrope

      Issue actions

        Whitespace is removed when a comment appears between a tag and an interpolation · Issue #6352 · vuejs/core