zachdaniel/tails

merge custom text color

Closed this issue · 7 comments

Describe the bug
merging custom text color seems not working

To Reproduce
with iex

iex(8)> Tails.classes(["text-white", "text-green-500"])
"text-green-500" 
iex(9)> Tails.classes(["text-white", "text-[#00ff00]"])
"text-white text-[#00ff00]"

Expected behavior

iex(9)> Tails.classes(["text-white", "text-[#00ff00]"])
"text-[#00ff00]"

Runtime
Erlang/OTP 26 [erts-14.0] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit]
Elixir 1.15.5 (compiled with Erlang/OTP 26)
MacOS Ventura 13.5.1
Tails 0.1.7

seems some prefixes like 'bg', 'border', 'text' are both prefixed with values and colors.
so "bg-[#00ff00]" goes in prefix 'bg-size' not 'bg-color'.

iex(35)> Tails.classes(["bg-auto", "bg-[#00ff00]"])
"bg-[#00ff00]"

may be adding pattern match '-[#' and reorder the macro will solve this problem?

another issue

iex(47)> Tails.classes(["text-white text-xl text-center", "text-[16px]"])
"text-white text-[16px] text-xl"

text size is also colliding with text align.

some text error cases i found

test "text" do
  assert Tails.merge("text-xl", "text-[16px]") |> to_string() == "text-[16px]"
  assert Tails.merge("text-white", "text-[#000]") |> to_string() == "text-[#000]"
  assert Tails.classes(["text-center text-xl text-white", "text-[16px] text-[#000]"]) ==
           "text-center text-[16px] text-[#000]"
end

Huh, interesting...for the overriding of both text color and text size to work, we'd have to have to parse text sizes and only allow sizes, or colors... it can be done, but it won't really be pretty. I'm not really a deep CSS expert so I'm not sure which one is the easier one to parse. Initial research suggests it will be colors because we can tell from the prefixes and a list of possible html colors.

This should now be fixed in main, mind giving it a try?

Thank you for the quick fix! I'm sorry for my delayed response.
I tested it and it works perfectly for the text.
However, I noticed that there might be an issue between 'bg-auto' (as size) and 'bg-[#fff]' (as color).
Thank you so much for your help!

Could you open a separate issue for that and show a case where it's doing the wrong thing? I'll take a look soon.