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

9.0.0-rc.5: ngStyle border style with undefined values create wrong css properties (with ivy enabled) #34310

Closed
j-oliveras opened this issue Dec 9, 2019 · 1 comment

Comments

@j-oliveras
Copy link

@j-oliveras j-oliveras commented Dec 9, 2019

Affected Package

The issue is caused by package @angular/common with needs ivy enabled

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.14 or 9.0.0 with ivy disabled.

Description

Assigning a ngStyle with the value below (in ts file) generates invalid css properties.

  style = {
    "border-top-color": undefined,
    "border-top-style": undefined,
    // "border-left-color": undefined,
    // "border-right-color": undefined,
    "border-color": "Red",
    "border-style": "solid",
    "border-width": "1rem",
  };

That create a border with the top part invisible. Uncomment border-left-color or border-right-color make that side black. Commenting the border-top-* properties the error disappears.

🔬 Minimal Reproduction

https://github.com/j-oliveras/bug-ngstyle
Steeps:

I create a stackblitz repo (same code as github repo) that NOT reproduce the error (is ivy disabled?). It works as example of that I expected.
https://stackblitz.com/edit/angular-issue-repro2-652jty

🌍 Your Environment

Angular Version:


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.0-rc.5
Node: 12.13.0
OS: win32 x64

Angular: 9.0.0-rc.5
... cli, common, compiler, compiler-cli, core, language-service
... platform-browser, platform-browser-dynamic
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.5
@angular-devkit/build-angular     0.900.0-rc.5
@angular-devkit/build-optimizer   0.900.0-rc.5
@angular-devkit/build-webpack     0.900.0-rc.5
@angular-devkit/core              9.0.0-rc.5
@angular-devkit/schematics        9.0.0-rc.5
@ngtools/webpack                  9.0.0-rc.5
@schematics/angular               9.0.0-rc.5
@schematics/update                0.900.0-rc.5
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2
@ngbot ngbot bot added this to the needsTriage milestone Dec 9, 2019
@kara kara modified the milestones: v9-candidates, v9-blockers Dec 12, 2019
mnahkies added a commit to mnahkies/angular that referenced this issue Dec 16, 2019
Prior to ivy, undefined values passed in an object to the
ngStyle directive were ignored. Restore this behavior by
filtering out keys that point to undefined values.

closes angular#34310
mnahkies added a commit to mnahkies/angular that referenced this issue Dec 16, 2019
Prior to ivy, undefined values passed in an object to the
ngStyle directive were ignored. Restore this behavior by
ignoring keys that point to undefined values.

closes angular#34310
@manughub manughub assigned manughub and matsko and unassigned manughub Dec 16, 2019
@kara kara added the state: has PR label Dec 16, 2019
kara added a commit that referenced this issue Dec 16, 2019
Prior to ivy, undefined values passed in an object to the
ngStyle directive were ignored. Restore this behavior by
ignoring keys that point to undefined values.

closes #34310

PR Close #34422
@kara kara closed this in 1144ce9 Dec 16, 2019
@angular-automatic-lock-bot

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Jan 16, 2020

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 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
5 participants
You can’t perform that action at this time.