Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Comments

Close side panel

fix(compiler): fix emulated css functional selectors scoping#45807

Closed
dario-piotrowicz wants to merge 1 commit intoangular:mainangular/angular:mainfrom
dario-piotrowicz:fix-css-functional-pseudo-classesdario-piotrowicz/angular:fix-css-functional-pseudo-classesCopy head branch name to clipboard
Closed

fix(compiler): fix emulated css functional selectors scoping#45807
dario-piotrowicz wants to merge 1 commit intoangular:mainangular/angular:mainfrom
dario-piotrowicz:fix-css-functional-pseudo-classesdario-piotrowicz/angular:fix-css-functional-pseudo-classesCopy head branch name to clipboard

Conversation

@dario-piotrowicz
Copy link
Contributor

@dario-piotrowicz dario-piotrowicz commented Apr 28, 2022

currently in emulated view encapsulation if a selector contains a
functional pseudo-class selector (such as :is() for example) and
contains different spaces and commas inside the parenthesis such
characters are handle as if there where part of a normal selector
thus causing various parsing issues, solve this issue by
escaping/unescaping the content of such selectors

Basically if a selector is:
:is(.foo, .bar):not(.baz)
escape it to :is_PLACEHOLDER_:not__PLACEHOLDER__,
handle/scope it as normal and then
revert back the placeholders to the original values

resolves #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:

Issue

Issue Number: #45686

Does this PR introduce a breaking change?

  • Yes
  • No

@pullapprove pullapprove bot requested a review from alxhub April 28, 2022 22:26
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PS, I could actually get the placeholders not to include the parenthesis so that here we would have:
':is(%SELECTORFNARGS%):not(%SELECTORFNARGS%):not(%SELECTORFNARGS%) {}'

but I opted for not doing that as it would require extra logic to be run and it also doesn't really seem to add any actual value to the solution

@dario-piotrowicz dario-piotrowicz force-pushed the fix-css-functional-pseudo-classes branch 3 times, most recently from ed66073 to 5421982 Compare April 29, 2022 08:05
@dario-piotrowicz dario-piotrowicz changed the title fix(compiler): make sure css functional selectors are handled correctly fix(compiler): fix emulated css functional selectors scoping Apr 29, 2022
@dylhunn dylhunn added the area: compiler Issues related to `ngc`, Angular's template compiler label May 2, 2022
@ngbot ngbot bot added this to the Backlog milestone May 2, 2022
@dario-piotrowicz dario-piotrowicz force-pushed the fix-css-functional-pseudo-classes branch from 5421982 to bc82d99 Compare May 3, 2022 20:46
@dylhunn dylhunn added core: CSS encapsulation action: review The PR is still awaiting reviews from at least one requested reviewer action: rerun CI at HEAD labels May 16, 2022
@dylhunn
Copy link
Contributor

dylhunn commented May 16, 2022

Thanks Dario, is this ready for review?

@dario-piotrowicz
Copy link
Contributor Author

Thanks Dario, is this ready for review?

Yes 馃槂

@dylhunn
Copy link
Contributor

dylhunn commented May 17, 2022

Mind rebasing and reformatting for lint? I will run a presubmit and find a reviewer

@dario-piotrowicz dario-piotrowicz force-pushed the fix-css-functional-pseudo-classes branch from bc82d99 to c0de124 Compare May 17, 2022 18:49
@dario-piotrowicz
Copy link
Contributor Author

Mind rebasing and reformatting for lint? I will run a presubmit and find a reviewer

done, thank you very much! 馃槃 馃檹

@dylhunn dylhunn self-requested a review May 17, 2022 18:54
@dylhunn
Copy link
Contributor

dylhunn commented Jun 24, 2022

@AndrewKushnir @JoostK What do you guys this of this? It looks OK to me, but I'm admittedly not an expert in this area

@jessicajaniuk jessicajaniuk requested review from AndrewKushnir and removed request for alxhub July 15, 2022 16:05
@dario-piotrowicz dario-piotrowicz force-pushed the fix-css-functional-pseudo-classes branch from c0de124 to e261835 Compare July 15, 2022 22:51
@AndrewKushnir
Copy link
Contributor

@dario-piotrowicz thanks for creating this PR. We've reviewed the changes and there are some potential risks related to the extra processing. We'd need to dedicate additional time to dig into the code more, investigate potential implications and work with Google's codebase (if needed). Since the original issue doesn't have a strong signal from the community, we plan to put this PR on hold (close it for now). We'll come back to this fix if there is a stronger signal from the community in the original bug report. Thank you.

@dario-piotrowicz
Copy link
Contributor Author

@dario-piotrowicz thanks for creating this PR. We've reviewed the changes and there are some potential risks related to the extra processing. We'd need to dedicate additional time to dig into the code more, investigate potential implications and work with Google's codebase (if needed). Since the original issue doesn't have a strong signal from the community, we plan to put this PR on hold (close it for now). We'll come back to this fix if there is a stronger signal from the community in the original bug report. Thank you.

馃槩
I thought that this was a very safe change since it is simply applying the same type of logic that we have in other parts of the css shimming.

Also even if it doesn't have a strong signal from the community, it does look to me like this is basic functionality which should indeed work (like in the reproduction in the issue itself, there is no clear indication that this sort of thing doesn't work, it simply generates some css which is just plain wrong).

Anyways if it introduces some risks and you don't feel comfortable merging it, I understand, I hope that maybe it can be revisited at some point.

Please let me know if there is anything I can do to help here 馃檪

@AndrewKushnir AndrewKushnir reopened this Jul 19, 2022
@AndrewKushnir
Copy link
Contributor

Discussed offline: we'll run a TGP for this change and decide how to proceed based on the outcome.

@AndrewKushnir AndrewKushnir added the action: global presubmit The PR is in need of a google3 global presubmit label Jul 19, 2022
@dario-piotrowicz dario-piotrowicz force-pushed the fix-css-functional-pseudo-classes branch from e261835 to 53d83f8 Compare July 19, 2022 22:30
@AndrewKushnir
Copy link
Contributor

Global Presubmit.

@dario-piotrowicz dario-piotrowicz force-pushed the fix-css-functional-pseudo-classes branch 2 times, most recently from b6bbe51 to f5f2d91 Compare July 26, 2022 21:19
@AndrewKushnir AndrewKushnir self-assigned this Aug 2, 2022
currently in emulated view encapsulation if a selector contains a
functional pseudo-class selector (such as :is() for example) and
contains different spaces and commas inside the parenthesis such
characters are handle as if there where part of a normal selector
thus causing various parsing issues, solve this issue by
escaping/unescaping the content of such selectors

Basically if a selector is:
 `:is(.foo, .bar):not(.baz)`
 escape it to `:is_PLACEHOLDER_:not__PLACEHOLDER__`,
 handle/scope it as normal and then
 revert back the placeholders to the original values

resolves angular#45686
@faileon
Copy link

faileon commented Nov 5, 2023

Hi, are there any plans to resolve this PR? It is now starting to be problem with Tailwind 3.3+ since their dark mode class strategy now uses :is() pseudo-class function.

@JeanMeche
Copy link
Member

I propose to take this over with #49169

@JeanMeche JeanMeche closed this Dec 8, 2023
@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 Jan 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: global presubmit The PR is in need of a google3 global presubmit action: review The PR is still awaiting reviews from at least one requested reviewer area: compiler Issues related to `ngc`, Angular's template compiler core: CSS encapsulation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

5 participants

Morty Proxy This is a proxified and sanitized view of the page, visit original site.