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__ ```twig - <iframe class="" + <iframe + class="" src="https://www.google.com/maps/embed" frameborder="0" allowfullscreen></iframe> ```
zackad · Dec 8, 2024 · 44beb8d · 44beb8d
1 parent 39607a4
commit 44beb8d
Show file tree

Hide file tree

Showing 13 changed files with 44 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>