When the separator option is "-", jit mode does not work

[JesseChain]

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?

webpack4&postcss7

What version of Node.js are you using?

v14.17.1

What browser are you using?

Edge

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/B3Qq1BEYE2?file=config

Describe your issue

No response

[adamwathan]

Hey good catch! This is like basically impossible to solve I'm afraid because of assumptions the JIT engine has to make about how to parse classes and generate the CSS :/ For example, we have the focus-visible variant, but imagine you created a custom visible variant for something.

Now given this class detected in your HTML:

group-focus-visible-bg-black

Is that using the group-focus-visible variant, or is it group-focus and visible? Can't really be known, and there's no way for you as the template author to clarify your intent.

There might be a way to make it work good enough but it would be a substantial project I think :/ So for now what I've done is explicitly throw an error in this situation so at least users know why things aren't working:

#4704

Going to close with no intent to support unfortunately — thanks for bringing it to my attention though so I could at least improve the error.