group-*:animate-* generates invalid keyframe definition

[jnugh]

What version of Tailwind CSS are you using?

v2.2.0

What build tool (or framework if it abstracts the build tool) are you using?

[email protected], [email protected]

What version of Node.js are you using?

v15.10.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/DrsR2rdrZO

Describe your issue

Adding an animation that should only be applied to group children (e.g. group-focus group-hover) generates invalid keyframes (offsets are missing):

@keyframes bounce {

	, {
		-webkit-transform: translateY(-25%);
		        transform: translateY(-25%);
		-webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
		        animation-timing-function: cubic-bezier(0.8,0,1,1);
	}

	 {
		-webkit-transform: none;
		        transform: none;
		-webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
		        animation-timing-function: cubic-bezier(0,0,0.2,1);
	}
}
.group:focus .group-focus\:animate-bounce {
	-webkit-animation: bounce 1s infinite;
	        animation: bounce 1s infinite;
}

expected (taken from non-group animate-* classes):

@keyframes bounce {

	0%, 100% {
		-webkit-transform: translateY(-25%);
		        transform: translateY(-25%);
		-webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
		        animation-timing-function: cubic-bezier(0.8,0,1,1);
	}

	50% {
		-webkit-transform: none;
		        transform: none;
		-webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
		        animation-timing-function: cubic-bezier(0,0,0.2,1);
	}
}
.animate-bounce {
	-webkit-animation: bounce 1s infinite;
	        animation: bounce 1s infinite;
}

[grumpyTofu]

Found this in my search, I hope it helps:
https://github.com/tailwindlabs/play.tailwindcss.com/issues/54

If you downgrade to 2.1.4 it should work again.

[jnugh]

Yeah it worked before, so definitely a regression.
I stepped trough the code a little and it looks like the { respectVariants: false } config gets lost somewhere and is not set in

tailwindcss/src/jit/lib/generateRules.js

Line 97 in 0d47ffd

function applyVariant(variant, matches, context) {

so the value gets handled as if it was a css selector.

[Timber1900]

Also experiencing the same issue, and since downgrading currently isn't an option for me I'd like to see this fixed.

[infothien]

My team is currently running into this issue as well. Looking forward to the fix in the next version

[juanzgc]

Also running into this issue, currently downgraded to version 2.1.4

[FallDownTheSystem]

Same problem for me.

[Sanbolee]

Same problem for me.

[adamwathan]

Should be fixed on master, will try to tag an insiders build to tide everyone over until the next release when I'm at my computer.

Currently here, my apologies 🙈

No those aren't Crocs... they are Walmart knock-off Crocs.