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

Format Jinja/block tag in html tag opening #38

Closed UnknownPlatypus closed 3 months ago

UnknownPlatypus commented 3 months ago

Hello !

This patch tries to parse more precisely Jinja Tag & Block used inside html opening tags. I've tried to match the existing approach for Vue/svelte/astro. This is probably easier to review commit per commit to see the changes on the test snapshots.

Test cases are mostly real life anonymised snippets from my codebase at work.


For context, Prior to this change, jinja block / tags where formatted weirdly inside html tag opening because they where just split on spaces and considered a bunch of attributes. This resulted in this kind of formatting:

-<div {% if colored_with_absolute_dates %}colored-with-absolute-dates{% endif %} {% if colored_with_days %}colored-with-days{% endif %}>
-</div>
+<div
+    {%
+    if
+    colored_with_absolute_dates
+    %}colored-with-absolute-dates{%
+    endif
+    %}
+    {%
+    if
+    colored_with_days
+    %}colored-with-days{%
+    endif
+    %}
+>
+</div>

It was also failing to parse sometimes, for example if there is a == inside the tag because the parser was expecting a normal attr=value html attribute. For exemple, <details {% if category == "active" %}open{% endif %} ></details> could not be parsed.

g-plane commented 3 months ago

I try this code snippet <details {% if category == "active" %}open{% endif %} ></details> and I found that it works well, without any errors you said.

UnknownPlatypus commented 3 months ago

I try this code snippet <details {% if category == "active" %}open{% endif %} ></details> and I found that it works well, without any errors you said.

Oh sorry I was maybe not clear enough, it used to fail prior to this patch but is working well with this patch