[JIT] group variants like group-hover not working

[Kuirak]

trafficstars

Hello,

group variants like group-hover or group-focus are generating wrong css with tailwindcss-theme-variants plugin. I don't know if it is a bug in this repo or in tailwindcss JIT bug so I will cross post it

Here is a reproduction repo: https://github.com/Kuirak/jit-tailwindcss-theme-variants/

Expected Output:

:root.dark-theme .dark\:group:hover .dark\:group-hover\:bg-amber-300 {
	--tw-bg-opacity: 1;
	background-color: rgba(252, 211, 77, var(--tw-bg-opacity));
}

Output

:root.dark-theme .dark\:group:hover .group-hover\:bg-teal-300 {
	--tw-bg-opacity: 1;
	background-color: rgba(94, 234, 212, var(--tw-bg-opacity));
}

:root.dark-theme .dark\:group:hover .group-hover\:bg-amber-300 {
	--tw-bg-opacity: 1;
	background-color: rgba(252, 211, 77, var(--tw-bg-opacity));
}

[JNavith]

This is within this plugin's realm to fix. That'll be a TODO.

It shouldn't be that hard to solve but might be a breaking change, so I might bundle it up with the other changes I have planned for 2.0.

[Kuirak]

Good to hear, do you have a rough ETA of 2.0?

After thinking about it some more I think the expected selector output should be:

:root.dark-theme ~~.dark:~~group:hover .dark\:group-hover\:bg-amber-300