From 561983d7e526c58ca5fdbdc5fde12623622fd9e3 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 9 Oct 2025 11:58:51 +0200
Subject: [PATCH] Suppress warnings when using `:deep`, `:slotted` and
 `:global` (#19094)

This PR ignores warnings related to `:deep`, `:slotted` and `:global`
used by frameworks like Vue (see:
https://vuejs.org/api/sfc-css-features#deep-selectors).

## Test plan

Used a `:deep()` selector in a test project (Catalyst).

```diff
diff --git a/templates/catalyst/src/tailwind.css b/templates/catalyst/src/tailwind.css
index 79887e67..2acb749c 100644
--- a/templates/catalyst/src/tailwind.css
+++ b/templates/catalyst/src/tailwind.css
@@ -9,3 +9,7 @@
   --font-sans: Inter, sans-serif;
   --font-sans--font-feature-settings: 'cv11';
 }
+
+:deep(.foo) {
+  color: red;
+}
```

Before:

<img width="1625" height="372" alt="image"
src="https://github.com/user-attachments/assets/4b948080-1aeb-41ba-8268-98828da21768"
/>


After:

<img width="717" height="114" alt="image"
src="https://github.com/user-attachments/assets/b8668da2-693e-4010-99fb-de3bc4a47bf9"
/>


Fixes:
https://github.com/tailwindlabs/tailwindcss/pull/18918#issuecomment-3384928613
---
 CHANGELOG.md                               |  1 +
 packages/@tailwindcss-node/src/optimize.ts | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a9ccfdab..98231ff23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](https://github.com/tailwindlabs/tailwindcss/pull/19069))
+- Suppress Lightning CSS warnings about `:deep`, `:slotted` and `:global` ([#19094](https://github.com/tailwindlabs/tailwindcss/pull/19094))
 
 ## [4.1.14] - 2025-10-01
 
diff --git a/packages/@tailwindcss-node/src/optimize.ts b/packages/@tailwindcss-node/src/optimize.ts
index 0fc752102..6e60f8b87 100644
--- a/packages/@tailwindcss-node/src/optimize.ts
+++ b/packages/@tailwindcss-node/src/optimize.ts
@@ -60,6 +60,17 @@ export function optimize(
   let result = optimize(Buffer.from(input), map)
   map = result.map?.toString()
 
+  result.warnings = result.warnings.filter((warning) => {
+    // Ignore warnings about unknown pseudo-classes as they are likely caused
+    // by the use of `:deep()`, `:slotted()`, and `:global()` which are not
+    // standard CSS but are commonly used in frameworks like Vue.
+    if (/'(deep|slotted|global)' is not recognized as a valid pseudo-/.test(warning.message)) {
+      return false
+    }
+
+    return true
+  })
+
   // Because of `errorRecovery: true`, there could be warnings, so let's let the
   // user know about them.
   if (process.env.NODE_ENV !== 'test' && result.warnings.length > 0) {