feat(compiler): warn when style suffixes are used with attribute bindings #46651

atscott · 2022-06-30T20:53:43Z

This commit adds an extended diagnostic which warns when style suffixes such as '.px'
are used with attribute bindings (attr.width.px).

Fixes #36256

AndrewKushnir

Looks great 👍

packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts

AndrewKushnir

Reviewed-for: public-api

pkozlowski-opensource

LGTM overall but there are some legit CI failures. I will re-review / approve once CI gets green.

pkozlowski-opensource · 2022-07-07T13:54:42Z

...i/src/ngtsc/typecheck/extended/test/checks/suffix_not_supported/suffix_not_supported_spec.ts

+      const {program, templateTypeChecker} = setup([{
+        fileName,
+        templates: {
+          'TestCmp': `<div [attr.width.px]="1"></div>`,


Should we warn for the class cases (ex. [class.width.px])?

Would people really write class.width.px? What does that even mean? class="1px"?

Edit: I'm marking this as merge ready and can do a follow-up if you still think the warning should be produced for class bindings.

pkozlowski-opensource

LGTM for the intended change. IMO we could extend diagnostic / add a test for the [class.width.px] cases. I'm fine if this is done in a separate PR.

Reviewed-for: public-api

atscott · 2022-07-07T19:04:57Z

merge assistance: Cannot dismiss other reviewers

…ings This commit adds an extended diagnostic which warns when style suffixes such as '.px' are used with attribute bindings (attr.width.px). Fixes angular#36256

…te bindings

jessicajaniuk · 2022-07-08T18:33:00Z

This PR was merged into the repository by commit 9e836c2.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/animations](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fanimations/14.0.6/14.1.0) | | [@angular/common](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcommon/14.0.6/14.1.0) | | [@angular/compiler](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/14.0.6/14.1.0) | | [@angular/compiler-cli](https://github.com/angular/angular) | devDependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/14.0.6/14.1.0) | | [@angular/core](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcore/14.0.6/14.1.0) | | [@angular/forms](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fforms/14.0.6/14.1.0) | | [@angular/platform-browser](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/14.0.6/14.1.0) | | [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/14.0.6/14.1.0) | --- ### Release Notes <details> <summary>angular/angular</summary> ### [`v14.1.0`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1410-2022-07-20) [Compare Source](angular/angular@14.0.7...14.1.0) #### Deprecations ##### core - The `createNgModuleRef` is deprecated in favor of newly added `createNgModule` one. - The bit field signature of `inject()` has been deprecated, in favor of the new options object. Correspondingly, `InjectFlags` is deprecated as well. ##### animations | Commit | Type | Description | | -- | -- | -- | | [55308f2df5](angular/angular@55308f2) | feat | add `provideAnimations()` and `provideNoopAnimations()` functions ([#46793](angular/angular#46793)) | ##### common | Commit | Type | Description | | -- | -- | -- | | [4a2e7335b1](angular/angular@4a2e733) | feat | make the `CommonModule` pipes standalone ([#46401](angular/angular#46401)) | | [a7597dd080](angular/angular@a7597dd) | feat | make the CommonModule directives standalone ([#46469](angular/angular#46469)) | ##### compiler | Commit | Type | Description | | -- | -- | -- | | [33ce3883a5](angular/angular@33ce388) | feat | Add extended diagnostic to warn when missing let on ngForOf ([#46683](angular/angular#46683)) | | [6f11a58040](angular/angular@6f11a58) | feat | Add extended diagnostic to warn when text attributes are intended to be bindings ([#46161](angular/angular#46161)) | | [9e836c232f](angular/angular@9e836c2) | feat | warn when style suffixes are used with attribute bindings ([#46651](angular/angular#46651)) | ##### compiler-cli | Commit | Type | Description | | -- | -- | -- | | [93c65e7b14](angular/angular@93c65e7) | feat | add extended diagnostic for non-nullable optional chains ([#46686](angular/angular#46686)) | | [131d029da1](angular/angular@131d029) | feat | detect missing control flow directive imports in standalone components ([#46146](angular/angular#46146)) | | [6b8e60c06a](angular/angular@6b8e60c) | fix | improve the missingControlFlowDirective message ([#46846](angular/angular#46846)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [e8e8e5f171](angular/angular@e8e8e5f) | feat | add `createComponent` function | | [b5153814af](angular/angular@b515381) | feat | add `reflectComponentType` function | | [96c6139c9a](angular/angular@96c6139) | feat | add ability to set inputs on ComponentRef ([#46641](angular/angular#46641)) | | [a6d5fe202c](angular/angular@a6d5fe2) | feat | alias `createNgModuleRef` as `createNgModule` ([#46789](angular/angular#46789)) | | [71e606d3c3](angular/angular@71e606d) | feat | expose EnvironmentInjector on ApplicationRef ([#46665](angular/angular#46665)) | | [19e6d9ccd3](angular/angular@19e6d9c) | feat | import AsyncStackTaggingZone if available ([#46693](angular/angular#46693)) | | [a7a14df5f8](angular/angular@a7a14df) | feat | introduce `EnvironmentInjector.runInContext` API ([#46653](angular/angular#46653)) | | [fa52b6e906](angular/angular@fa52b6e) | feat | options object to supersede bit flags for `inject()` ([#46649](angular/angular#46649)) | | [af20112222](angular/angular@af20112) | feat | support the descendants option for ContentChild queries ([#46638](angular/angular#46638)) | | [945a3ad359](angular/angular@945a3ad) | fix | Fix `runInContext` for `NgModuleRef` injector ([#46877](angular/angular#46877)) | | [bb7c80477b](angular/angular@bb7c804) | fix | make parent injector argument required in `createEnvironmentInjector` ([#46397](angular/angular#46397)) | ##### http | Commit | Type | Description | | -- | -- | -- | | [82acbf919b](angular/angular@82acbf9) | feat | improve error message for nullish header ([#46059](angular/angular#46059)) | ##### router | Commit | Type | Description | | -- | -- | -- | | [53ca936366](angular/angular@53ca936) | feat | Add ability to create `UrlTree` from any `ActivatedRouteSnapshot` ([#45877](angular/angular#45877)) | | [de058bba99](angular/angular@de058bb) | feat | Add CanMatch guard to control whether a Route should match ([#46021](angular/angular#46021)) | | [6c1357dd7d](angular/angular@6c1357d) | feat | Add stable cancelation code to `NavigationCancel` event ([#46675](angular/angular#46675)) | | [a4ce273e50](angular/angular@a4ce273) | feat | Add the target `RouterStateSnapshot` to `NavigationError` ([#46731](angular/angular#46731)) | | [abe3759e24](angular/angular@abe3759) | fix | allow to return `UrlTree` from `CanMatchFn` ([#46455](angular/angular#46455)) | | [e8c7dd10e9](angular/angular@e8c7dd1) | fix | Ensure `APP_INITIALIZER` of `enabledBlocking` option completes ([#46026](angular/angular#46026)) | | [ce20ed067f](angular/angular@ce20ed0) | fix | Ensure Route injector is created before running CanMatch guards ([#46394](angular/angular#46394)) | | [6a7b818d94](angular/angular@6a7b818) | fix | Ensure target `RouterStateSnapshot` is defined in `NavigationError` ([#46842](angular/angular#46842)) | | [f94c6f433d](angular/angular@f94c6f4) | fix | Expose CanMatchFn as public API ([#46394](angular/angular#46394)) | | [e8ae0fe3e9](angular/angular@e8ae0fe) | fix | Fix cancellation code for canLoad rejections ([#46752](angular/angular#46752)) | ##### upgrade | Commit | Type | Description | | -- | -- | -- | | [e9cb0454dc](angular/angular@e9cb045) | feat | more closely align `UpgradeModule#bootstrap()` with `angular.bootstrap()` ([#46214](angular/angular#46214)) | #### Special Thanks AleksanderBodurri, Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Cédric Exbrayat, Dmitrij Kuba, Dylan Hunn, George Kalpakas, Jessica Janiuk, JiaLiPassion, Joey Perrott, John Vandenberg, JoostK, Keith Li, Or'el Ben-Ya'ir, Paul Gschwendtner, Pawel Kozlowski, SyedAhm3r, arturovt, mariu, markostanimirovic and mgechev  ### [`v14.0.7`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#1407-2022-07-20) [Compare Source](angular/angular@14.0.6...14.0.7) ##### animations | Commit | Type | Description | | -- | -- | -- | | [5bdbb6285b](angular/angular@5bdbb62) | fix | make sure falsy values are added to \_globalTimelineStyles ([#46863](angular/angular#46863)) | ##### compiler | Commit | Type | Description | | -- | -- | -- | | [41253f9c46](angular/angular@41253f9) | fix | inputs/outputs incorrectly parsed in jit mode ([#46813](angular/angular#46813)) | ##### core | Commit | Type | Description | | -- | -- | -- | | [4e77c7fbf3](angular/angular@4e77c7f) | fix | do not invoke jasmine `done` callback multiple times with `waitForAsync` | #### Special Thanks Andrew Kushnir, Andrew Scott, Bob Watson, Cédric Exbrayat, Doug Parker, George Kalpakas, Jessica Janiuk, Kristiyan Kostadinov, Paul Gschwendtner, acvi, dario-piotrowicz, jnizet and piyush132000  </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, click this checkbox. --- 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/1472 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 · 2022-08-08T16:07:05Z

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

atscott requested a review from AndrewKushnir June 30, 2022 20:53

pullapprove bot requested review from dylhunn and pkozlowski-opensource June 30, 2022 20:53

atscott force-pushed the unsupportedsuffic branch 4 times, most recently from 5cec296 to aa27db6 Compare June 30, 2022 22:01

AndrewKushnir approved these changes Jun 30, 2022

View reviewed changes

packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts Outdated Show resolved Hide resolved

pullapprove bot requested review from alxhub June 30, 2022 22:52

AndrewKushnir approved these changes Jun 30, 2022

View reviewed changes

pkozlowski-opensource reviewed Jul 1, 2022

View reviewed changes

pullapprove bot requested a review from pkozlowski-opensource July 1, 2022 08:09

atscott force-pushed the unsupportedsuffic branch from aa27db6 to bdcf05f Compare July 6, 2022 15:18

atscott added this to the Fixit H1'2022 milestone Jul 6, 2022

ngbot bot removed this from the Fixit H1'2022 milestone Jul 6, 2022

atscott force-pushed the unsupportedsuffic branch 2 times, most recently from 2e46adf to cc7a88d Compare July 6, 2022 16:28

atscott added target: minor This PR is targeted for the next minor release compiler: extended diagnostics labels Jul 6, 2022

pkozlowski-opensource reviewed Jul 7, 2022

View reviewed changes

pullapprove bot requested a review from pkozlowski-opensource July 7, 2022 13:54

pkozlowski-opensource approved these changes Jul 7, 2022

View reviewed changes

atscott added action: merge The PR is ready for merge by the caretaker merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note labels Jul 7, 2022

jessicajaniuk added the area: compiler Issues related to `ngc`, Angular's template compiler label Jul 8, 2022

ngbot bot added this to the Backlog milestone Jul 8, 2022

feat(compiler): warn when style suffixes are used with attribute bind…

66b0526

…ings This commit adds an extended diagnostic which warns when style suffixes such as '.px' are used with attribute bindings (attr.width.px). Fixes angular#36256

atscott force-pushed the unsupportedsuffic branch from cc7a88d to 8627129 Compare July 8, 2022 16:40

fixup! feat(compiler): warn when style suffixes are used with attribu…

fdab7fc

…te bindings

atscott force-pushed the unsupportedsuffic branch from 8627129 to fdab7fc Compare July 8, 2022 17:25

jessicajaniuk closed this in 9e836c2 Jul 8, 2022

This was referenced Aug 1, 2022

build(deps-dev): bump @angular/compiler from 12.2.4 to 14.1.0 numbersprotocol/capture-lite#1885

Closed

build(deps-dev): bump @angular/language-service from 12.2.4 to 14.1.0 numbersprotocol/capture-lite#1879

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(compiler): warn when style suffixes are used with attribute bindings #46651

feat(compiler): warn when style suffixes are used with attribute bindings #46651

atscott commented Jun 30, 2022

AndrewKushnir left a comment

AndrewKushnir left a comment

pkozlowski-opensource left a comment

pkozlowski-opensource Jul 7, 2022

atscott Jul 7, 2022 •

edited

pkozlowski-opensource left a comment

atscott commented Jul 7, 2022

jessicajaniuk commented Jul 8, 2022

angular-automatic-lock-bot bot commented Aug 8, 2022

feat(compiler): warn when style suffixes are used with attribute bindings #46651

feat(compiler): warn when style suffixes are used with attribute bindings #46651

Conversation

atscott commented Jun 30, 2022

AndrewKushnir left a comment

Choose a reason for hiding this comment

AndrewKushnir left a comment

Choose a reason for hiding this comment

pkozlowski-opensource left a comment

Choose a reason for hiding this comment

pkozlowski-opensource Jul 7, 2022

Choose a reason for hiding this comment

atscott Jul 7, 2022 • edited

Choose a reason for hiding this comment

pkozlowski-opensource left a comment

Choose a reason for hiding this comment

atscott commented Jul 7, 2022

jessicajaniuk commented Jul 8, 2022

angular-automatic-lock-bot bot commented Aug 8, 2022

atscott Jul 7, 2022 •

edited