Skip to content

Don't warn about Angular's ::ng-deep when optimizing generated CSS - #20437

Open
koreahghg wants to merge 2 commits into
tailwindlabs:mainfrom
koreahghg:fix/optimize-ng-deep-warning
Open

Don't warn about Angular's ::ng-deep when optimizing generated CSS#20437
koreahghg wants to merge 2 commits into
tailwindlabs:mainfrom
koreahghg:fix/optimize-ng-deep-warning

Conversation

@koreahghg

Copy link
Copy Markdown
Contributor

Summary

Fixes #20433.

optimizeCss filters Lightning CSS warnings for the framework-specific deep selectors Vue emits (:deep(), :slotted(), :global()), but Angular's ::ng-deep isn't covered by that filter, so every Angular stylesheet using it prints a warning during optimization:

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?

The existing regex (/'(deep|slotted|global)' is not recognized as a valid pseudo-/) requires a ' immediately before deep, but Lightning CSS's message quotes the full token 'ng-deep', so the character before deep is -, not ', and the filter never matches.

::ng-deep is Angular's supported deep-selector spelling (aliased to >>>//deep/, which are already silently accepted via nonStandard.deepSelectorCombinator), and it's the spelling used in Angular's own docs, so it's hit by essentially every Angular codebase that uses view-encapsulation-piercing styles.

Changes

  • packages/@tailwindcss-node/src/optimize.ts: add ng-deep to the warning-suppression regex.
  • packages/@tailwindcss-node/src/optimize.test.ts (new): covers that ::ng-deep no longer warns, that the existing :deep()/:slotted()/:global() suppression still works, and that a genuinely unrecognized pseudo-element still warns (so the filter isn't overly broad).
  • CHANGELOG.md: added an entry under Unreleased > Fixed.

Test plan

  • Added packages/@tailwindcss-node/src/optimize.test.ts and ran it with vitest run packages/@tailwindcss-node/src/optimize.test.tsβ€” all 3 pass.
  • Verified the new test fails on the pre-fix code (only the ::ng-deep case fails) by temporarily reverting the regex change and re-running.
  • Ran the full @tailwindcss/node package test suite (vitest run --project @tailwindcss/node) β€” all 10 tests pass, no regressions.
  • pnpm run lint (prettier check) passes on the changed files.

Lightning CSS's unknown-pseudo-element message quotes `ng-deep`, not
`deep`, so the existing filter for `:deep()`/`:slotted()`/`:global()`
never matched it and every Angular stylesheet using `::ng-deep`
printed a spurious warning during `optimizeCss`.
@koreahghg
koreahghg requested a review from a team as a code owner August 28, 2026 00:17
@coderabbitai

coderabbitai Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

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: f7548d5e-294b-421e-909f-7de50374834e

πŸ“₯ Commits

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

πŸ“’ Files selected for processing (3)
  • CHANGELOG.md
  • packages/@tailwindcss-node/src/optimize.test.ts
  • 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

The CSS optimization warning filter now ignores Angular's ::ng-deep selector warnings alongside existing :deep(), :slotted(), and :global() warnings. Tests cover suppressed warnings for these selectors and confirm that unknown pseudo-elements still trigger console.warn. The changelog records the change.

Merge Risk: βšͺ Minimal Β· up to 82870

This change suppresses a false warning for Angular’s supported ::ng-deep selector while preserving warnings for genuinely unrecognized pseudo-elements. No actionable merge-blocking risk remains after normal checks and review.

πŸš₯ Pre-merge checks | βœ… 4
βœ… Passed checks (4 passed)
Check name Status Explanation
Title check βœ… Passed The title clearly and concisely describes the primary change: suppressing Angular ::ng-deep warnings during generated CSS optimization.
Description check βœ… Passed The description directly explains issue #20433, the warning-filter change, test coverage, and changelog update.
Linked Issues check βœ… Passed The pull request satisfies issue #20433 by suppressing the ::ng-deep warning, preserving warnings for unrelated invalid pseudo-elements, adding regression tests, and documenting the fix.
Out of Scope Changes check βœ… Passed The implementation, tests, and changelog entry are directly related to the linked issue and stated objectives. No unrelated changes are present.

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

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

@greptile-apps

greptile-apps Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Confidence Score: 5/5

The PR appears safe to merge with no actionable correctness, security, or quality issues identified.

The warning filter is narrowly extended for the intended Angular selector, and the added tests cover both suppression behavior and preservation of unrelated diagnostics.

Reviews (1): Last reviewed commit: "Point changelog entry to PR #20437" | Re-trigger Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Optimizer warns on Angular's ::ng-deep β€” the :deep/:slotted/:global filter doesn't cover it

1 participant