TW 3.2.0 regression: @apply incorrectly modifies selectors containing pseudo-classes

[Techn1x]

What version of Tailwind CSS are you using?

Appears in 3.2.0, also occurs in 3.2.1 (current latest)

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

"ember-cli-postcss": "^8.2.0",
"postcss": "^8.4.18",

What version of Node.js are you using?

v16.17.0

What browser are you using?

N/A

What operating system are you using?

ubuntu

Reproduction URL

I attempted to create a Tailwind Play link, but couldn't figure out how to add tailwind nesting plugin :( The plugins property in config expects an array, but the docs on tailwind website has plugins as an object!

Here it is, if you can get tailwindcss/nesting working...
https://play.tailwindcss.com/cm3UJrabZH?file=css

Describe your issue

This very specific input (I think the &:not([some-attribute]) plays a big part here)

.check {
  &:not([some-attribute]) {
    &.but-deeply-nested {
      .tailwind-value {
        @apply bg-black;
        color: red;
      }
    }
  }
}

ends up in the following output

tailwind 3.1.8 🟢

.check:not([some-attribute]).but-deeply-nested .tailwind-value {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  color: red;
}

tailwind 3.2.0+ 🔴 (the tailwind apply results in an incorrect interpretation of the selector it was in)

.check.but-deeply-nested.tailwind-value:not([some-attribute])  {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.check:not([some-attribute]).but-deeply-nested .tailwind-value {
  color: red;
}

[guilhermetod]

Same here. Using tailwind with Angular resulted in the following code:

:host.class .nested {
    @apply text-center;
  }
}

Instead of the expected output

.class[_nghost-xak-c153] .nested {
  text-align: center;
}

resulted in:

.class.nested[_nghost-xak-c153] {
  text-align: center;
}

However, I can get the desired result if I change the syntax to:

:host(.class) .nested {
  @apply text-center;
}

I took a look at the changelog and the changes that happened in the lock file and I believe this can be related to [email protected].

[RobinMalfait]

Small side note:

I attempted to create a Tailwind Play link, but couldn't figure out how to add tailwind nesting plugin :( The plugins property in config expects an array, but the docs on tailwind website has plugins as an object!

Here it is, if you can get tailwindcss/nesting working...
https://play.tailwindcss.com/cm3UJrabZH?file=css

This is because tailwindcss/nesting is a PostCSS plugin and not a Tailwind CSS plugin.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #9722, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.

[gynekolog]

I want to send a reproduction playground url but the issue was closed during writing this comment.
I don't want put it to the trash, so there is link: https://play.tailwindcss.com/s5COLNwEYk?file=css

Thank you, @RobinMalfait , for the fix.

[Techn1x]

Amazing, thankyou for the rapid fix.

[RobinMalfait]

@gynekolog yep! If you switch to the insiders build on Tailwind Play, then you can see the fix in action: https://play.tailwindcss.com/ex9MjTpmCU?file=css
@Techn1x you're welcome!

I'll also make sure to do a release asap.