Don't warn about Angular's ::ng-deep and :host-context() when optimizing CSS

[weilinzung]

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.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 64dd569f-7c3e-482e-b318-66d65dce2dd7

📥 Commits

Reviewing files that changed from the base of the PR and between 1283281 and 635abb6.

📒 Files selected for processing (1)

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

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

CSS optimization no longer reports unknown pseudo-class and pseudo-element warnings for Vue selectors (:deep, :slotted, :global) and Angular selectors (::ng-deep, :host-context). The warning-filter documentation and Unreleased changelog entry now describe the Angular selector handling.

Merge Risk: ⚪ Minimal · up to 635ab

This narrowly suppresses warnings for Angular selectors that are removed before reaching browsers while preserving warnings for genuine unknown selectors; no actionable merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: suppressing CSS optimization warnings for Angular's ::ng-deep and :host-context() selectors.
Description check	✅ Passed	The description explains the Angular warning issue, the filter change, expected behavior, and test results. It is directly related to the changeset.
Linked Issues check	✅ Passed	The implementation satisfies issue #20433 by filtering warnings for Angular's ::ng-deep and :host-context() selectors while preserving generated CSS and warnings for genuine unknown pseudo-selecto…
Out of Scope Changes check	✅ Passed	The changes are limited to the optimizer warning filter, explanatory comments, and a related changelog entry. No unrelated code changes are present.

Full details: Linked Issues check

Explanation

The implementation satisfies issue #20433 by filtering warnings for Angular's ::ng-deep and :host-context() selectors while preserving generated CSS and warnings for genuine unknown pseudo-selectors.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

_{Reviews (2): Last reviewed commit: "Update packages/@tailwindcss-node/src/op..." | Re-trigger Greptile}

[RobinMalfait]

Thanks!