handle arbitrary properties (#64)

100phlecs · web-flow · commit 316bdec53ec2 · 2025-01-02T15:12:36.000-05:00
* handle arbitrary properties

* .
diff --git 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),
diff --git 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
