Repository: 100phlecs/tailwind_formatter (elixir)

Issue:
Class list is getting wrapped in double quotes
This is encountered in unreleased commit, 0dcc490dc30152e6b778e8d085183c282c729cc1:

```heex
<div class={["text-sm potato sm:lowercase uppercase"]}></div>
```

is turned into:

```heex
<div class={"["text-sm potato sm:lowercase uppercase"]"}></div>
```

Pull request description:
Preserve leading and trailing space
Fixes #32.

Patch:
diff --git a/lib/tailwind_formatter.ex b/lib/tailwind_formatter.ex
index b5a1150..914a1ea 100644
--- a/lib/tailwind_formatter.ex
+++ b/lib/tailwind_formatter.ex
@@ -43,21 +43,9 @@ defmodule TailwindFormatter do
       |> Inspect.Algebra.format(:infinity)
       |> IO.iodata_to_binary()
 
-    sorted_classes =
-      if String.contains?(sorted_classes, "\""),
-        do: trim_classes(sorted_classes),
-        else: sorted_classes
-
     String.replace(contents, expr_class, sorted_classes)
   end
 
-  defp trim_classes(classes) do
-    classes
-    |> String.trim("\"")
-    |> String.trim(" ")
-    |> then(fn str -> "\"#{str}\"" end)
-  end
-
   defp sort_expr({:<>, meta, children}), do: {:<>, meta, handle_concatenation(children)}
   defp sort_expr({:<<>>, meta, children}), do: {:<<>>, meta, handle_interpolation(children)}
   defp sort_expr({:__block__, meta, [children]}), do: {:__block__, meta, [sort_expr(children)]}
@@ -65,15 +53,7 @@ defmodule TailwindFormatter do
   defp sort_expr(node), do: node
 
   defp handle_concatenation(children) do
-    children
-    |> Enum.map(&sort_expr/1)
-    |> Enum.map(fn
-      {:__block__, meta, [text]} when is_binary(text) ->
-        {:__block__, meta, [" #{text} "]}
-
-      node ->
-        node
-    end)
+    Enum.map(children, &sort_expr/1)
   end
 
   defp handle_interpolation(children) do
@@ -99,14 +79,17 @@ defmodule TailwindFormatter do
   end
 
   defp weave_in_code(classes, placeholder_map) do
-    Enum.flat_map(classes, fn class ->
+    classes
+    |> Enum.map(fn class ->
       if placeholder?(class) do
         [prefix, index, suffix] = String.split(class, @placeholder)
-        [prefix, Map.fetch!(placeholder_map, index), suffix, " "]
+        [prefix, Map.fetch!(placeholder_map, index), suffix]
       else
-        [class, " "]
+        class
       end
     end)
+    |> Enum.intersperse(" ")
+    |> List.flatten()
   end
 
   defp sort_variant_chains(classes) do
@@ -118,10 +101,16 @@ defmodule TailwindFormatter do
   end
 
   defp sort(classes) when is_binary(classes) do
-    classes
-    |> sort_variant_chains()
-    |> sort()
-    |> Enum.join(" ")
+    leading_space = if String.starts_with?(classes, " "), do: " "
+    trailing_space = if String.ends_with?(classes, " "), do: " "
+
+    classes =
+      classes
+      |> sort_variant_chains()
+      |> sort()
+      |> Enum.join(" ")
+
+    Enum.join([leading_space, classes, trailing_space])
   end
 
   defp sort([]), do: []


Test patch:
diff --git a/test/tailwind_formatter_test.exs b/test/tailwind_formatter_test.exs
index abecebe..76b3ab0 100644
--- a/test/tailwind_formatter_test.exs
+++ b/test/tailwind_formatter_test.exs
@@ -148,7 +148,7 @@ defmodule TailwindFormatterTest do
     """
 
     expected = ~S"""
-        <div class={"h-6 " <> if @active, do: "bg-white", else: "bg-red"}></div>
+        <div class={" h-6 " <> if @active, do: "bg-white", else: "bg-red"}></div>
     """
 
     assert_formatter_output(input, expected)
@@ -422,7 +422,7 @@ defmodule TailwindFormatterTest do
     """
 
     expected = ~S"""
-    <div class={"#{if false, do: "class"} tomato text-sm uppercase odd:decoration-slate-50 sm:lowercase sm:hover:bg-unknown-500 sm:hover:bg-gray-500 sm:disabled:text-lg sm:disabled:text-2xl lg:sm:dark:group-hover:disabled:text-blue-500 " <> " rounded-lg px-3 py-3 " <> " rounded-lg px-3 py-5 " <> " text-sm " <> " tomato"}></div>
+    <div class={"#{if false, do: "class"} tomato text-sm uppercase odd:decoration-slate-50 sm:lowercase sm:hover:bg-unknown-500 sm:hover:bg-gray-500 sm:disabled:text-lg sm:disabled:text-2xl lg:sm:dark:group-hover:disabled:text-blue-500" <> "rounded-lg px-3 py-3 " <> "rounded-lg px-3 py-5 " <> "text-sm" <> "tomato"}></div>
     """
 
     assert_formatter_output(input, expected)
@@ -434,7 +434,7 @@ defmodule TailwindFormatterTest do
     """
 
     expected = """
-    <div class={"h-6 " <> if @active, do: "bg-white", else: "bg-red"}></div>
+    <div class={" h-6 " <> if @active, do: "bg-white", else: "bg-red"}></div>
     """
 
     assert_formatter_output(input, expected)
@@ -448,11 +448,23 @@ defmodule TailwindFormatterTest do
     """
 
     expected = ~S"""
-    <a class="mx-auto p-10 xs:p-0 md:w-full md:max-w-md"
+    <a class=" mx-auto p-10 xs:p-0 md:w-full md:max-w-md"
     id="testing"
     href="#"></a>
     """
 
     assert_formatter_output(input, expected)
   end
+
+  test "issue#32" do
+    input = """
+    <div class={["text-sm potato sm:lowercase uppercase"]}></div>
+    """
+
+    expected = """
+    <div class={["text-sm potato sm:lowercase uppercase"]}></div>
+    """
+
+    assert_formatter_output(input, expected)
+  end
 end