Repository: 100phlecs/tailwind_formatter (elixir)

Issue:
Formatter breaks special class attribute: `[scrollbar-gutter: stable]`
The space before the `stable` keyword is mandatory
```
[...]layouts/root.html.heex

  1   1  |<!DOCTYPE html>
  2     -|<html lang="en" class="[scrollbar-gutter: stable]">
      2 +|<html lang="en" class="stable] :[scrollbar-gutter">
  3   3  |  <head>
  4   4  |    <meta charset="utf-8" />
         |
```

Pull request description:
handle arbitrary properties
Closes #63 

Patch:
diff --git a/lib/tailwind_formatter.ex b/lib/tailwind_formatter.ex
index e3d37a9..9ac3829 100644
--- a/lib/tailwind_formatter.ex
+++ b/lib/tailwind_formatter.ex
@@ -94,7 +94,7 @@ defmodule TailwindFormatter do
 
   defp sort_variant_chains(classes) do
     classes
-    |> String.split()
+    |> String.split(~r/\s+(?![^\[]*\])/i, trim: true)
     |> Enum.map(fn class ->
       class
       |> String.split(":")
@@ -125,7 +125,7 @@ defmodule TailwindFormatter do
   end
 
   defp placeholder?(class), do: String.contains?(class, @placeholder)
-  defp variant?(class), do: String.contains?(class, ":")
+  defp variant?(class), do: String.contains?(class, ":") and not String.starts_with?(class, "[")
   defp prose?(class), do: String.contains?(class, "prose")
 
   defp class_position(class),


Test patch:
diff --git a/test/tailwind_formatter_test.exs b/test/tailwind_formatter_test.exs
index b462736..4c4c1e1 100644
--- a/test/tailwind_formatter_test.exs
+++ b/test/tailwind_formatter_test.exs
@@ -523,4 +523,41 @@ defmodule TailwindFormatterTest do
 
     assert_formatter_output(input, expected)
   end
+
+  # https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties
+  test "handles arbitrary properties" do
+    input = """
+      <html lang="en" class="sm:[scrollbar-gutter: stable] potato">
+    """
+
+    expected = """
+      <html lang="en" class="potato sm:[scrollbar-gutter: stable]">
+    """
+
+    assert_formatter_output(input, expected)
+  end
+
+  test "issue #63" do
+    input = """
+      <html lang="en" class="[scrollbar-gutter: stable]">
+    """
+
+    expected = """
+      <html lang="en" class="[scrollbar-gutter: stable]">
+    """
+
+    assert_formatter_output(input, expected)
+  end
+
+  test "splits variants with arbitrary values" do
+    input = """
+    <div class="sm:lowercase sm:px-[1px] potato text-sm uppercase"></div>
+    """
+
+    expected = """
+    <div class="potato text-sm uppercase sm:px-[1px] sm:lowercase"></div>
+    """
+
+    assert_formatter_output(input, expected)
+  end
 end