diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js
--- a/src/util/formatVariantSelector.js
+++ b/src/util/formatVariantSelector.js
@@ -337,6 +337,9 @@ let pseudoElementExceptions = [
   '::-webkit-scrollbar-track-piece',
   '::-webkit-scrollbar-corner',
   '::-webkit-resizer',
+
+  // Old-style Angular Shadow DOM piercing pseudo element
+  '::ng-deep',
 ]
 
 /**

diff --git a/tests/apply.test.js b/tests/apply.test.js
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -2427,4 +2427,34 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  stable.test('::ng-deep pseudo element is left alone', () => {
+    let config = {
+      darkMode: 'class',
+      content: [
+        {
+          raw: html` <div class="foo bar"></div> `,
+        },
+      ],
+    }
+
+    let input = css`
+      ::ng-deep .foo .bar {
+        @apply font-bold;
+      }
+    `
+
+    return run(input, config).then((result) => {
+      expect(result.css).toMatchFormattedCss(css`
+        ::ng-deep .foo .bar {
+          font-weight: 700;
+        }
+      `)
+    })
+  })
+
+  // 1. `::ng-deep` is deprecated
+  // 2. It uses invalid selector syntax that Lightning CSS does not support
+  // It may be enough for Oxide to not support it at all
+  oxide.test.todo('::ng-deep pseudo element is left alone')
 })

@apply method is invalid after upgrade to 3.3.1
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**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

```scss
: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

![image](https://user-images.githubusercontent.com/15225835/229733712-d9d19b15-8461-4113-b2a5-7298d8cb71c4.png)

current display

![](https://user-images.githubusercontent.com/15225835/229733180-e01260c1-4772-45dd-848c-32ceb7696db1.png)




tests/apply.test.js