Skip to content
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

CSS parsing fixes #49460

Closed
wants to merge 4 commits into from
Closed

CSS parsing fixes #49460

wants to merge 4 commits into from

Conversation

alan-agius4
Copy link
Contributor

@alan-agius4 alan-agius4 commented Mar 17, 2023

fix(compiler): do not unquote CSS values

Currently we are unsafely unquoting CSS values which in some cases causes valid values to become invalid and invalid values to become valid.

Example:

<div style="width:&quot;1px;&quot;"></div>

In the above case, width has an invalid value of "1px", however the compiler will transform it to 1px which makes it valid.

On the other hand, in the below case

<div style="content:&quot;foo&quot;"></div>

content has a valid value of "foo", but since the compiler unwraps it to foo it becomes invalid. For correctness, we should not remove quotes.

const div = document.createElement('div');
div.style.width='"1px"';
div.style.content='foo';

div.style.width; // ''
div.style.content; // ''


div.style.width='1px';
div.style.content='"foo"';

div.style.width; // '1px'
div.style.content; // '"foo"'

More information about values can be found https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier


fix(core): set style property value to empty string instead of an invalid value

Currently when the value of a styling property that has a unit is empty string a invalid value is generated.

Example:
[style.width.px] = "" will generate a value of "px", when instead it should be "".

This causes browser to reset the value to an empty string. This is however not the case in Domino with changes in angular/domino@bfc9114.


Related to #49445
TGP 🟢 : http://test/OCL:517391008:BASE:517903049:1679305336599:6def8c79
Failing target CL: http://cl/517411522

alan-agius4 added a commit to alan-agius4/domino that referenced this pull request Mar 17, 2023
This commit backport style parser fixes from angular/angular#49460
@pkozlowski-opensource pkozlowski-opensource added the area: compiler Issues related to `ngc`, Angular's template compiler label Mar 17, 2023
@ngbot ngbot bot added this to the Backlog milestone Mar 17, 2023
@alan-agius4 alan-agius4 added the action: global presubmit The PR is in need of a google3 global presubmit label Mar 17, 2023
@alan-agius4 alan-agius4 removed the action: global presubmit The PR is in need of a google3 global presubmit label Mar 17, 2023
@alan-agius4 alan-agius4 marked this pull request as ready for review March 17, 2023 14:54
@pullapprove pullapprove bot requested review from alxhub and JoostK March 17, 2023 14:54
@alan-agius4 alan-agius4 added the action: review The PR is still awaiting reviews from at least one requested reviewer label Mar 17, 2023
@alan-agius4 alan-agius4 added the target: patch This PR is targeted for the next patch release label Mar 17, 2023
@alan-agius4 alan-agius4 removed the request for review from JoostK March 17, 2023 15:10
@alan-agius4 alan-agius4 added the area: core Issues related to the framework runtime label Mar 17, 2023
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

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

@alan-agius4 thanks for the PR, I've left a couple comments about existing tests that look legit to me (and we shouldn't remove them), so I'm curious if they work with the changes from this PR.

I think it'd be great if @pkozlowski-opensource can take a look as well to double-check that we are not missing any important use-cases.

@alan-agius4 alan-agius4 added action: global presubmit The PR is in need of a google3 global presubmit core: stylesheets and removed action: global presubmit The PR is in need of a google3 global presubmit labels Mar 20, 2023
@alan-agius4 alan-agius4 removed the request for review from alxhub March 21, 2023 14:29
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

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

Thanks for additional information @alan-agius4 👍

The change looks good and I'd like to ask @pkozlowski-opensource to also take a look when he get a chance, so we have more coverage from reviewers perspective (Pawel might be more familiar with this subsystem).

Copy link
Member

@pkozlowski-opensource pkozlowski-opensource left a comment

Choose a reason for hiding this comment

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

The change LGTM overall but I would very much expect to see more tests (left comments with some of the scenarios) hence adding the cleanup label.

@pkozlowski-opensource pkozlowski-opensource added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Mar 28, 2023
…alid value

Currently when the value of a styling property that has a unit is empty string a invalid value is generated.

Example:
`[style.width.px] = ""` will generate a value of `"px"`, when instead it should be `""`.

This causes browser to reset the value to an empty string. This is however not the case in Domino with changes in angular/domino@bfc9114.

This commit fixes the issues and generate correct values.
Currently we are unsafely unquoting CSS values which in some cases causes valid values to become invalid and invalid values to become valid.

Example:
```html
<div style="width:&quot;1px;&quot;"></div>
```

In the above case, `width` has an invalid value of `"1px"`, however the compiler will transform it to `1px` which makes it valid.

On the other hand,  in the below case
```html
<div style="content:&quot;foo&quot;"></div>
```

`content` has a valid value of `"foo"`, but since the compiler unwraps it to `foo` it becomes invalid. For correctness, we should not remove quotes.

```js
const div = document.createElement('div');
div.style.width='"1px"';
div.style.content='foo';

div.style.width; // ''
div.style.content; // ''

div.style.width='1px';
div.style.content='"foo"';

div.style.width; // '1px'
div.style.content; // '"foo"'
```

More information about values can be found https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
@alan-agius4 alan-agius4 removed the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Mar 28, 2023
@pkozlowski-opensource pkozlowski-opensource added the action: merge The PR is ready for merge by the caretaker label Mar 28, 2023
@alan-agius4 alan-agius4 added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Mar 28, 2023
@alan-agius4
Copy link
Contributor Author

Caretaker: G3 failures are pre-existing.

@atscott
Copy link
Contributor

atscott commented Mar 28, 2023

This PR was merged into the repository by commit 1829542.

@atscott atscott closed this in fdafdb7 Mar 28, 2023
atscott pushed a commit that referenced this pull request Mar 28, 2023
Currently we are unsafely unquoting CSS values which in some cases causes valid values to become invalid and invalid values to become valid.

Example:
```html
<div style="width:&quot;1px;&quot;"></div>
```

In the above case, `width` has an invalid value of `"1px"`, however the compiler will transform it to `1px` which makes it valid.

On the other hand,  in the below case
```html
<div style="content:&quot;foo&quot;"></div>
```

`content` has a valid value of `"foo"`, but since the compiler unwraps it to `foo` it becomes invalid. For correctness, we should not remove quotes.

```js
const div = document.createElement('div');
div.style.width='"1px"';
div.style.content='foo';

div.style.width; // ''
div.style.content; // ''

div.style.width='1px';
div.style.content='"foo"';

div.style.width; // '1px'
div.style.content; // '"foo"'
```

More information about values can be found https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

PR Close #49460
atscott pushed a commit that referenced this pull request Mar 28, 2023
…alid value (#49460)

Currently when the value of a styling property that has a unit is empty string a invalid value is generated.

Example:
`[style.width.px] = ""` will generate a value of `"px"`, when instead it should be `""`.

This causes browser to reset the value to an empty string. This is however not the case in Domino with changes in angular/domino@bfc9114.

This commit fixes the issues and generate correct values.

PR Close #49460
atscott pushed a commit that referenced this pull request Mar 28, 2023
Currently we are unsafely unquoting CSS values which in some cases causes valid values to become invalid and invalid values to become valid.

Example:
```html
<div style="width:&quot;1px;&quot;"></div>
```

In the above case, `width` has an invalid value of `"1px"`, however the compiler will transform it to `1px` which makes it valid.

On the other hand,  in the below case
```html
<div style="content:&quot;foo&quot;"></div>
```

`content` has a valid value of `"foo"`, but since the compiler unwraps it to `foo` it becomes invalid. For correctness, we should not remove quotes.

```js
const div = document.createElement('div');
div.style.width='"1px"';
div.style.content='foo';

div.style.width; // ''
div.style.content; // ''

div.style.width='1px';
div.style.content='"foo"';

div.style.width; // '1px'
div.style.content; // '"foo"'
```

More information about values can be found https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

PR Close #49460
@alan-agius4 alan-agius4 deleted the css-fixes branch March 28, 2023 18:45
alan-agius4 added a commit to angular/domino that referenced this pull request Mar 29, 2023
This commit backport style parser fixes from angular/angular#49460
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Mar 30, 2023
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/animations](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fanimations/15.2.4/15.2.5) |
| [@angular/common](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcommon/15.2.4/15.2.5) |
| [@angular/compiler](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/15.2.4/15.2.5) |
| [@angular/compiler-cli](https://github.com/angular/angular/tree/main/packages/compiler-cli) ([source](https://github.com/angular/angular)) | devDependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/15.2.4/15.2.5) |
| [@angular/core](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fcore/15.2.4/15.2.5) |
| [@angular/forms](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fforms/15.2.4/15.2.5) |
| [@angular/platform-browser](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/15.2.4/15.2.5) |
| [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | patch | [`15.2.4` -> `15.2.5`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/15.2.4/15.2.5) |

---

### Release Notes

<details>
<summary>angular/angular</summary>

### [`v15.2.5`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#&#8203;1525-2023-03-29)

[Compare Source](angular/angular@15.2.4...15.2.5)

##### common

| Commit | Type | Description |
| -- | -- | -- |
| [ca5acadb78](angular/angular@ca5acad) | fix | invalid ImageKit transformation ([#&#8203;49201](angular/angular#49201)) |

##### compiler

| Commit | Type | Description |
| -- | -- | -- |
| [077f6b4674](angular/angular@077f6b4) | fix | do not unquote CSS values ([#&#8203;49460](angular/angular#49460)) |
| [c3cff35869](angular/angular@c3cff35) | fix | handle trailing comma in object literal ([#&#8203;49535](angular/angular#49535)) |

##### core

| Commit | Type | Description |
| -- | -- | -- |
| [d201fc2dec](angular/angular@d201fc2) | fix | set style property value to empty string instead of an invalid value ([#&#8203;49460](angular/angular#49460)) |

##### router

| Commit | Type | Description |
| -- | -- | -- |
| [978d37f324](angular/angular@978d37f) | fix | Ensure Router preloading works with lazy component and static children ([#&#8203;49571](angular/angular#49571)) |
| [a844435514](angular/angular@a844435) | fix | fix [#&#8203;49457](angular/angular#49457) outlet activating with old info ([#&#8203;49459](angular/angular#49459)) |

#### Special Thanks

Alan Agius, Andrew Scott, Asaf Malin, Jan Cabadaj, Kristiyan Kostadinov, Matthieu Riegler, Paul Gschwendtner, Sid and Tano Abeleyra

<!-- CHANGELOG SPLIT MARKER -->

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

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNS4yNC41IiwidXBkYXRlZEluVmVyIjoiMzUuMjQuNSJ9-->

Co-authored-by: cabr2-bot <cabr2.help@gmail.com>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1842
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>
@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 Apr 28, 2023
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 area: core Issues related to the framework runtime core: stylesheets merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants