Skip to content

Commit 561983d

Browse files
authored
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: #18918 (comment)
1 parent 0c8d881 commit 561983d

File tree

2 files changed

+12
-0
lines changed

2 files changed

+12
-0
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1414
### Fixed
1515

1616
- Fix Safari devtools rendering issue due to `color-mix` fallback ([#19069](https://github.com/tailwindlabs/tailwindcss/pull/19069))
17+
- Suppress Lightning CSS warnings about `:deep`, `:slotted` and `:global` ([#19094](https://github.com/tailwindlabs/tailwindcss/pull/19094))
1718

1819
## [4.1.14] - 2025-10-01
1920

packages/@tailwindcss-node/src/optimize.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,17 @@ export function optimize(
6060
let result = optimize(Buffer.from(input), map)
6161
map = result.map?.toString()
6262

63+
result.warnings = result.warnings.filter((warning) => {
64+
// Ignore warnings about unknown pseudo-classes as they are likely caused
65+
// by the use of `:deep()`, `:slotted()`, and `:global()` which are not
66+
// standard CSS but are commonly used in frameworks like Vue.
67+
if (/'(deep|slotted|global)' is not recognized as a valid pseudo-/.test(warning.message)) {
68+
return false
69+
}
70+
71+
return true
72+
})
73+
6374
// Because of `errorRecovery: true`, there could be warnings, so let's let the
6475
// user know about them.
6576
if (process.env.NODE_ENV !== 'test' && result.warnings.length > 0) {

0 commit comments

Comments
 (0)