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: a2c23b85-095d-4748-a05a-90dc1b9419a7

📥 Commits

Reviewing files that changed from the base of the PR and between 90f8ff4 and 1283281.

📒 Files selected for processing (2)

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

Included review availability: Your plan provides up to 10 included reviews per hour; 8 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 change expands the warning-filter documentation and adds an Unreleased changelog entry.

Merge Risk: ⚪ Minimal · up to 12832

This localized change suppresses warnings for Angular selectors that are removed before reaching browsers while preserving warnings for genuine unknown selectors; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary change: suppressing Angular ::ng-deep and :host-context() warnings during CSS optimization.
Description check	✅ Passed	The description directly explains the Angular selector warning problem, the implementation, the preserved CSS output, and the validation results.
Linked Issues check	✅ Passed	The changes satisfy issue #20433 by suppressing warnings for Angular ::ng-deep and :host-context() selectors while retaining existing Vue selector exceptions and warnings for genuine unknown pseudo-se…
Out of Scope Changes check	✅ Passed	The changes are limited to the CSS warning filter and its changelog entry. No unrelated code changes are identified.

Full details: Linked Issues check

Explanation

The changes satisfy issue #20433 by suppressing warnings for Angular ::ng-deep and :host-context() selectors while retaining existing Vue selector exceptions 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, with no concrete blocking or independently actionable non-blocking issue identified.

The change narrowly extends an existing diagnostic filter for two documented framework selectors while leaving optimization output and unrelated warning handling unchanged.

_{Reviews (1): Last reviewed commit: "Add changelog entry" | Re-trigger Greptile}