[BUG] [Formatter] line_break_after_multiline_tag not always breaking as expected

[malo-malo]

• I'm on the latest version of djLint
• I've searched the issues
• I've read the docs

System Info

• OS: ubuntu 20.04
• Python Version 3.8.10
• djLint Version 1.30.0
• template language: django templates

Issue

Hi ! I'm trying the new line_break_after_multiline_tag=true option, which is pretty nice.

I have run into a difference in behaviour depending on tags, and was wondering if all could behave alike (like the div in the following example). I have noticed this mostly on <a> tags.

How To Reproduce

Here is the initial situation, I would expect it to remain identical after reformatting

<div class="ds-flex ds-items-center ds-justify-center"
     style="grid-column: 3/4">
    {{ here_is_a_long_variable }}
</div>
<span class="ds-flex ds-items-center ds-justify-center"
      style="grid-column: 3/4">
    {{ here_is_a_long_variable }}
</span>

After reformating, the span gets condensed on one line, whereas the div does not :

<div class="ds-flex ds-items-center ds-justify-center"
     style="grid-column: 3/4">
    {{ here_is_a_long_variable }}
</div>
<span class="ds-flex ds-items-center ds-justify-center"
      style="grid-column: 3/4">{{ here_is_a_long_variable }}</span>

[christopherpickering]

Thanks :) What is your config? With the default options it seems to work as expected.

[malo-malo]

Here is my current config :

[tool.djlint]
require_pragma = true
profile = "django"
custom_blocks = "stage, cache, flatblock, section, csp_compress"
ignore_blocks = "set_global_context"
custom_html = "..."
blank_line_after_tag = "extends, endblock"
max_line_length = 120
line_break_after_multiline_tag = true
ignore = "H021,H023,H030,H031"

I've just tested again and span might not be the correct example (although I'm pretty sure it did not work an hour ago ...), with an a tag however I am able to reproduce :

<a class="ds-flex ds-items-center ds-justify-center"
   style="grid-column: 3/4">
    {{ here_is_a_long_variable }}
</a>

becomes

<a class="ds-flex ds-items-center ds-justify-center"
   style="grid-column: 3/4">{{ here_is_a_long_variable }}</a>

[christopherpickering]

Thanks, I see what is going on now. I updated the online demo so we can run there:

In the code, we are still condensing if the sum of the parts is less than your max line length.

It is a bit confusing and not exactly following the name of the flag.

We should probably update it so that if there is a break inside the tag then we ALWAYS break the tag contents as you were execting.

[malo-malo]

Thanks for the detailed explanation, always breaking the tag content does sound good to me. And thank you for updating the online demo !

[christopherpickering]

🎉 This issue has been resolved in version 1.31.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀