Strange behavior with multiline strings

[benrbowers]

I am using alpinejs + templ + tailwind and for the most part this plugin works great for reordering classes. However, when using complex multiline strings, it starts to bungle things up.

For example, this:

<button
  :class="
    (intent !== '' ? 'cursor-not-allowed ' : 'cursor-pointer ')
    + (intent === 'accept' ? 'opacity-50 ' : '')
    + 'bg-red-500 rounded-md px-4 py-2 font-semibold text-white'
  "
  :disabled="intent !== ''"
  type="submit"
>

Gets turned into this:

<button
  :class="(intent !== '' ? 'cursor-not-allowed ' : 'cursor-pointer ') + (intent === 'accept' ? 'opacity-50 ' : '') + 'bg-red-500 rounded-md' px-4 py-2 font-semibold text-white"
  :disabled="intent !== ''"
  type="submit"
>

If no easy fix is possible, perhaps an option to disable for only multiline strings?

Luckily I don't have classes that complex in most of my files so I can just format those individually. But this does unfortunately mean that I cannot safely format my entire project in bulk.

[marvincaspar]

I have a similar issue. I have multiple classes in the single quote and it formats it not corrects

    <header
        class="header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent"
        @scroll.window="stickyHeader = (window.scrollY > 80) ? true : false"
        :class="stickyHeader ? 'transition shadow-sticky !fixed z-[9999] !bg-white !bg-opacity-80 shadow-sticky backdrop-blur-sm' : ''"
    >

After formatting the last single quote is in the middle of the string. This breaks alpine to apply the classes correctly

    <header
        class="header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent"
        @scroll.window="stickyHeader = (window.scrollY > 80) ? true : false"
        :class="stickyHeader ? 'transition shadow-sticky': '' !fixed z-[9999] !bg-white !bg-opacity-80 shadow-sticky backdrop-blur-sm"
    >

I tired to use // prettier-ignore or // prettier-ignore-attribute but this seems to be ignored

[benrbowers]

Best workaround I have found so far is to put all complex/multiline strings in golang backticks like so:

<i
  :class={ `
    'fa-solid fa-2xs fa-chevron-up transition-transform'
    + (open ? ' rotate-180' : '')
  ` }
></i>

The formatter will not touch those strings.

So, while we still can't get ordering for multiline strings, we can at least reliably run the formatter over the whole codebase without messing up the multiline strings.