diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts index e8dcd5ed8..9c48bde1b 100644 --- a/packages/core/ui/styling/style-scope.ts +++ b/packages/core/ui/styling/style-scope.ts @@ -721,25 +721,40 @@ export class CssState { cssExpsProperties[property] = value; continue; } - delete oldProperties[property]; - if (property in oldProperties && oldProperties[property] === value) { - // Skip unchanged values - continue; + + if (property in oldProperties) { + const oldValue = oldProperties[property]; + + delete oldProperties[property]; + + if (oldValue === value) { + // Skip unchanged values + continue; + } } + if (isCssVariable(property)) { view.style.setScopedCssVariable(property, value); delete newPropertyValues[property]; continue; } + valuesToApply[property] = value; } - //we need to parse CSS vars first before evaluating css expressions + + // we need to parse CSS vars first before evaluating css expressions for (const property in cssExpsProperties) { - delete oldProperties[property]; const value = evaluateCssExpressions(view, property, cssExpsProperties[property]); - if (property in oldProperties && oldProperties[property] === value) { - // Skip unchanged values - continue; + + if (property in oldProperties) { + const oldValue = oldProperties[property]; + + delete oldProperties[property]; + + if (oldValue === value) { + // Skip unchanged values + continue; + } } if (value === unsetValue) { delete newPropertyValues[property]; @@ -761,9 +776,11 @@ export class CssState { view[camelCasedProperty] = unsetValue; } } + // Set new values to the style for (const property in valuesToApply) { const value = valuesToApply[property]; + try { if (property in view.style) { view.style[`css:${property}`] = value;