[BUG] [Formatter] <a> tags cause incorrect formatting

[MrP01]

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

System Info

• OS: ubuntu 21.10
• Python Version 3.9.7
• djLint Version 0.7.4
• template language: e.g. Jinja2

Issue

When reformatting a ".jinja2" html document, the indentation breaks after an <a> tag. I've observed this multiple times now.

The code looks like this:

How To Reproduce

<a class="btn btn-primary"
 href="{{ url("url") }}"
 title="{{ _("Title") }}">
  <span class="iconify" data-icon="mdi:camera"></span> {{ _("Analyse your image!") }}</a>
<div class="popup beautiful-popup" id="analysis-options">
  <h4>{{ _("Options") }}</h4> [...]
</div>

After reformatting it in VSCode using the djLint plugin, I obtain the following:

<a class="btn btn-primary"
   href="{{ url("url") }}"
   title="{{ _("Title") }}">
  <span class="iconify" data-icon="mdi:camera"></span> {{ _("Analyse your image!") }}</a>
  <div class="popup beautiful-popup" id="analysis-options">
    <h4>{{ _("Options") }}</h4> [...]
  </div>

So the <div>-Tag is incorrectly indented by one extra indentation level. And so is the rest of the document after that point!

However, if I manually put the code in the following way (i.e. insert line breaks):

<a class="btn btn-primary"
   href="{{ url("url") }}"
   title="{{ _("Title") }}">
    <span class="iconify" data-icon="mdi:camera"></span>
    {{ _("Analyse your image!") }}
    </a>
<div class="popup beautiful-popup" id="analysis-options">
  <h4>{{ _("Options") }}</h4> [...]
</div>

then it will be correctly indented like so:

<a class="btn btn-primary"
   href="{{ url("url") }}"
   title="{{ _("Title") }}">
  <span class="iconify" data-icon="mdi:camera"></span>
  {{ _("Analyse your image!") }}
</a>
<div class="popup beautiful-popup" id="analysis-options">
  <h4>{{ _("Options") }}</h4> [...]
</div>

I believe it is not related to the <a> tag but to some peculiar property with the {{}} tags or similar.

The formatting should not be dependent on formatting in the initial document, as long as everything is valid xml, I think at least.

[MrP01]

I've noticed a similar problem with {% trans %}{% endtags %} tags.

[christopherpickering]

Hey @MrP01 thanks for reporting, I think this is fixed in the master branch. (I can't reproduce on master) I'm planning a release today with the latest fixes, would you mind to retest on your end after I release?

[MrP01]

Sure! Thank you very much :)

$ djlint --version
djlint, version 0.7.5

The error keeps happening, it's still the same behavior.

[christopherpickering]

OK shucks, can you try to send your code again, maybe w/out the ````` around it? I wonder if github is fixing the format when it highlights it?

[christopherpickering]

Also, do you have any config in your pyproject.toml for djlint?

[MrP01]

Right! This is my config:

[project]
(...)
python = "^3.8"

[tool.black]
line-length = 120
target-version = ["py38"]

[tool.pylint.MASTER]
max-line-length = 120

[tool.pylint.messages_control]
disable = ["invalid-name"]

I run the following command

djlint test.jinja --reformat --indent 2

on the file "test.jinja" with the badly formatted content described above. As requested, here it is with spacebar escaping instead of ```:

<a class="btn btn-primary"
  href="{{ url('analysis:analyse_image') }}"
  title="{{ _("Take a photo of your Latin text and let the text recognition scan your image and extract the text from it!") }}">
  <span class="iconify" data-icon="mdi:camera"></span>{{ _("Analyse your image!") }}</a>
  <div class="popup beautiful-popup" id="analysis-options">
    <h4>{{ _("Options") }}</h4>
    [...]
  </div>

[christopherpickering]

my bad, thanks! I was missing your point. I'll put an update out in a few. We don't add breaks around or tags as they are both traditionally inline.

The output will look like this:

<a class="btn btn-primary"
   href="{{ url('analysis:analyse_image') }}"
   title="{{ _("Take a photo of your Latin text and let the text recognition scan your image and extract the text from it!") }}">
    <span class="iconify" data-icon="mdi:camera"></span>{{ _("Analyse your image!") }}</a>
<div class="popup beautiful-popup" id="analysis-options">
    <h4>{{ _("Options") }}</h4>
    [...]
</div>

If you would like breaks about the tags, you should be able to do it by adding to your config:

[tool.djlint]
custom_html="a"

which will give you html looking like this:

<a class="btn btn-primary"
   href="{{ url('analysis:analyse_image') }}"
   title="{{ _("Take a photo of your Latin text and let the text recognition scan your image and extract the text from it!") }}">
    <span class="iconify" data-icon="mdi:camera"></span>{{ _("Analyse your image!") }}
</a>
<div class="popup beautiful-popup" id="analysis-options">
    <h4>{{ _("Options") }}</h4>
    [...]
</div>

[christopherpickering]

Hey @MrP01 sorry this is taking longer than planned, several other tests failed after I made the update. I'm working on updating how the html is parsed (for another issue) and will close this out at the same time.

[MrP01]

Don't worry, thank you so much!

[kirberich]

Hi! We just upgraded to the last version and I think this fix might have introduced the opposite issue in other circumstances, here's a small example of how 0.7.6 formats some simple html in inconsistent ways

<div>
    <div>
        <span>Fine</span>
    </div>
</div>
<div>
    <div>
        <span>Not</span>fine
</div>
</div>
<div>
    <div>
        <span>And</span>fine<span>again</span>
    </div>
</div>

Config used:

[tool.djlint]
profile = "django"
max_line_length = 100
use_gitignore = true

[christopherpickering]

Thanks for reporting!

[christopherpickering]

It seems like both cases here are fixed in the latest releases. Sorry for taking so long to report back. Please open another issue if you have more formatting problems!

[MrP01]

Indeed it seems to work! :)

Thanks!