zachdaniel/tails

`border-b-*` overriden by `border-opacity-*`

TrevorHinesley opened this issue · 8 comments

TrevorHinesley commented

Describe the bug
If a border-b-* class (e.g. border-b-4) precedes a border-opacity-* class (e.g. border-opacity-20), the former is removed from the list.

To Reproduce
On any element:

<div class={Tails.classes(["border-black border-b-4 border-opacity-20"])}></div>

The rendered element:

<div class="border-opacity-20 border-black"></div>

Expected behavior
I expect the rendered element to maintain non-competing classes, like so:

<div class="border-black border-opacity-20 border-b-4"></div>

Note: this can be fixed by doing something like:

<div class={Tails.classes(["border-black/20 border-b-4"])}></div>

But still, I suspect the current behavior is not intended.

Runtime

  • Elixir version: 1.15.4
  • Erlang version: 25
  • OS: macOS Ventura 13.2.1
  • Tails version: 0.1.7
zachdaniel commented

I've added a test for this, but am unable to reproduce it in the latest main. It looks like we have made some fixes that have not been released, I'll cut a release and you can try that :)

zachdaniel commented

0.1.8 has been released.

TrevorHinesley commented

@zachdaniel thanks for shipping that release! Unfortunately, this is still occurring on 0.1.8:

<div class={Tails.classes(["border-b-4 border-opacity-20"])}

results in:

<div class="border-opacity-20"></div>

In iex:

iex(1)> Tails.classes(["border-b-4 border-opacity-20"]) 
"border-opacity-20"
iex(2)> Application.spec(:tails, :vsn)
~c"0.1.8"
zachdaniel commented
TrevorHinesley commented

Here's the failing test, both of these refute statements fail: TrevorHinesley@dc640e8

zachdaniel commented

Thanks for the test, I believe the issue should be resolved now :)

  • 🎉1
TrevorHinesley commented

Thanks a bunch!

TrevorHinesley commented

Do you want to cut a release for that?