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 👍