Formatting commented out code continuously adds indentation

[jasonlbeggs]

Following the changes that fixed #61, every time I save this file with commented out code, the code keeps indenting further and further. This specific commented code doesn't get formatted as well.

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

• [ ] Antlers Toolbox for VS Code
• [ ] Antlers Toolbox for VS Code Formatter
• [ ] Formatter CLI
• [x] Antlers Prettier Plugin
• [ ] Antlers Syntax Highlighting (external systems - not VS Code)

Versions and Other Plugins/Extensions

"prettier-plugin-antlers": "^1.1.25",

To Reproduce Add the code below to an Antlers file and format it.

Expected behavior The code inside the comment to be formatted with proper indentation.

If submitting a formatting bug, please include the template contents below as well as an attachment

{{#
    <div class="mt-10 flex flex-wrap items-center justify-center gap-2 lg:mt-14">
    <a
    href="/register"
    class="inline-flex shrink-0 items-center gap-2.5 rounded-full bg-pink-600 px-4 py-2 text-lg font-medium text-white transition hover:bg-pink-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-1 md:text-xl lg:px-6 lg:py-4 lg:text-2xl"
    >
    <span>Get started for free</span>
    <img
    src="/assets/icons/arrow-right.svg"
    aria-hidden="true"
    class="w-4 lg:w-5"
    />
    </a>
    <button
    x-data
    @click.prevent="dispatchEvent(new CustomEvent('toggle-dialog', { detail: 'cta-video' }));"
    class="inline-flex shrink-0 items-center gap-2.5 rounded-full bg-transparent px-4 py-2 text-lg font-medium text-pink-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-600 md:text-xl lg:px-6 lg:py-4 lg:text-2xl"
    >
    <img
    src="/assets/icons/play.svg"
    aria-hidden="true"
    class="w-5 lg:w-auto"
    />
    <span>Watch Clarityflow video</span>
    </button>
    {{ partial:dialog name='cta-video' }}
    <iframe
    class="aspect-video w-full"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    loading="lazy"
    ></iframe>
    {{ /partial:dialog }}
    </div>
#}}

Additional context I'm also using prettier-plugin-tailwindcss if that matters.

[JohnathonKoster]

Interesting - I wouldn't have expected it to format code inside comments (since it could contain invalid pairs/etc.) - but I think I can get something figured out 🙂

[jasonlbeggs]

I think I'm fine with it not formatting code inside comments as long as it doesn't screw the formatting existing formatting up (flattening or adding indentation).

[JohnathonKoster]

I am working to fix the duplicate indentation, but if the comment itself was indented I would expect it to add indentation in that case. Otherwise you would end up with situations like so:

                     {{#
Comment
Line 2
Line 3
                     #}}

[jasonlbeggs]

The problem is, it adds a level of indentation every time I save the file instead of maintaining the correct amount of indentation.

So save one is something like this:

                     {{#
                         Comment
                         Line 2
                         Line 3
                     #}}

Save again and it turns into:

                     {{#
                             Comment
                             Line 2
                             Line 3
                     #}}

Save again and it turns into:

                     {{#
                                 Comment
                                 Line 2
                                 Line 3
                     #}}

etc. Make sense?

[JohnathonKoster]

Yes. That is what I am fixing.

[jasonlbeggs]

Awesome. Thanks!

[JohnathonKoster]

Alrighty, I just pushed a new version - given this input:

<div>
<div>
{{#
    <div class="mt-10 flex flex-wrap items-center justify-center gap-2 lg:mt-14">
    <a
    href="/register"
    class="inline-flex shrink-0 items-center gap-2.5 rounded-full bg-pink-600 px-4 py-2 text-lg font-medium text-white transition hover:bg-pink-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-1 md:text-xl lg:px-6 lg:py-4 lg:text-2xl"
    >
    <span>Get started for free</span>
    <img
    src="/assets/icons/arrow-right.svg"
    aria-hidden="true"
    class="w-4 lg:w-5"
    />
    </a>
    <button
    x-data
    @click.prevent="dispatchEvent(new CustomEvent('toggle-dialog', { detail: 'cta-video' }));"
    class="inline-flex shrink-0 items-center gap-2.5 rounded-full bg-transparent px-4 py-2 text-lg font-medium text-pink-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-600 md:text-xl lg:px-6 lg:py-4 lg:text-2xl"
    >
    <img
    src="/assets/icons/play.svg"
    aria-hidden="true"
    class="w-5 lg:w-auto"
    />
    <span>Watch Clarityflow video</span>
    </button>
    {{ partial:dialog name='cta-video' }}
    <iframe
    class="aspect-video w-full"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    loading="lazy"
    ></iframe>
    {{ /partial:dialog }}
    </div>
#}}
</div>
</div>

and reformatting the output 10 times will produce this (feeding the formatted code back into itself repeatedly):

<div>
    <div>
        {{#
            <div class="mt-10 flex flex-wrap items-center justify-center gap-2 lg:mt-14">
                <a
                    href="/register"
                    class="inline-flex shrink-0 items-center gap-2.5 rounded-full bg-pink-600 px-4 py-2 text-lg font-medium text-white transition hover:bg-pink-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-1 md:text-xl lg:px-6 lg:py-4 lg:text-2xl"
                >
                    <span>Get started for free</span>
                    <img
                        src="/assets/icons/arrow-right.svg"
                        aria-hidden="true"
                        class="w-4 lg:w-5"
                    />
                </a>
                <button
                    x-data
                    @click.prevent="dispatchEvent(new CustomEvent('toggle-dialog', { detail: 'cta-video' }));"
                    class="inline-flex shrink-0 items-center gap-2.5 rounded-full bg-transparent px-4 py-2 text-lg font-medium text-pink-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pink-600 md:text-xl lg:px-6 lg:py-4 lg:text-2xl"
                >
                    <img
                        src="/assets/icons/play.svg"
                        aria-hidden="true"
                        class="w-5 lg:w-auto"
                    />
                    <span>Watch Clarityflow video</span>
                </button>
                {{ partial:dialog name='cta-video' }}
                    <iframe
                        class="aspect-video w-full"
                        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
                        title="YouTube video player"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen
                        loading="lazy"
                    ></iframe>
                {{ /partial:dialog }}
            </div>
        #}}
    </div>
</div>

[jasonlbeggs]

Looks great!

[JohnathonKoster]

Fantastic! I'll leave this issue open for now as a reminder to double check a few other edge case scenarios when I have more time this evening and update the other formatter packages and VS Code extension

[jasonlbeggs]

Confirmed fixed on my project ✅