"Circular dependency detected" error on using @apply in custom class

[dcastil]

What version of Tailwind CSS are you using?

v3.0.1

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

Tailwind Playground

What version of Node.js are you using?

Not applicable

What browser are you using?

Chrome Version 96.0.4664.55

What operating system are you using?

macOS 12.0.1

Reproduction URL

https://play.tailwindcss.com/oslkj6dpmz?file=css

Only change was adding this CSS

.group-inner:focus-within .group-inner-focus-within\:sr-only {
    @apply sr-only;
}

Describe your issue

I'm getting a compilation error "<css input>: Circular dependency detected when using: @apply sr-only". But I'd expect the project to run without issues. This class was used in Tailwind CSS v2 without any issues.

I also don't understand how the circular dependency could come up since I'm using a class name not available in Tailwind CSS: group-inner-focus-within:sr-only. The issue goes away when I remove the last character y from the class. Seems like Tailwind tries to evaluate the class as a Tailwind class despite the prefix not existing in Tailwind.

[danr-za]

Same here.
It seems to happen when applying a class inside a class with a same name.

[dcastil]

I upgraded to v3.0.7 in my project with the circular dependency and the error doesn't come up again. Seems like the issue was fixed in #6588. Closing this issue as resolved, thanks @RobinMalfait! 🙏

[RobinMalfait]

@dcastil Ah perfect! Thanks for notifying and closing the issue!

[driskull]

I'm still seeing this issue in 3.0.7.

You cannot `@apply` the `sticky` utility here because it creates a circular dependency.

header .sticky {
  @apply sticky;
}

https://play.tailwindcss.com/YxcQz4gSop?file=css

In our web components, we have a class .sticky where we use @apply sticky;. This seems to throw this error.

If we rename our class to .sticky-pos then it will work but we shouldn't have to do that.

[driskull]

I can open a new issue if you want.

[RobinMalfait]

This PR fixed false positives, but the example you posted is not a false positive but an actual circular dependency. It's like you would do this:

.btn {
  @apply btn;
}

[driskull]

Ok thanks. I'll update our classes. 👍