fix(compiler): handle css selectors with space after an escaped character #48558

JeanMeche · 2022-12-21T09:41:54Z

In Css, selectors with escaped characters require a space after if the following character is a hex character. ie: .\fc ber which match class="über"
These escaped selectors happen for example when esbuild run with optimization.minify

fixes #48524

PR Type

What kind of change does this PR introduce?

Bugfix

Does this PR introduce a breaking change?

No

JeanMeche · 2022-12-21T15:55:53Z

packages/compiler/src/shadow_css.ts

@@ -152,6 +152,7 @@ const animationKeywords = new Set([
  in comments in lieu of the next selector when running under polyfill.
 */
 export class ShadowCss {
+  // TODO: Is never re-assigned, could be removed.


Any insights if this could be safely removed ?

ah yeah good spot 🤔 , by looking at the git history I think it might have been added initially to keep the code in this file close to the original webcomponents.js implementation, even initially this was already used but not re-assigned: d67f029#diff-8100ed7347ea0eb1cd98948f17ca578cfc288fc0d58538e3a83db9dac133276b

I bet that the file has strained a lot from the original webcomponents.js code, I wonder if there's still have any value in keeping this in 🤔

JeanMeche · 2022-12-24T15:26:00Z

Presubmit is failing, it seems the test coverage isn't enough. I'd appreciate if someone takes the time to check what has been broken.

atscott · 2023-01-04T00:25:27Z

The failing tests are covering safari, which I don't think our CI runs. I tried copy/pasting the regex as well into safari and get the same error as the internal tests

JeanMeche · 2023-01-04T12:55:35Z

Thx for the feedback @atscott, turns out JSCore unlike V8 doesn't support variable length lookbehind in regex.

I proposed an alternative fix.

Edit: Still broken, even though the regex is the same now.

dylhunn · 2023-01-06T00:30:21Z

Converting back to draft, since it seems like work is ongoing.

JeanMeche · 2023-01-10T15:41:19Z

@dylhunn Actually, I would expect my commit to not break any tests. test_win seems like a false negative.
Also my latest push was just a rebase.

Thanks for your time !

atscott · 2023-01-11T21:48:18Z

packages/compiler/test/shadow_css/shadow_css_spec.ts

+    it('should handle escaped selector with space (if followed by a hex char)', () => {
+      expect(s('.\\fc ber {}', 'contenta')).toEqual('.\\fc ber[contenta] {}');
+      expect(s('.\\fc ker {}', 'contenta')).toEqual('.\\fc[contenta] ker[contenta] {}');
+      expect(s('.pr\\fc fung {}', 'contenta')).toEqual('.pr\\fc fung[contenta] {}');
+    });


Is there any way these tests can be made to actually verify the behaviors rather than the implementation details? That is, write a test with a selector like über and verify it works as expected. I'm guessing not since the discussion in the bug describes needing to run esbuild with optimization.minify. At the very least, it would be good to document in the code comment why/what is converting über to .fc ber

There is a CSS.escape in js but it doesn't do the same as the esbuild. So yeah I don't much of a possiblity to test it.
I added a comment about it in the test and the implementation.

dylhunn · 2023-01-24T12:27:09Z

@JeanMeche Looks like this needs a rebase?

…cter. In Css, selectors with escaped characters require a space after if the following character is a hex character. ie: .\fc ber which matches class="über" These escaped selectors happen for example when esbuild run with `optimization.minify` fixes angular#48524

dylhunn · 2023-01-24T13:33:36Z

caretaker: windows failure appears to be a flake

jessicajaniuk · 2023-01-24T17:46:36Z

This PR was merged into the repository by commit bc8cfa2.

…cter. (#48558) In Css, selectors with escaped characters require a space after if the following character is a hex character. ie: .\fc ber which matches class="über" These escaped selectors happen for example when esbuild run with `optimization.minify` fixes #48524 PR Close #48558

…ed character. (angular#48558)" This reverts commit bc8cfa2.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fanimations/15.1.1/15.1.2) | | [@angular/common](https://github.com/angular/angular) | dependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fcommon/15.1.1/15.1.2) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/15.1.1/15.1.2) | | [@angular/compiler-cli](https://github.com/angular/angular/tree/main/packages/compiler-cli) ([source](https://github.com/angular/angular)) | devDependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/15.1.1/15.1.2) | | [@angular/core](https://github.com/angular/angular) | dependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fcore/15.1.1/15.1.2) | | [@angular/forms](https://github.com/angular/angular) | dependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fforms/15.1.1/15.1.2) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/15.1.1/15.1.2) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | patch | [`15.1.1` -> `15.1.2`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/15.1.1/15.1.2) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v15.1.2`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1512-2023-01-25) [Compare Source](angular/angular@15.1.1...15.1.2) ##### compiler | Commit | Type | Description | | -- | -- | -- | | [98ccb57117](angular/angular@98ccb57) | fix | handle css selectors with space after an escaped character. ([#48558](angular/angular#48558)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [145f848a10](angular/angular@145f848) | fix | resolve deprecation warning ([#48812](angular/angular#48812)) | ##### router | Commit | Type | Description | | -- | -- | -- | | [a6b10f6e59](angular/angular@a6b10f6) | fix | 'createUrlTreeFromSnapshot' with empty paths and named outlets ([#48734](angular/angular#48734)) | #### Special Thanks Alan Agius, AleksanderBodurri, Andrew Kushnir, Andrew Scott, Charles Lyding, Dylan Hunn, JoostK, Matthieu Riegler, Paul Gschwendtner, Payam Valadkhan, Virginia Dooley, Yann Thomas LE MOIGNE and dario-piotrowicz  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1751 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

…cter. (angular#48558) In Css, selectors with escaped characters require a space after if the following character is a hex character. ie: .\fc ber which matches class="über" These escaped selectors happen for example when esbuild run with `optimization.minify` fixes angular#48524 PR Close angular#48558

In prod builds, selectors are optimized and spaces a removed. angular#48558 introduced a regression on selectors without spaces. This commit fixes tihs. Fixes angular#49100

angular-automatic-lock-bot · 2023-02-24T16:06:52Z

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.}

JeanMeche force-pushed the fix/escaped-unicode-selectors branch from 86619a9 to 8ebe1dc Compare December 21, 2022 09:56

JeanMeche closed this Dec 21, 2022

JeanMeche reopened this Dec 21, 2022

JeanMeche marked this pull request as ready for review December 21, 2022 09:56

pullapprove bot requested a review from atscott December 21, 2022 09:57

JeanMeche force-pushed the fix/escaped-unicode-selectors branch from 8ebe1dc to 4eeefc7 Compare December 21, 2022 15:55

JeanMeche commented Dec 21, 2022

View reviewed changes

JeanMeche force-pushed the fix/escaped-unicode-selectors branch 2 times, most recently from bc01058 to 29264da Compare December 26, 2022 01:38

JeanMeche force-pushed the fix/escaped-unicode-selectors branch from 29264da to f951834 Compare January 4, 2023 12:54

JeanMeche force-pushed the fix/escaped-unicode-selectors branch 2 times, most recently from 6e92732 to 16f2b4c Compare January 5, 2023 12:45

dylhunn marked this pull request as draft January 6, 2023 00:30

JeanMeche force-pushed the fix/escaped-unicode-selectors branch from 16f2b4c to 7416193 Compare January 7, 2023 01:40

JeanMeche marked this pull request as ready for review January 10, 2023 15:39

atscott reviewed Jan 11, 2023

View reviewed changes

JeanMeche force-pushed the fix/escaped-unicode-selectors branch 2 times, most recently from ba94b1c to 4b8a6ed Compare January 11, 2023 22:09

atscott approved these changes Jan 12, 2023

View reviewed changes

atscott added the target: patch This PR is targeted for the next patch release label Jan 12, 2023

JeanMeche force-pushed the fix/escaped-unicode-selectors branch from 4b8a6ed to f363d07 Compare January 12, 2023 17:04

angular-robot bot requested a review from atscott January 12, 2023 17:04

jessicajaniuk added the area: compiler Issues related to `ngc`, Angular's template compiler label Jan 18, 2023

ngbot bot added this to the Backlog milestone Jan 18, 2023

dylhunn added the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jan 24, 2023

dylhunn self-requested a review January 24, 2023 12:27

dylhunn approved these changes Jan 24, 2023

View reviewed changes

JeanMeche force-pushed the fix/escaped-unicode-selectors branch from f363d07 to 1ba1105 Compare January 24, 2023 13:11

jessicajaniuk removed the request for review from atscott January 24, 2023 17:45

jessicajaniuk removed the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Jan 24, 2023

jessicajaniuk closed this in bc8cfa2 Jan 24, 2023

jessicajaniuk pushed a commit to jessicajaniuk/angular that referenced this pull request Jan 24, 2023

Revert "fix(compiler): handle css selectors with space after an escap…

9bcd966

…ed character. (angular#48558)" This reverts commit bc8cfa2.

JeanMeche mentioned this pull request Feb 16, 2023

CSS styles not applied if using attribute HostBinding and styling a DIV with the direct child selector in a production build #49100

Closed

JeanMeche mentioned this pull request Feb 16, 2023

fix(compiler): apply style on :host attribudes in prod builds. #49118

Closed

2 tasks

angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 24, 2023

JeanMeche deleted the fix/escaped-unicode-selectors branch February 27, 2023 13:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(compiler): handle css selectors with space after an escaped character #48558

fix(compiler): handle css selectors with space after an escaped character #48558

JeanMeche commented Dec 21, 2022 •

edited

JeanMeche Dec 21, 2022

dario-piotrowicz Dec 24, 2022

JeanMeche commented Dec 24, 2022 •

edited

atscott commented Jan 4, 2023

JeanMeche commented Jan 4, 2023 •

edited

dylhunn commented Jan 6, 2023

JeanMeche commented Jan 10, 2023 •

edited

atscott Jan 11, 2023

JeanMeche Jan 12, 2023

dylhunn commented Jan 24, 2023

dylhunn commented Jan 24, 2023

jessicajaniuk commented Jan 24, 2023

angular-automatic-lock-bot bot commented Feb 24, 2023

fix(compiler): handle css selectors with space after an escaped character #48558

fix(compiler): handle css selectors with space after an escaped character #48558

Conversation

JeanMeche commented Dec 21, 2022 • edited

PR Type

Does this PR introduce a breaking change?

JeanMeche Dec 21, 2022

Choose a reason for hiding this comment

dario-piotrowicz Dec 24, 2022

Choose a reason for hiding this comment

JeanMeche commented Dec 24, 2022 • edited

atscott commented Jan 4, 2023

JeanMeche commented Jan 4, 2023 • edited

dylhunn commented Jan 6, 2023

JeanMeche commented Jan 10, 2023 • edited

atscott Jan 11, 2023

Choose a reason for hiding this comment

JeanMeche Jan 12, 2023

Choose a reason for hiding this comment

dylhunn commented Jan 24, 2023

dylhunn commented Jan 24, 2023

jessicajaniuk commented Jan 24, 2023

angular-automatic-lock-bot bot commented Feb 24, 2023

JeanMeche commented Dec 21, 2022 •

edited

JeanMeche commented Dec 24, 2022 •

edited

JeanMeche commented Jan 4, 2023 •

edited

JeanMeche commented Jan 10, 2023 •

edited