Error when box-shadow is set no none #10403

asharghi · 2023-10-12T09:11:05Z

Issue Description

After updating to core 8.6, I get this error. Seems to work with box-shadow: none anyway, but the error should be removed

CONSOLE ERROR: Error: Failed to apply property [box-shadow] with value [none] to Button(11). TypeError: Cannot read properties of null (reading 'values')
  JS:     at parseCSSShadow (file: app/webpack:/css-test/node_modules/@nativescript/core/ui/styling/css-shadow.js:58:0)
  JS:     at valueConverter (file: app/webpack:/css-test/node_modules/@nativescript/core/ui/styling/style-properties.js:1146:29)
  JS:     at Style.setCssValue [as css:box-shadow] (file: app/webpack:/css-test/node_modules/@nativescript/core/ui/core/properties/index.js:573:0)
  JS:     at CssState.setPropertyValues (file: app/webpack:/css-test/node_modules/@nativescript/core/ui/styling/style-scope.js:555:47)
  JS:     at file: app/webpack:/css-test/node_modules/@nativescript/core/ui/styling/style-scope.js:431:0
  JS:     at Button._batchUpdate (file: app/webpack:/css-test/node_modules/@nativescript/core/ui/core/view-base/index.js:361:0)
  JS:     at CssState.updateDynamicState (file: app/webpack:/css-test/node_modules/@nativescript/core/ui/styling/style-scope.js:429:0)
  JS:     at CssState.onLoaded (file: app/webpack:/css-test/node_modules/@nativescript/core/ui/styling/style-scope.js:399:0)
  JS:     at Button.onLoaded (file://github.com/data/data/org.nativescript.csst...

Reproduction

Add an element with box-shadow: none in css or inline style

Relevant log output (if applicable)

No response

Environment

"dependencies": {
    "@nativescript/core": "~8.6.0",
    "@nativescript/theme": "~3.0.2",
    "nativescript-vue": "~2.9.3"
  },
  "devDependencies": {
    "@nativescript/android": "8.5.4",
    "@nativescript/webpack": "~5.0.18",
    "nativescript-vue-template-compiler": "~2.9.3"
  }

Please accept these terms

I have searched the existing issues as well as StackOverflow and this has not been posted before
This is a bug report
I agree to follow this project's Code of Conduct

The text was updated successfully, but these errors were encountered:

CatchABus · 2023-10-12T11:51:01Z

Issue Description

After updating to core 8.6, I get this error. Seems to work with box-shadow: none anyway, but the error should be removed

Did this value apply without problems in prior versions?
EDITED: @NathanWalker I checked commits and I think text-stroke PR broke this detail because we split shadow parse functions.

NathanWalker · 2023-10-12T20:25:36Z

Thanks @CatchABus yep see what it is, we'll include in a patch.

closes #10403

Reached · 2023-11-13T20:39:41Z

Has this fix been published? :)

EDIT

I see that it's part of 8.6.1, however it does not seem to work for me, my app still crashes until I remove the box-shadow: none; from the respective elements which has it.

NathanWalker · 2023-11-14T01:41:47Z

That sounds odd - your lock file reflects 8.6+?

Reached · 2023-11-14T09:47:29Z

Yes indeed.

From the lock file:

"dependencies": {
        "@nativescript-community/ui-material-bottom-navigation": "^7.2.7",
        "@nativescript/core": "^8.6.1",

I do a clean install with ns clean and then ns run android --no-hmr, but the result is the same :/

I worked around it by only using box-shadow: none for iOS.

CatchABus · 2023-11-15T23:19:21Z

I confirmed this. It seems latest fix does not help with box shadow as there are few cases in core that still rely on shadow being null when none, in order to determine whether it should be drawn.
We should definitely revisit the problem.

NathanWalker · 2023-11-16T06:21:10Z

Lets reopen this and get a proper patch published, thanks for bringing this up.

NathanWalker · 2023-11-18T22:19:25Z

@asharghi @CatchABus I tried to repro this and see no errors? All render properly and with no shadow.

<Button style="box-shadow: none" />

<Button boxShadow="none" />

<Button class="none" />

.none {
  box-shadow: none;
}

CatchABus · 2023-11-19T01:53:14Z

@asharghi @CatchABus I tried to repro this and see no errors? All render properly and with no shadow.
<Button style="box-shadow: none" />

<Button boxShadow="none" />

<Button class="none" />

.none {
  box-shadow: none;
}

Shadow should actually throw on android specifically. On iOS, it will not throw any errors but will attempt to create CALayers for shadow while not needed instead.

I found few locations affected by parseCSSShadow changes:
https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/styling/style-properties.ts#L1234
https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/styling/background-common.ts#L314
https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/text-base/index.ios.ts#L418

These cases rely on box shadow or text shadow being null when none, after parsing.

NathanWalker · 2023-11-19T02:00:14Z

Ok thanks that makes sense now. We'll fix android to be ignored as well in this case.

closes #10403

asharghi added the bug-pending-triage Reported bug, pending triage to confirm. label Oct 12, 2023

NathanWalker self-assigned this Oct 12, 2023

NathanWalker added in progress hacktoberfest and removed bug-pending-triage Reported bug, pending triage to confirm. labels Oct 12, 2023

NathanWalker added a commit that referenced this issue Oct 13, 2023

fix(core): box-shadow 'none' handling

c58b502

closes #10403

NathanWalker mentioned this issue Oct 13, 2023

fix(core): box-shadow 'none' handling #10405

Merged

5 tasks

NathanWalker closed this as completed in #10405 Oct 14, 2023

NathanWalker reopened this Nov 16, 2023

NathanWalker added a commit that referenced this issue Nov 19, 2023

fix(css): box-shadow none handling

b3f8910

closes #10403

NathanWalker mentioned this issue Nov 19, 2023

fix(css): box-shadow none handling #10445

Merged

5 tasks

NathanWalker closed this as completed in #10445 Nov 19, 2023

NathanWalker added a commit that referenced this issue Nov 19, 2023

fix(css): box-shadow none handling (#10445)

6744009

closes #10403

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when box-shadow is set no none #10403

Error when box-shadow is set no none #10403

asharghi commented Oct 12, 2023 •

edited

Loading

CatchABus commented Oct 12, 2023 •

edited

Loading

Issue Description

NathanWalker commented Oct 12, 2023

Reached commented Nov 13, 2023 •

edited

Loading

NathanWalker commented Nov 14, 2023

Reached commented Nov 14, 2023

CatchABus commented Nov 15, 2023 •

edited

Loading

NathanWalker commented Nov 16, 2023

NathanWalker commented Nov 18, 2023 •

edited

Loading

CatchABus commented Nov 19, 2023 •

edited

Loading

NathanWalker commented Nov 19, 2023

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!

Error when box-shadow is set no none #10403

Error when box-shadow is set no none #10403

Comments

asharghi commented Oct 12, 2023 • edited Loading

Issue Description

Reproduction

Relevant log output (if applicable)

Environment

Please accept these terms

CatchABus commented Oct 12, 2023 • edited Loading

Issue Description

NathanWalker commented Oct 12, 2023

Reached commented Nov 13, 2023 • edited Loading

NathanWalker commented Nov 14, 2023

Reached commented Nov 14, 2023

CatchABus commented Nov 15, 2023 • edited Loading

NathanWalker commented Nov 16, 2023

NathanWalker commented Nov 18, 2023 • edited Loading

CatchABus commented Nov 19, 2023 • edited Loading

NathanWalker commented Nov 19, 2023

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!

asharghi commented Oct 12, 2023 •

edited

Loading

CatchABus commented Oct 12, 2023 •

edited

Loading

Reached commented Nov 13, 2023 •

edited

Loading

CatchABus commented Nov 15, 2023 •

edited

Loading

NathanWalker commented Nov 18, 2023 •

edited

Loading

CatchABus commented Nov 19, 2023 •

edited

Loading