switch() alternate syntax is not supported

godismyjudge95 commented 7 months ago

Describe the bug It formats the alternate switch() syntax in a very funky manner

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

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

Versions and Other Plugins/Extensions prettier-plugin-antlers - 2.0.1

To Reproduce Paste in the template code and format.

Expected behavior It formats properly

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

<div>
    <div>
        <div
            class="{{ '' | tw_merge('flex-initial flex flex-col items-start justify-center', switch(
                                                                           (content_width === '75') => 'md:basis-3/4',
                                                                           (content_width === '25') => 'md:basis-full max-w-5xl items-center',
                                                                           ), switch(
                                                                               (background_color === 'white' || background_color === 'gray') => 'text-black',
                                                                               (background_color === 'charcoal') => 'text-white antialiased',
                                                                               ), switch(
                                                                                   (padding === 'left' && image_position === 'right') => 'content:ml-breakout pl-5',
                                                                                   (padding === 'right' && image_position === 'left') => 'content:mr-breakout pr-5',
                                                                                   ), ) }}"
        >
        </div>
    </div>
</div>

JohnathonKoster commented 7 months ago

The original intent was to have it indent below where it was used initially (but can see that first relative indentation is misaligned correctly). Opened to others ideas, but otherwise would just be looking to fix that first round of indentation

godismyjudge95 commented 7 months ago

I was expecting it to format something like so:

<div>
    <div>
        <div
            class="{{ '' | tw_merge(
                      'flex-initial flex flex-col items-start justify-center',
                      switch(
                          (content_width === '75') => 'md:basis-3/4',
                          (content_width === '25') => 'md:basis-full max-w-5xl items-center',
                      ),
                      switch(
                          (background_color === 'white' || background_color === 'gray') => 'text-black',
                          (background_color === 'charcoal') => 'text-white antialiased',
                      ),
                      switch(
                          (padding === 'left' && image_position === 'right') => 'content:ml-breakout pl-5',
                          (padding === 'right' && image_position === 'left') => 'content:mr-breakout pr-5',
                      ),
                  ) }}"
        >
        </div>
    </div>
</div>

I realize this is purely a matter of opinion, but the way it formats it right now means any time I use a switch call I am having to disable prettier for that file (not ideal).

JohnathonKoster commented 7 months ago

I'll do some thinking and experimenting to see what I can come up with 🤝

stefankempf commented 4 months ago

Maybe another short addition: In my case, I often have a negative indentation which makes the code hard to read.

<html>
    <body>
        <main
            data-transition-namespace="{{ switch(
    (current_template == 'projekte/index') => 'projectIndex',
    () => 'default') }}">
    </body>
</html>

Stillat / vscode-antlers-language-server

switch() alternate syntax is not supported #81