g-plane / markup_fmt

Configurable HTML, Vue, Svelte, Astro, Angular, Jinja, Twig, Nunjucks and Vento formatter with dprint integration.
https://dprint.dev/plugins/markup_fmt/
MIT License
100 stars 9 forks source link

Invalid offset when formatting multiline attr value #39

Closed UnknownPlatypus closed 3 months ago

UnknownPlatypus commented 3 months ago

Hi!

This mostly fix the issue I currently have with multiline style attribute getting weirdly indented.

<div class="ds-flex ds-flex-col ds-items-center ds-absolute ds-z-10 {% if title|length > 30 %}ds-w-4/5{% else %}ds-w-1/2{% endif %}"
     style="top:60%;
            transform:translate(0,-50%)">
</div>

is changed to

<div
  class="ds-flex ds-flex-col ds-items-center ds-absolute ds-z-10 {% if title|length > 30 %}ds-w-4/5{% else %}ds-w-1/2{% endif %}"
  style="top:60%;
            transform:translate(0,-50%)"
>
</div>

Every time some kind of wrapping occurred, and the attr value is on multiple lines, the indent is not preserved.

I also tried to avoid disruption for another common style of multiline style attribute (Prettier for ex)

<div
    class="ds-flex ds-flex-col ds-items-center ds-absolute ds-z-10 {% if title|length > 30 %}ds-w-4/5{% else %}ds-w-1/2{% endif %}"
    style="
        top: 60%;
        transform: translate(0, -50%);
    "
></div>

I'm marking this as draft because it's not actually addressing the problem, it's a workaround. I was not able to find the offset between the initial indent level and the formatted indent level :/ .

I think the issue could probably be solved by proper value formatting using malva maybe ? This would be awesome:

g-plane commented 3 months ago

Maybe using with Malva should be better. I'll do it.

UnknownPlatypus commented 3 months ago

Maybe using with Malva should be better. I'll do it.

Thanks! Would be awesome :raised_hands: