Stillat/vscode-antlers-language-server

switch() alternate syntax is not supported

Opened this issue · 4 comments

godismyjudge95 commented

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
  • 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

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

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

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

  • 👍2
stefankempf commented

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>