Error when box-shadow is set no none

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

@NathanWalker

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.

@CatchABus

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

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

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.

That sounds odd - your lock file reflects 8.6+?

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.

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.

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

@asharghi

@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;
}

@asharghi

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

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

fix(css): box-shadow none handling

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

Navigation Menu

Repository navigation

Error when box-shadow is set no none #10403

Issue Description

Reproduction

Relevant log output (if applicable)

Environment

Please accept these terms

Issue Description

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Error when box-shadow is set no none #10403

Description

Issue Description

Reproduction

Relevant log output (if applicable)

Environment

Please accept these terms

Activity

CatchABus commented on Oct 12, 2023

Issue Description

NathanWalker commented on Oct 12, 2023

Reached commented on Nov 13, 2023

NathanWalker commented on Nov 14, 2023

Reached commented on Nov 14, 2023

CatchABus commented on Nov 15, 2023

NathanWalker commented on Nov 16, 2023

NathanWalker commented on Nov 18, 2023

CatchABus commented on Nov 19, 2023

NathanWalker commented on Nov 19, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions