From f723e834ad032aa0f42405f95f684be3cfcac8ef Mon Sep 17 00:00:00 2001 From: Wei Date: Mon, 31 Aug 2026 06:14:54 -0400 Subject: [PATCH] Don't warn about Angular's `::ng-deep` and `:host-context()` when optimizing CSS (#20434) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #20433. The warning filter in `optimize.ts` already ignores `:deep()`, `:slotted()` and `:global()`. Angular's two deep selectors are the same kind of thing — non-standard pseudo-selectors that the framework's compiler resolves before the CSS reaches a browser — but they aren't covered, so every Angular component stylesheet using them prints a warning block per occurrence. ``` Found 2 warnings while optimizing generated CSS: Issue #1: │ :host ::ng-deep .some-child, :host ┆ ^-- 'ng-deep' is not recognized as a valid pseudo-element. Did you mean ':ng-deep' (pseudo-class) or is this a typo? ``` Angular strips both during view-encapsulation shimming — `::ng-deep` via `_shadowDeepSelectors = /(?:>>>)|(?:\/deep\/)|(?:::ng-deep)/g`, and `:host-context()` in the same pass — so neither ever reaches a browser. Worth noting that `/deep/` and `>>>`, Angular's two other spellings of the deep selector, already pass silently because `nonStandard.deepSelectorCombinator` is enabled. `::ng-deep` is the only one that warns, and it's the spelling the Angular docs use — so in practice every Angular codebase hits this. On the workspace where I ran into it (7 Angular apps), a production build printed 425 `ng-deep` warnings and 2 `host-context` ones. ## Test plan There's no automated coverage here because the warning path is behind `process.env.NODE_ENV !== 'test'`, so a spy sees nothing under Vitest regardless of the filter — the same reason #20277 shipped without one. Instead I ran the file before and after the change against Lightning CSS 1.33.0 directly, counting emitted warning blocks: | Input | Before | After | | --- | --- | --- | | `:host ::ng-deep .a, :host ::ng-deep .b { … }` | 1 | 0 | | `:host-context(.dark) .a { … }` | 1 | 0 | | `:deep(.a) { … }` | 0 | 0 | | `.a::totally-not-real { … }` — genuine typo | 1 | **1** | Generated CSS is byte-identical before and after; only the warning is suppressed. Genuine unknown pseudo-selectors still warn, so the typo hint the message exists for is preserved. Happy to restructure this if you'd prefer the predicate extracted so it can be unit-tested, or to split `ng-deep` and `host-context` into their own block rather than extending the existing regex. A minimal reproduction of the original issue is at https://gist.github.com/weilinzung/ace42ceb95c2f47b6747cc1f34f162bd. --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + packages/@tailwindcss-node/src/optimize.ts | 12 ++++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fec361f5..ac2ac8d83 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Canonicalization: don't merge utilities that reference different theme variables set to CSS-wide keywords like `unset` ([#20417](https://github.com/tailwindlabs/tailwindcss/pull/20417)) - Don't generate utilities when a modifier is used that would otherwise be silently ignored (e.g. `rounded-sm/[5]`, `shadow-sm/foo`, `stroke-2/50`) ([#20419](https://github.com/tailwindlabs/tailwindcss/pull/20419)) - Only normalize top-level `and`, `or`, and `not` keywords in `supports-[…]` variants (e.g. `selector(a: not (.foo))` → `selector(a:not(.foo))`) ([#20420](https://github.com/tailwindlabs/tailwindcss/pull/20420)) +- Don't warn about Angular's `::ng-deep` and `:host-context()` when optimizing CSS ([#20434](https://github.com/tailwindlabs/tailwindcss/pull/20434)) ## [4.3.3] - 2026-07-16 diff --git a/packages/@tailwindcss-node/src/optimize.ts b/packages/@tailwindcss-node/src/optimize.ts index 6e60f8b87..2f0d39589 100644 --- a/packages/@tailwindcss-node/src/optimize.ts +++ b/packages/@tailwindcss-node/src/optimize.ts @@ -61,10 +61,14 @@ export function optimize( 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)) { + // Ignore warnings about unknown pseudo-classes that are used in frameworks + // such as Vue or Angular and are handled by their own compilers, before + // reaching the browser. + if ( + /'(deep|slotted|global|ng-deep|host-context)' is not recognized as a valid pseudo-/.test( + warning.message, + ) + ) { return false }