bug: Invalid CSS generated when child of an element with the "btm-nav" class has the "active" class that uses a media query

[SleeplessOne1917]

What version of daisyUI are you using?

v4.12.10

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/mqasCpOOhe

Describe your issue

When I make a child of a "btm-nav" element use the "active" class with a media query (the example in the Tailwind Play link uses "sm:active", but it happens with any media query such as 'aria-[current="page"]'), Tailwind generates invalid CSS. The offending CSS snippet seems to be:

    .menu li > .sm\:active*:not(ul, .menu-title, details, .btn) {

It appears the issue is the placement of the wildcard (*) between :active and :not. It breaks when I try to run the generated CSS through Lightning CSS to minify it.

[github-actions[bot]]

Thank you @SleeplessOne1917 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.

[saadeghi]

active class is not responsive

But I will try to see if there's a way to make it work with prefixes...

[SleeplessOne1917]

I see. I never noticed that those badges had tooltips explaining them. Probably best to make active and disabled responsive, if for no other reason than so it works with aria-current. Without this support, frontend designers would have to write JS to detect which page the element is on and add and remove the classes based on that. It's generally good to reduce the amount of stuff that needs to be handled in JS incase the JS bundle takes awhile to load or the user has JS disabled.

[saadeghi]

I agree 👍

[SleeplessOne1917]

@saadeghi

I tried this out with daisyui v5.0.0. I'm not getting the build error anymore, but it appears to still do nothing when used with a variant. I made a new reproduction of the error here: https://play.tailwindcss.com/bDEfHBdz6d. You will notice testing it that hovering over the link in the dock doesn't cause it to get styled as active. dock-active does work if there's no variant (like hover). It also works as expected if you keep the variant and use a different class (like bg-primary).

As I stated in my August 15th comment, it would really be nice to be able to use this with variants, especially in a case like aria-current to avoid unnecessary use of JS.

[saadeghi]

@SleeplessOne1917 fixed in 5.0.21 ✅