f723e834ad
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 <malfait.robin@gmail.com> |
||
|---|---|---|
| .. | ||
| src | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsup.config.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.