From ae954f9b2dea3849ca66a5357e1e4dc4c88aa7e5 Mon Sep 17 00:00:00 2001
From: Giorgio Garofalo <giogar2705@gmail.com>
Date: Sun, 23 Jun 2024 14:43:21 +0200
Subject: [PATCH] Improve `Stacked` HTML rendering code

---
 .../rendering/html/QuarkdownHtmlNodeRenderer.kt       | 11 ++++++-----
 .../eu/iamgio/quarkdown/test/FullPipelineTest.kt      | 10 +++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
index 021798b7..907c129b 100644
--- a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
+++ b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
@@ -58,17 +58,18 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
     override fun visit(node: Aligned) = div("align align-" + node.alignment.name.lowercase(), node.children)
 
     override fun visit(node: Stacked): CharSequence {
-        return tagBuilder("div", node.children)
-            .attribute("class", "stack stack-" + node.orientation.asCSS)
-            .style {
+        return div("stack stack-${node.orientation.asCSS}") {
+            +node.children
+
+            style {
                 "justify-content" value node.mainAxisAlignment
                 "align-items" value node.crossAxisAlignment
                 "gap" value node.gap
             }
-            .build()
+        }
     }
 
-    override fun visit(node: Clipped) = div("clip-" + node.clip.asCSS, node.children)
+    override fun visit(node: Clipped) = div("clip-${node.clip.asCSS}", node.children)
 
     override fun visit(node: Box) =
         div("box") {
diff --git a/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt b/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
index cf30caec..32ff2c1e 100644
--- a/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
+++ b/test/src/test/kotlin/eu/iamgio/quarkdown/test/FullPipelineTest.kt
@@ -224,7 +224,7 @@ class FullPipelineTest {
             """.trimIndent(),
         ) {
             assertEquals(
-                "<div class=\"stack stack-horizontal\" style=\"justify-content: flex-start; align-items: center;\">" +
+                "<div style=\"justify-content: flex-start; align-items: center;\" class=\"stack stack-horizontal\">" +
                     "<p>Hello 1\nHello 2</p><p>Hello 3</p>" +
                     "</div>",
                 it,
@@ -242,7 +242,7 @@ class FullPipelineTest {
             """.trimIndent(),
         ) {
             assertEquals(
-                "<div class=\"stack stack-vertical\" style=\"justify-content: space-between; align-items: flex-start; gap: 1.0cm;\">" +
+                "<div style=\"justify-content: space-between; align-items: flex-start; gap: 1.0cm;\" class=\"stack stack-vertical\">" +
                     "<p>Hello 1</p>" +
                     "<h2>Hello 2</h2>" +
                     "<pre><code>Hello 3</code></pre>" +
@@ -272,11 +272,11 @@ class FullPipelineTest {
             """.trimIndent(),
         ) {
             assertEquals(
-                "<div class=\"stack stack-horizontal\" style=\"justify-content: center; align-items: center; gap: 200.0px;\">" +
-                    "<div class=\"stack stack-vertical\" style=\"justify-content: flex-start; align-items: flex-end;\">" +
+                "<div style=\"justify-content: center; align-items: center; gap: 200.0px;\" class=\"stack stack-horizontal\">" +
+                    "<div style=\"justify-content: flex-start; align-items: flex-end;\" class=\"stack stack-vertical\">" +
                     "<h1>Quarkdown</h1><p>A cool language</p>" +
                     "</div>" +
-                    "<div class=\"stack stack-vertical\" style=\"justify-content: flex-start; align-items: center; gap: 1.0cm;\">" +
+                    "<div style=\"justify-content: flex-start; align-items: center; gap: 1.0cm;\" class=\"stack stack-vertical\">" +
                     "<div class=\"clip-circle\">" +
                     "<p><img src=\"img1.png\" alt=\"\" /></p>" +
                     "</div>" +