feat: add line breaks in class attr accordingly (close #75)

g-plane · Nov 5, 2024 · 8d38b5d · 8d38b5d
1 parent d25b42b
commit 8d38b5d
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 7 deletions.
diff --git a/markup_fmt/src/printer.rs b/markup_fmt/src/printer.rs
@@ -925,7 +925,26 @@ impl<'s> DocGen<'s> for NativeAttribute<'s> {
             docs.push(Doc::text("="));
             docs.push(quote.clone());
             if self.name.eq_ignore_ascii_case("class") {
-                docs.push(Doc::text(value.split_ascii_whitespace().join(" ")));
+                let value = value.trim();
+                let maybe_line_break = if value.contains('\n') {
+                    Doc::hard_line()
+                } else {
+                    Doc::nil()
+                };
+                docs.push(
+                    maybe_line_break
+                        .clone()
+                        .concat(itertools::intersperse(
+                            value
+                                .trim()
+                                .lines()
+                                .filter(|line| !line.is_empty())
+                                .map(|line| Doc::text(line.split_ascii_whitespace().join(" "))),
+                            Doc::hard_line(),
+                        ))
+                        .nest_with_ctx(ctx),
+                );
+                docs.push(maybe_line_break);
             } else if self.name.eq_ignore_ascii_case("style") {
                 docs.push(Doc::text(ctx.format_style_attr(&value, value_start)));
             } else {

diff --git a/markup_fmt/tests/fmt/html/attributes/attributes.snap b/markup_fmt/tests/fmt/html/attributes/attributes.snap
@@ -71,4 +71,11 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
 <X a="1"> </X>
 <X a="1" b="2"> </X>
 <X a="1" b="2" c="3"> </X>
-<p class="foo bar baz"></p>
+<p
+  class="
+    foo
+    bar
+    baz
+  "
+>
+</p>
diff --git a/markup_fmt/tests/fmt/html/attributes/class-bem1.snap b/markup_fmt/tests/fmt/html/attributes/class-bem1.snap
@@ -2,7 +2,13 @@
 source: markup_fmt/tests/fmt.rs
 ---
 <div
-  class="ProviderMeasuresContainer__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
+  class="
+    ProviderMeasuresContainer__heading-row
+    d-flex
+    flex-column flex-lg-row
+    justify-content-start justify-content-lg-between
+    align-items-start align-items-lg-center
+  "
 >
   Foo
 </div>

diff --git a/markup_fmt/tests/fmt/html/attributes/class-names.snap b/markup_fmt/tests/fmt/html/attributes/class-names.snap
@@ -1,26 +1,60 @@
 ---
 source: markup_fmt/tests/fmt.rs
 ---
-<img class="foo bar">
+<img
+  class="
+    foo
+    bar
+  "
+>
 
 <img class="">
 <img class>
 
 <img
-  class="looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong a-long-long-long-long-long-class-name another-long-long-long-class-name foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar"
+  class="
+    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
+    a-long-long-long-long-long-class-name
+    another-long-long-long-class-name
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+    foo bar
+  "
 >
 
 <img class="{{ ...classes }}">
 <img class="foo bar {{ otherClass }}">
 
 <!-- escaped -->
 <!-- from: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape#Basic_results -->
-<img class="\.foo\#bar \(\)\[\]\{\} --a \30 \ufffd">
+<img
+  class="
+    \.foo\#bar
+    \(\)\[\]\{\}
+    --a
+    \30
+    \ufffd
+  "
+>
 
 <!-- from yahoo website -->
 <div
   id="header-wrapper"
-  class="Bgc(#fff) Bdbc(t) Bdbs(s) Bdbw(1px) D(tb) Pos(f) Tbl(f) W(100%) Z(4) has-scrolled_Bdc($c-fuji-grey-d) Scrolling_Bdc($c-fuji-grey-d) has-scrolled_Bxsh($headerShadow) Scrolling_Bxsh($headerShadow)"
+  class="
+    Bgc(#fff) Bdbc(t) Bdbs(s) Bdbw(1px) D(tb) Pos(f) Tbl(f) W(100%) Z(4)
+    has-scrolled_Bdc($c-fuji-grey-d) Scrolling_Bdc($c-fuji-grey-d) has-scrolled_Bxsh($headerShadow)
+    Scrolling_Bxsh($headerShadow)
+  "
 >
   <div
     class="Bgc(#fff) M(a) Maw(1301px) Miw(1000px) Pb(12px) Pt(22px) Pos(r) TranslateZ(0) Z(6)"