From 35d0537653ec35dcf37367f73c795e207f438131 Mon Sep 17 00:00:00 2001
From: zackad <zackad.dev@gmail.com>
Date: Sun, 8 Dec 2024 09:52:10 +0700
Subject: [PATCH] fix: properly indent html attribute when printed on multiline

__Input__
```twig
<iframe class=""
        src="https://www.google.com/maps/embed"
        frameborder="0"
        allowfullscreen></iframe>
```

__Output__
```diff
- <iframe class=""
+ <iframe
+     class=""
      src="https://www.google.com/maps/embed"
      frameborder="0"
      allowfullscreen></iframe>
```
---
 CHANGELOG.md                                  | 21 +++++++++++++++++++
 src/print/Element.js                          |  2 +-
 .../__snapshots__/forInclude.snap.twig        |  3 ++-
 .../__snapshots__/if.snap.twig                |  3 ++-
 .../__snapshots__/attributes.snap.twig        |  3 ++-
 .../__snapshots__/manyAttributes.snap.twig    |  3 ++-
 .../__snapshots__/selfClosing.snap.twig       |  3 ++-
 .../__snapshots__/mappingExpression.snap.twig |  3 ++-
 .../__snapshots__/objectExpression.snap.twig  |  3 ++-
 .../__snapshots__/controversial.snap.twig     |  3 ++-
 tests/Failing/__snapshots__/failing.snap.twig |  3 ++-
 .../Statements/__snapshots__/macro.snap.twig  |  3 ++-
 tests/smoke-test.twig                         |  3 ++-
 13 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cba32e8a..8a312707 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,27 @@
 ### Features
 - Add support for [empty coalesce operator](https://plugins.craftcms.com/empty-coalesce), a CraftCMS extension
 
+### Bugfixes
+- Fix indentation for html attribute when printed on multiline. All attribute will be indented on each line.
+
+__Input__
+```twig
+<iframe class=""
+    src="https://www.google.com/maps/embed"
+    frameborder="0"
+    allowfullscreen></iframe>
+```
+
+__Output__
+```twig
+- <iframe class=""
++ <iframe
++     class=""
+      src="https://www.google.com/maps/embed"
+      frameborder="0"
+      allowfullscreen></iframe>
+```
+
 ### Internals
 - Remove unused dependencies `resolve`
 
diff --git a/src/print/Element.js b/src/print/Element.js
index 87fa0e64..94f90ce2 100644
--- a/src/print/Element.js
+++ b/src/print/Element.js
@@ -16,7 +16,7 @@ const printOpeningTag = (node, path, print) => {
     const hasAttributes = node.attributes && node.attributes.length > 0;
 
     if (hasAttributes) {
-        return [opener, indent([" ", printedAttributes]), openingTagEnd];
+        return [opener, indent([line, printedAttributes]), openingTagEnd];
     }
     return [opener, openingTagEnd];
 };
diff --git a/tests/ControlStructures/__snapshots__/forInclude.snap.twig b/tests/ControlStructures/__snapshots__/forInclude.snap.twig
index b28f0edc..80bc11f2 100644
--- a/tests/ControlStructures/__snapshots__/forInclude.snap.twig
+++ b/tests/ControlStructures/__snapshots__/forInclude.snap.twig
@@ -1,5 +1,6 @@
 {% for foo in range(1, category) %}
-    <span key="{{ foo }}"
+    <span
+        key="{{ foo }}"
         class="qtp-item__star icon-ic icon-icn_star--white {{ foo }}">
         {% include './Star.twig' only %}
     </span>
diff --git a/tests/ControlStructures/__snapshots__/if.snap.twig b/tests/ControlStructures/__snapshots__/if.snap.twig
index c9130f78..16c0576d 100644
--- a/tests/ControlStructures/__snapshots__/if.snap.twig
+++ b/tests/ControlStructures/__snapshots__/if.snap.twig
@@ -7,7 +7,8 @@
 </div>
 
 {% if partner -%}
-    <img class="{{ {
+    <img
+        class="{{ {
             (css.logo): not useWiderItems,
             (css.logoWider): useWiderItems
         }|classes }}"
diff --git a/tests/Element/__snapshots__/attributes.snap.twig b/tests/Element/__snapshots__/attributes.snap.twig
index c3af0cb4..9d45bb43 100644
--- a/tests/Element/__snapshots__/attributes.snap.twig
+++ b/tests/Element/__snapshots__/attributes.snap.twig
@@ -1,6 +1,7 @@
 <a href="#abcd" target="_blank" lang="en">Link</a>
 
-<fantasy {{ {
+<fantasy
+    {{ {
         id: accommodation.id.id,
         ref: intersectionObserver|default,
         class: 'hotel-item item-order__list-item js_co_item',
diff --git a/tests/Element/__snapshots__/manyAttributes.snap.twig b/tests/Element/__snapshots__/manyAttributes.snap.twig
index 3c40261e..00eb7404 100644
--- a/tests/Element/__snapshots__/manyAttributes.snap.twig
+++ b/tests/Element/__snapshots__/manyAttributes.snap.twig
@@ -1,4 +1,5 @@
-<span attr1="one"
+<span
+    attr1="one"
     attr2="two"
     attr3="three"
     attr4="four"
diff --git a/tests/Element/__snapshots__/selfClosing.snap.twig b/tests/Element/__snapshots__/selfClosing.snap.twig
index 1649b47f..629f016d 100644
--- a/tests/Element/__snapshots__/selfClosing.snap.twig
+++ b/tests/Element/__snapshots__/selfClosing.snap.twig
@@ -1,6 +1,7 @@
 <input type="text" name="user" />
 
-<input attr1="one"
+<input
+    attr1="one"
     attr2="two"
     attr3="three"
     attr4="four"
diff --git a/tests/Expressions/__snapshots__/mappingExpression.snap.twig b/tests/Expressions/__snapshots__/mappingExpression.snap.twig
index bcac4929..31afb31c 100644
--- a/tests/Expressions/__snapshots__/mappingExpression.snap.twig
+++ b/tests/Expressions/__snapshots__/mappingExpression.snap.twig
@@ -51,7 +51,8 @@
 
 {% props theme = null, text = null %}
 
-<div {{
+<div
+    {{
     attributes.defaults({
         class: cva({
             base: 'alert shadow-md',
diff --git a/tests/Expressions/__snapshots__/objectExpression.snap.twig b/tests/Expressions/__snapshots__/objectExpression.snap.twig
index 8a139972..8d19ef36 100644
--- a/tests/Expressions/__snapshots__/objectExpression.snap.twig
+++ b/tests/Expressions/__snapshots__/objectExpression.snap.twig
@@ -7,7 +7,8 @@
     }
 }}
 
-<h1 class="{{ {
+<h1
+    class="{{ {
         ('hero__title--' ~ (locale|lower)): locale in ['CN', 'JP', 'DE', 'RU']
     }|classes }}">
     Heading
diff --git a/tests/Failing/__snapshots__/controversial.snap.twig b/tests/Failing/__snapshots__/controversial.snap.twig
index d1d4c0a0..cbc005f3 100644
--- a/tests/Failing/__snapshots__/controversial.snap.twig
+++ b/tests/Failing/__snapshots__/controversial.snap.twig
@@ -7,7 +7,8 @@
 {% set isRewardRate = isMarriottRewardRate or (rewardRateAltIds and deal.dealId in altIds) %}
 
 <!-- Always break objects -->
-<section class="{{ {
+<section
+    class="{{ {
         base: css.prices
     } | classes }}"></section>
 
diff --git a/tests/Failing/__snapshots__/failing.snap.twig b/tests/Failing/__snapshots__/failing.snap.twig
index 35e38d10..27bb6099 100644
--- a/tests/Failing/__snapshots__/failing.snap.twig
+++ b/tests/Failing/__snapshots__/failing.snap.twig
@@ -38,7 +38,8 @@
 {# Inserts a newline where it shouldn't #}
 <span class="rat-chart__bar">
     <span class="rat-chart__bar-holder">
-        <span class="rat-chart__bar-content rat-color--{{ valueIndex }}"
+        <span
+            class="rat-chart__bar-content rat-color--{{ valueIndex }}"
             {{ {
                 style: width
             } | attrs }}>
diff --git a/tests/Statements/__snapshots__/macro.snap.twig b/tests/Statements/__snapshots__/macro.snap.twig
index e01f3a3e..ff1d2643 100644
--- a/tests/Statements/__snapshots__/macro.snap.twig
+++ b/tests/Statements/__snapshots__/macro.snap.twig
@@ -13,7 +13,8 @@
     sky,
     hedgehog)
 %}
-    <input type="{{ type }}"
+    <input
+        type="{{ type }}"
         name="{{ name }}"
         value="{{ value|e }}"
         size="{{ size }}" />
diff --git a/tests/smoke-test.twig b/tests/smoke-test.twig
index 6aadbe66..1a5531f4 100644
--- a/tests/smoke-test.twig
+++ b/tests/smoke-test.twig
@@ -2,7 +2,8 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport"
+        <meta
+            name="viewport"
             content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title>