mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
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:
parent
0c8d881f0e
commit
561983d7e5
@ -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
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user