Don’t move ::ng-deep pseudo element to end of selector when using @apply

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don’t move `::ng-deep` pseudo-element to end of selector when using `@apply` ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943))
 
 ## [3.3.1] - 2023-03-30
 

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',
 ]
 
 /**

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')
 })