search

zachdaniel / tails

Utilities for working with tailwind classes, like semantic merge, and conditional class lists.
MIT License
81 stars 9 forks source link

merge custom text color #12

Closed Dylan-aidkr closed 8 months ago

Dylan-aidkr commented 8 months ago

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

Dylan-aidkr commented 8 months ago

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?

Dylan-aidkr commented 8 months ago

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.

Dylan-aidkr commented 8 months ago

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
zachdaniel commented 8 months ago

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.

zachdaniel commented 8 months ago

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

Dylan-aidkr commented 8 months ago

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!

zachdaniel commented 8 months ago

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.