djlint / djLint

✨ HTML Template Linter and Formatter. Django - Jinja - Nunjucks - Handlebars - GoLang
https://djLint.com
GNU General Public License v3.0
688 stars 84 forks source link

[BUG] [Formatter] `line_break_after_multiline_tag` not always breaking as expected #680

Closed malo-malo closed 1 year ago

malo-malo commented 1 year ago

System Info

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 commented 1 year ago

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

malo-malo commented 1 year ago

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 commented 1 year ago

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

image

image

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

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 commented 1 year ago

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

christopherpickering commented 1 year ago

:tada: This issue has been resolved in version 1.31.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: