@apply method is invalid after upgrade to 3.3.1

[scarqin]

What version of Tailwind CSS are you using?

v3.3.1

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

webpack 5.77.0

What version of Node.js are you using?

v16.16.0

What browser are you using?
Chrome

What operating system are you using?

macOS

Reproduction URL
https://github.com/Postcatlab/postcat/blob/3411792892633e5c53d4e86466a0fd52f4599f4a/src/browser/src/app/pages/workspace/overview/project-list/project-list.component.scss

Describe your issue
My previous version was 3.2.4 After upgrading to the latest version of 3.3.1, @apply is invalid.

• Angular 15.2.5

:host {
  .operate-btn-list {
    display: none;
  }

  .ant-card {
    @include hover-item;
  }

  ::ng-deep {
    .ant-list-items {
      .ant-list-item {
        @apply px-[10px] rounded-[3px];
        @include hover-item;

        border: 1px solid transparent;
      }
    }
  }
}

previous display

current display

[thecrypticace]

Hey! Thanks for reporting this. The kicker here is that Angular is technically using invalid syntax for this and a bug-fix resulted in it getting moved to the end of the selector.

However, we have a way to specify exceptions which I've done in #10943. This will be available in v3.3.2 (likely later this week).