bug: v5 hover:swap-active produces unwanted behavior

[amir20]

What version of daisyUI are you using?

v5-beta

Which browsers are you seeing the problem on?

No response

Reproduction URL

https://play.tailwindcss.com/0UJ1LRDSK1

Describe your issue

@saadeghi not sure if you are aware of these two bugs.

swap swap-rotate hover:swap-active and swap swap-flip hover:swap-active do not work as expected.

1. rotate also rotates the end state
2. flip doesn't seem to work at all

[github-actions]

Thank you @amir20 for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[amir20]

Just to confirm, this is not fixed yet?

[saadeghi]

I'm working on it but I won't promise, as we don't have control over how hover: works.

The selector is something like

.swap-rotate {
  &.swap-active .swap-on {
    rotate: 0deg;
  }
}

Tailwind won't generate hover:swap-active as it's a nested relative selector.

But in general, may I ask if you want to change an icon on hover, why use swap? You can use Tailwind's group class:
https://play.tailwindcss.com/Ee9t8KWWfH

swap is for changing icon based on value of checkbox or conditional class name, not for hover.

[amir20]

Thanks for the response! You are quick given all the things going on.

1. So this used to work in v4. 🤔 I was just migrating to v5 that noticed this happened. It is a regression.
2. I saw swap-active so assumed that it's better to reuse swap with hover: than roll my own.

swap is for changing icon based on value of checkbox or conditional class name, not for hover.

I wouldn't say that's obvious because then why have .swap-active.

Tailwind won't generate hover:swap-active as it's a nested relative selector.

I thought Tailwind support nested selectors natively. I'll have to look deeper when I can.

[amir20]

Oh I guess if I do use the group solution, I won't get the fancy rotate animation. So that's the reason I didn't.

[saadeghi]

Try something like this for now:
https://play.tailwindcss.com/NZGGt9l82V

In general Tailwind CSS 4 simplified a lot of selector behaviors, which is a good thing. But not all behaviors are going to be 1:1 to the previous version. Also swap-active was not meant to be used with hover:
I will try to make it work with hover:swap-active but there's chance it won't go as expected.

I will let you know.

[amir20]

Thanks. I wouldn't spend a whole amount time on this only. It's probably NOT worth the time.

https://play.tailwindcss.com/NZGGt9l82V

I was hoping somehow to reuse as much as possible from DaisyUI instead of rolling my own. But if it comes to that then I could do it this way.