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
This commit is contained in:
Robin Malfait 2025-10-09 11:58:51 +02:00 committed by GitHub
parent 0c8d881f0e
commit 561983d7e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 0 deletions

View File

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

View File

@ -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) {