3.3.0 - Issue with an arbitrary variant

[stepanjakl]

Hello,

I just updated to the latest 3.3.0 version and I'm getting this CssSyntaxError:

The `[&:hover,_&:group-hover_&:group-focus]:decoration-inherit` class does not exist. If `[&:hover,_&:group-hover_&:group-focus]:decoration-inherit` is a custom class, make sure it is defined within a `@layer` directive.

I know I'm probably stretching the use of the variants here, but it seems like a legitimate way to use them. The same syntax worked in the previous version.

[thecrypticace]

Hey! So the problem here is a combination of two things:

First, the selector you provide doesn't produce the expected output in the previous version of Tailwind CSS v3.2.

The output you'd expect to get, based on the variant as written, is this:

.\[\&\:hover\2c _\&\:group-hover_\&\:group-focus\]\:decoration-inherit:hover,
.\[\&\:hover\2c _\&\:group-hover_\&\:group-focus\]\:decoration-inherit:group-hover .\[\&\:hover\2c _\&\:group-hover_\&\:group-focus\]\:decoration-inherit:group-focus {
  text-decoration-color:inherit;
}

However, what you'd actually get is this:

.\[\&\:hover\2c _\&\:group-hover_\&\:group-focus\]\:decoration-inherit:hover {
  text-decoration-color:inherit;
}

Second, in v3.3 we explicitly detect these cases and throw out the utility because it was both broken and not an intended usage. This changed in #10655 which you can look at for more details if you like.

As an aside

An arbitrary variant is a raw CSS selector and neither group-focus nor group-hover are valid CSS pseudo classes. I noticed the error message which looks like you're using it from @apply. I think what you're really after is this:

.my-class {
  @apply hover:decoration-inherit group-hover:decoration-inherit group-focus:decoration-inherit;
}

This is why you're seeing the error about the class missing. Hope that helps! Let me know if you have any more questions. ✨

[stepanjakl]

Hi @thecrypticace, thanks for the prompt and detailed answer. It all makes sense and resolves the issue.