Suspected false positive circular dependency detection

[LeoniePhiline]

What version of Tailwind CSS are you using?

3.0.19

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

parcel 2.2.1 with

• @parcel/config-default
• @parcel/core
• @parcel/optimizer-css
• @parcel/transformer-css-experimental (= @parcel/css)
• @parcel/transformer-postcss

What version of Node.js are you using?

16.13.2

What operating system are you using?

OpenSUSE Tumbleweed

Reproduction URL

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

Note how the error is reported for line 17 in tailwind play (link above), although the @apply bg-magenta is entirely somewhere else. (Further down below, at .rte th.)

Describe your issue

I have found a false positive. (Slipped through #6588.)

The following worked in TailwindCSS 2, but is broken in TailwindCSS 3:

/** base/rte/hyperlinks.css **/
@layer base {

   .rte a[href]:not(.cta) {
     @apply text-magenta; /* Note: text-magenta, not bg-magenta. */
   }

    /* 
     * False error in next selector below: 
     * You cannot @apply the bg-magenta utility here because it creates a circular dependency. 
     */

   .bg-magenta.text-white .rte a[href]:not(.cta) { /* line 11, originally. Line 17 in https://play.tailwindcss.com/d2XQQecVBx?file=css */
       color: theme('colors.white');
   }

}

/** base/rte/tables.css **/
@layer base {

  .rte th {
    @apply bg-magenta text-white; /* This appears to actually trigger the circular dependency. Should it, though? I believe this is a false positive. */
  }
  
}

I get the following error reported:

@parcel/transformer-postcss:
/src/tailwind/custom/base/rte/hyperlinks.css:11:4:
You cannot @apply the bg-magenta utility here because it creates a circular dependency.

In https://play.tailwindcss.com/d2XQQecVBx?file=css if you remove bg-magenta from .rte th, then the error message reads:

Line 17: You cannot @apply the text-white utility here because it creates a circular dependency.

[adamwathan]

Hey! Not sure why this worked in v2 but this looks like a real circular dependency to me:

.bg-magenta.text-white .rte a[href]:not(.cta) {
  color: theme('colors.white');
}

.rte th {
  @apply bg-magenta text-white;
}

The first selector contains .rte and .bg-magenta, so when trying to apply bg-magenta below it's trying to also include the first selector (since we apply all instances of a class).

It basically reduces to this:

.foo .bar {
  ...
}

.foo {
  @apply bar
}

My recommendations would be:

1. Never use a Tailwind class in a custom selector, doing that has very bad ripple effects throughout all of your CSS processing if you ever try to @apply that class. By doing what you have done you have effectively extended the behavior of bg-magenta, and applying bg-magenta will now also try to apply that behavior.

2. If you have to do 1, never apply that class. Instead just write the CSS yourself and use theme if needed.

   .rte th {
     background-color: theme('colors.magenta');
     color: theme('colors.white');
   }

Hope that helps, no plans to change anything here.