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

Prettier plugin causes extra spacing inside HTML tags #101

Open
efc opened this issue Nov 27, 2024 · 0 comments
Open

Prettier plugin causes extra spacing inside HTML tags #101

efc opened this issue Nov 27, 2024 · 0 comments

Comments

@efc
Copy link

efc commented Nov 27, 2024

Describe the bug
When using the Prettier plugin prettier-plugin-antlers some of my HTML tags end up with extra spacing before and after the tag because they are wrapped onto separate lines.

Impacted Products
Which Antlers Toolbox products does this bug apply to?

Antlers Prettier Plugin

Versions and Other Plugins/Extensions
These are the versions of Prettier and the two plugins I have installed...

        "prettier": "^3.4.1",
        "prettier-plugin-antlers": "^2.0.5",
        "prettier-plugin-tailwindcss": "^0.6.9",

The installed versions are the ones shown here.

To Reproduce
Create an example.html file with this content.

<header>
    <nav>
        <ul>
            {{ if collection == "software" or slug == "software" }}
            <li>
                {{ if 1 }}
                <a href="/short" class="text-black">Short</a>
                {{ /if }}
            </li>
            {{ /if }} {{ if collection == "press" or slug == "press" }}
            <li>
                {{ if 1 }}
                <a href="/long" class="text-black">A Much Longer Label</a>
                {{ /if }}
            </li>
            {{ /if }}
        </ul>
    </nav>
</header>

As formatted by Prettier this looks pretty bad from the Antlers perspective, but notice that the spacing inside HTML tag pairs is left intact.

Now create another file named example.antlers.html with the same content in it. After formatting the content with Prettier it will now look like this...

<header>
    <nav>
        <ul>
            {{ if collection == "software" or slug == "software" }}
                <li>
                    {{ if 1 }}
                        <a href="/short" class="text-black">Short</a>
                    {{ /if }}
                </li>
            {{ /if }}
            {{ if collection == "press" or slug == "press" }}
                <li>
                    {{ if 1 }}
                        <a href="/long" class="text-black">
                            A Much Longer Label
                        </a>
                    {{ /if }}
                </li>
            {{ /if }}
        </ul>
    </nav>
</header>

Note the extra spacing around the "much longer" label. In HTML this extra space is (unfortunately) significant and in our case the result is noticeably different. While the Antlers code looks better, the actual HTML is "broken."

Expected behavior
I expect the prettier-plugin-antlers to leave all spacing inside HTML tags intact. This means that it cannot add line breaks for Antlers code either, unless that code is outside of a tag.

Alternatively, I need the plugin to at least respect HTML spacing and not add new line breaks inside HTML code that does not include further Antlers tags.

If submitting a formatting bug, please include the template contents below as well as an attachment
I've included that above in the reproduction section.

Additional context
None.

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

No branches or pull requests

1 participant