Repository: 100phlecs/tailwind_formatter (elixir)

Issue:
Bug when formatting multiple assigns
This seems like a super wierd but severe bug. It seems like when having more than nine assigns in a string interpolation, all following string interpolations will be malformatted!

## Steps to reproduce

Format the following `.heex` code:

```heex
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />

<div text={"bar: #{@bar}"} />
<div text={"bar: #{@bar}"} />
<div text={"bar: #{@bar}"} />
```

The expected outcome is that the code should be the same.

## Outcome

```heex
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />
<div text={"foo: #{@foo}"} />

<div text={"bar: #{@foo}0"} />
<div text={"bar: #{@foo}0"} />
<div text={"bar: #{@foo}0"} />
```

## Configuration

Using `tailwind_formatter 0.3.2`, `.formatter.exs`:
```elixir
[
  plugins: [TailwindFormatter],
  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs,heex}"],
  subdirectories: ["priv/*/migrations"]
]


Pull request:
Fixed error with more than nine string interpolations
When adding placeholders, we need to allow them to be multiple digits long! Closes #21 

Patch:
diff --git a/lib/tailwind_formatter.ex b/lib/tailwind_formatter.ex
index 8591d23..2fedb89 100644
--- a/lib/tailwind_formatter.ex
+++ b/lib/tailwind_formatter.ex
@@ -93,7 +93,7 @@ defmodule TailwindFormatter do
       dynamic_classes
       |> Enum.reduce(contents, fn
         {dynamic_class, index}, contents ->
-          String.replace(contents, dynamic_class, "$#{index}")
+          String.replace(contents, dynamic_class, "$#{index}$")
       end)
 
     {:ok, placeholder_contents, dynamic_classes}
@@ -103,7 +103,7 @@ defmodule TailwindFormatter do
     dynamic_classes
     |> Enum.reduce(sorted_html, fn
       {dynamic_class, index}, html ->
-        String.replace(html, "$#{index}", dynamic_class)
+        String.replace(html, "$#{index}$", dynamic_class)
     end)
   end
 


Test patch:
diff --git a/test/tailwind_formatter_test.exs b/test/tailwind_formatter_test.exs
index f8edc63..f1656f3 100644
--- a/test/tailwind_formatter_test.exs
+++ b/test/tailwind_formatter_test.exs
@@ -316,13 +316,13 @@ defmodule TailwindFormatterTest do
     test "missing final quote" do
       input = ~S"""
       <a class={"#{if false, do: "bg-white"} text-sm potato sm:lowercase #{isready?(@check)} uppercase
-        id="testing 
+        id="testing
         href="#"></a>
       """
 
       expected = ~S"""
       <a class={"#{if false, do: "bg-white"} text-sm potato sm:lowercase #{isready?(@check)} uppercase
-        id="testing 
+        id="testing
         href="#"></a>
       """
 
@@ -374,17 +374,39 @@ defmodule TailwindFormatterTest do
     test "missing number tag inline elixir" do
       input = ~S"""
       <a class={"{if false, do: "bg-white"} text-sm potato sm:lowercase uppercase"}
-        id="testing 
+        id="testing
         href="#"></a>
       """
 
       expected = ~S"""
       <a class={"{if false, do: "bg-white"} text-sm potato sm:lowercase uppercase"}
-        id="testing 
+        id="testing
         href="#"></a>
       """
 
       assert_formatter_output(input, expected)
     end
+
+    test "works with more than nine string interpolations" do
+      input = ~S"""
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+      <div text={"foo: #{@foo}"} />
+
+      <div text={"bar: #{@bar}"} />
+      <div text={"bar: #{@baz}"} />
+      <div text={"bar: #{@barr}"} />
+      """
+
+      assert_formatter_output(input, input)
+    end
   end
 end