[BUG] [Formatter] Formatting breaks if/else chains in html attributes

[kageurufu]

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

System Info

• OS: Arch Linux on WSL2
• Python Version: 3.10.2
• djLint Version: 0.7.5
• template language: jinja2

Issue

The formatted is breaking attributes containing templates including more double quotes.

Sample HTML to reproduce is

<a target="_blank" href="
    {%- if entry["type"] == "Bank Deposit" -%}
        {{ url_for("accounting.receivable.bank_deposit.bank_deposit", bank_deposit_id=entry["id"]) }}
    {%- elif entry["type"] == "Journal Entry Line" -%}
        {{ url_for("accounting.journal_entries.journal_entry", journal_entry_id=entry["id"]) }}
    {%- elif entry["type"] == "Payment" -%}
        {{ url_for("invoice.view_payment", payment_id=entry["id"]) }}
    {%- elif entry["type"] == "Payment Transaction" -%}
        {{ url_for("invoice.transaction.transaction", id=entry["id"]) }}
    {%- elif entry["type"] == "Receipt" -%}
        {{ url_for("accounting.receivable.receipt.receipt", receipt_id=entry["id"]) }}
    {%- endif -%}
    ">

The result I get is

<a target="_blank"
   href=" {%- if entry["type"] == "Bank Deposit" -%} {{ url_for("
     accounting
     receivable
     bank_deposit
     bank_deposit
     bank_deposit_id
     entry
     id
   {%- elif entry["type"] == "Journal Entry Line" -%}
     {{ url_for("accounting.journal_entries.journal_entry", journal_entry_id=entry["id"]) }}
   {%- elif entry["type"] == "Payment" -%}
     {{ url_for("invoice.view_payment", payment_id=entry["id"]) }}
   {%- elif entry["type"] == "Payment Transaction" -%}
     {{ url_for("invoice.transaction.transaction", id=entry["id"]) }}
   {%- elif entry["type"] == "Receipt" -%}
     {{ url_for("accounting.receivable.receipt.receipt", receipt_id=entry["id"]) }}
   {%- endif -%}>

Additionally, when formatting the following with or without format_attribute_template_tags enabled, the reformatting will collapse the template into one line

<a target="_blank" href="
    {%- if entry['type'] == 'Bank Deposit' -%}
        {{ url_for('accounting.receivable.bank_deposit.bank_deposit', bank_deposit_id=entry['id']) }}
    {%- elif entry['type'] == 'Journal Entry Line' -%}
        {{ url_for('accounting.journal_entries.journal_entry', journal_entry_id=entry['id']) }}
    {%- elif entry['type'] == 'Payment' -%}
        {{ url_for('invoice.view_payment', payment_id=entry['id']) }}
    {%- elif entry['type'] == 'Payment Transaction' -%}
        {{ url_for('invoice.transaction.transaction', id=entry['id']) }}
    {%- elif entry['type'] == 'Receipt' -%}
        {{ url_for('accounting.receivable.receipt.receipt', receipt_id=entry['id']) }}
    {%- endif -%}
    ">

How To Reproduce

format either provided template

Our settings

[tool.djlint]
indent = 2
profile = "jinja"
max_line_length = 120
blank_line_after_tag = "from,import,endblock"
custom_blocks = "debug,permission"
ignore = "H017,T003"
# format_attribute_template_tags = true

[PetrDlouhy]

I have similar problem with Django templates:

-                <img
-                    {% if value.image.file.url|split:"."|last|lower == "gif" %}
-                        src="{{value.image.file.url}}"
-                    {% else %}
-                        {% image value.image fill-640x360   as block_image_640 %}
-                        {% image value.image fill-768x432   as block_image_768 %}
-                        {% image value.image fill-1024x576  as block_image_1024 %}
-                        {% image value.image fill-1600x900  as block_image_1600 %}
-                        data-src="{{ block_image_640.url }}"
-                        data-srcset="
-                            {{ block_image_640.url }} 640w,
-                            {{ block_image_768.url }} 768w,
-                            {{ block_image_1024.url }} 1024w,
-                            {{ block_image_1600.url }} 1600w
-                        "
-                        sizes="(min-width: 1200px) 458px, (min-width: 992px) 374px, (min-width: 768px) 720px, calc(100vw - 30px)"
-                    {% endif %}
-                    class="richtext-image imageblock overflow {{ value.image_position }} lazy"
-                    title="{{ value.image.title }}"
-                    alt="Block image"
-                />
+                <img {% if value.image.file.url|split:"."|last|lower == "gif" %} src="{{ value.image.file.url }}" {% else %} {% image value.image fill-640x360   as block_image_640 %} {% image value.image fill-768x432   as block_image_768 %} {% image value.image fill-1024x576  as block_image_1024 %} {% image value.image fill-1600x900  as block_image_1600 %} data-src="{{ block_image_640.url }}" data-srcset=" {{ block_image_640.url }} 640w, {{ block_image_768.url }} 768w, {{ block_image_1024.url }} 1024w, {{ block_image_1600.url }} 1600w " sizes="(min-width: 1200px) 458px, (min-width: 992px) 374px, (min-width: 768px) 720px, calc(100vw - 30px)" {% endif %}
+                     class="richtext-image imageblock overflow {{ value.image_position }} lazy"
+                     title="{{ value.image.title }}"
+                     alt="Block image"/>

I am not sure why it does that, while on most other places it splits the long lines rather nicely.

[Kakadus]

I am experiencing this bug as well and were able to construct a minimal example.
With

<a {% if cond %} class="somelongclass {% if cond2 %}otherlongclass{% endif %} anotherlongclass"{% endif %}></a>

the nested ifs break the code:

<a {% if cond %} class="somelongclass {% if cond2 %}otherlongclass{% endif %}
    anotherlongclass
{% endif %}></a>

Configuration with pyproject.toml:

[tool.djlint]
profile = "django"
format_attribute_template_tags = false

With format_attribute_template_tags = true, everything is reformatted as

<a {% if cond %}
       class="somelongclass
              {% if cond2 %}
                  otherlongclass
              {% endif %}
              anotherlongclass
          {% endif %}></a>

[christopherpickering]

Thanks, I'm putting a release that updates how attributes are parsed and will fix this issue.

However, in this update, we will no longer be splitting href's into multiple lines per #427, but if you were have syntax like this in other attributes it will be fixed.

@Kakadus thanks, the nested if statements is a separate problem, I'll open a new issue for that.

[christopherpickering]

@PetrDlouhy Thanks!

I will open a separate issue for this.
When using the format_attribute_template_tags = true the {% image %} blocks should be on their own line.

[christopherpickering]

🎉 This issue has been resolved in version 1.19.4 🎉

The release is available on:

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

Your semantic-release bot 📦🚀