Skip to content

fix(compiler): transform pseudo selectors correctly for the encapsulated view #57796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Conversation

GeorgySerga
Copy link
Contributor

fix scoping and transforming logic of the shimCssText for the components with encapsulated view:

  • add support for pseudo selector functions
  • apply content scoping for inner selectors of :is() and :where()
  • allow multiple comma separated selectors inside pseudo selectors

Fixes #45686

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Pseudo selector functions aren't parsed/transformed correctly at the moment
The provided examples inside the issue are added as unit tests as well as other test cases.
Issue Number: #45686

What is the new behavior?

Specified in unit tests.

  • selectors are parsed by comma if comma is not inside the parenthesis, for example :where(.one, .two) stays as a single selector for scoping, previously it was split into two parts :where(.one and .two).
  • selector parts aren't broken into pieces by combinators if they are within parenthesis, for example :where(.one > .two) isn't split
  • selectors within :is() and :where() are being scoped internally, that is especially important for :where() since this selectors doesn't increase specificity, allowing overloading theme specific values not risking order related issues.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@pullapprove pullapprove bot requested a review from crisbeto September 12, 2024 20:52
@angular-robot angular-robot bot added the area: compiler Issues related to `ngc`, Angular's template compiler label Sep 12, 2024
@ngbot ngbot bot added this to the Backlog milestone Sep 12, 2024
@GeorgySerga GeorgySerga force-pushed the pseudo-selector-functions branch from c341504 to d7d92a7 Compare September 13, 2024 06:35
@crisbeto crisbeto added the action: global presubmit The PR is in need of a google3 global presubmit label Sep 18, 2024
@crisbeto
Copy link
Member

Running a TGP since encapsulation changes tend to be break-ey.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Sep 18, 2024
@angular-robot angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Sep 23, 2024
@ngbot ngbot bot modified the milestone: Backlog Sep 23, 2024
@GeorgySerga
Copy link
Contributor Author

Thank you @crisbeto ! I patched my change with more tests and support for more complex selectors. The internal presubmit test, which failed previously, passed with new changes.

@crisbeto
Copy link
Member

I re-ran the TGP with the latest code, but there are still some breakages.

@angular-robot angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Sep 23, 2024
@ngbot ngbot bot modified the milestone: Backlog Sep 23, 2024
@angular-robot angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Sep 24, 2024
@ngbot ngbot bot modified the milestone: Backlog Sep 24, 2024
@angular-robot angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Sep 26, 2024
@angular-robot angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Oct 9, 2024
@ngbot ngbot bot modified the milestone: Backlog Oct 9, 2024
@GeorgySerga GeorgySerga force-pushed the pseudo-selector-functions branch from 920eb91 to d146513 Compare October 9, 2024 21:23
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 10, 2024
JsantosDK pushed a commit to JsantosDK/angular that referenced this pull request Nov 11, 2024
…ted view (angular#57796)

fix scoping and transforming logic of the `shimCssText` for the
components with encapsulated view:
- add support for pseudo selector functions
- apply content scoping for inner selectors of `:is()` and `:where()`
- allow multiple comma separated selectors inside pseudo selectors

Fixes angular#45686

PR Close angular#57796
JsantosDK pushed a commit to JsantosDK/angular that referenced this pull request Nov 11, 2024
allow css combinators within pseudo selector functions, parsing those
correctly. Similarly to previous version, don't break selectors
into part if combinators are within parenthesis, for example
`:where(.one > .two)`

PR Close angular#57796
JsantosDK pushed a commit to JsantosDK/angular that referenced this pull request Nov 11, 2024
JsantosDK pushed a commit to JsantosDK/angular that referenced this pull request Nov 11, 2024
…ar#57796)

add support for nested and deeply nested (up to three levels) selectors,
parse multiple :host selectors, scope selectors within pseudo functions

PR Close angular#57796
JsantosDK pushed a commit to JsantosDK/angular that referenced this pull request Nov 11, 2024
JsantosDK pushed a commit to JsantosDK/angular that referenced this pull request Nov 11, 2024
…angular#57796)

fix regexp which is used to test for host inside pseudo selectors

PR Close angular#57796
JsantosDK pushed a commit to JsantosDK/angular that referenced this pull request Nov 11, 2024
…crease specificity (angular#57796)

parse constructions like `:where(:host-context(.foo))` correctly
revert logic which lead to decreased specificity if `:where` was applied
to another selector, for example `div` is transformed to `div[contenta]`
with specificity of (0,1,1) so `div:where(.foo)` should not decrease it
leading to `div[contenta]:where(.foo)` with the same specificity (0,1,1)
instead of `div:where(.foo[contenta])` with specificity equal to (0,0,1)

PR Close angular#57796
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker area: compiler Issues related to `ngc`, Angular's template compiler target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Emulated view encapsulation incorrectly transforms CSS that uses :is() or :where()
3 participants