From f8909385c09c65b35aefa8703bb418704c986ef5 Mon Sep 17 00:00:00 2001 From: Osei Fortune Date: Tue, 30 Dec 2025 12:26:04 -0400 Subject: [PATCH 1/2] feat: bind overridden value converters to the target --- packages/core/ui/core/properties/index.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/core/ui/core/properties/index.ts b/packages/core/ui/core/properties/index.ts index 3d2b40ef96..5ceb255619 100644 --- a/packages/core/ui/core/properties/index.ts +++ b/packages/core/ui/core/properties/index.ts @@ -200,6 +200,7 @@ export class Property implements TypedPropertyDescriptor< let affectsLayout: boolean = options.affectsLayout; let valueChanged = options.valueChanged; let valueConverter = options.valueConverter; + let overrideConverter = false; this.overrideHandlers = function (options: PropertyOptions) { if (typeof options.equalityComparer !== 'undefined') { @@ -213,6 +214,7 @@ export class Property implements TypedPropertyDescriptor< } if (typeof options.valueConverter !== 'undefined') { valueConverter = options.valueConverter; + overrideConverter = true; } }; @@ -229,7 +231,7 @@ export class Property implements TypedPropertyDescriptor< value = wrapped ? WrappedValue.unwrap(boxedValue) : boxedValue; if (valueConverter && typeof value === 'string') { - value = valueConverter(value); + value = overrideConverter ? valueConverter.call(this, value) : valueConverter(value); } } @@ -372,7 +374,7 @@ export class CoercibleProperty extends Property imp let valueChanged = options.valueChanged; let valueConverter = options.valueConverter; let coerceCallback = options.coerceValue; - + let overrideConverter = false; const property = this; this.overrideHandlers = function (options: CoerciblePropertyOptions) { @@ -387,6 +389,7 @@ export class CoercibleProperty extends Property imp } if (typeof options.valueConverter !== 'undefined') { valueConverter = options.valueConverter; + overrideConverter = true; } if (typeof options.coerceValue !== 'undefined') { coerceCallback = options.coerceValue; @@ -411,7 +414,7 @@ export class CoercibleProperty extends Property imp value = wrapped ? WrappedValue.unwrap(boxedValue) : boxedValue; if (valueConverter && typeof value === 'string') { - value = valueConverter(value); + value = overrideConverter ? valueConverter.call(this, value) : valueConverter(value); } this[coerceKey] = value; @@ -615,6 +618,7 @@ export class CssProperty { let equalityComparer = options.equalityComparer; let valueChanged = options.valueChanged; let valueConverter = options.valueConverter; + let overrideConverter = false; this.overrideHandlers = function (options: CssPropertyOptions) { if (typeof options.equalityComparer !== 'undefined') { @@ -628,6 +632,7 @@ export class CssProperty { } if (typeof options.valueConverter !== 'undefined') { valueConverter = options.valueConverter; + overrideConverter = true; } }; @@ -649,7 +654,7 @@ export class CssProperty { delete this[sourceKey]; } else { this[sourceKey] = ValueSource.Local; - value = valueConverter && typeof newValue === 'string' ? valueConverter(newValue) : newValue; + value = valueConverter && typeof newValue === 'string' ? (overrideConverter ? valueConverter.call(view, newValue) : valueConverter(newValue)) : newValue; } const oldValue = (key in this ? this[key] : defaultValue); @@ -732,7 +737,7 @@ export class CssProperty { value = defaultValue; delete this[sourceKey]; } else { - value = valueConverter && typeof newValue === 'string' ? valueConverter(newValue) : newValue; + value = valueConverter && typeof newValue === 'string' ? (overrideConverter ? valueConverter.call(view, newValue) : valueConverter(newValue)) : newValue; this[sourceKey] = ValueSource.Css; } @@ -1071,6 +1076,7 @@ export class InheritedCssProperty extends CssProperty let equalityComparer = options.equalityComparer; let valueChanged = options.valueChanged; let valueConverter = options.valueConverter; + let overrideHandlers = false; const property = this; @@ -1086,6 +1092,7 @@ export class InheritedCssProperty extends CssProperty } if (typeof options.valueConverter !== 'undefined') { valueConverter = options.valueConverter; + overrideHandlers = true; } }; @@ -1132,7 +1139,7 @@ export class InheritedCssProperty extends CssProperty } else { this[sourceKey] = valueSource; if (valueConverter && typeof boxedValue === 'string') { - value = valueConverter(boxedValue); + value = overrideHandlers ? valueConverter.call(this, boxedValue) : valueConverter(boxedValue); } else { value = boxedValue; } From 59e3deedc3ee4d296ec64ab9eefea67a20a0b8f1 Mon Sep 17 00:00:00 2001 From: Osei Fortune Date: Thu, 1 Jan 2026 14:19:25 -0400 Subject: [PATCH 2/2] fix: use style instance --- packages/core/ui/core/properties/index.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/ui/core/properties/index.ts b/packages/core/ui/core/properties/index.ts index 5ceb255619..970bbe9475 100644 --- a/packages/core/ui/core/properties/index.ts +++ b/packages/core/ui/core/properties/index.ts @@ -654,7 +654,7 @@ export class CssProperty { delete this[sourceKey]; } else { this[sourceKey] = ValueSource.Local; - value = valueConverter && typeof newValue === 'string' ? (overrideConverter ? valueConverter.call(view, newValue) : valueConverter(newValue)) : newValue; + value = valueConverter && typeof newValue === 'string' ? (overrideConverter ? valueConverter.call(this, newValue) : valueConverter(newValue)) : newValue; } const oldValue = (key in this ? this[key] : defaultValue); @@ -737,7 +737,7 @@ export class CssProperty { value = defaultValue; delete this[sourceKey]; } else { - value = valueConverter && typeof newValue === 'string' ? (overrideConverter ? valueConverter.call(view, newValue) : valueConverter(newValue)) : newValue; + value = valueConverter && typeof newValue === 'string' ? (overrideConverter ? valueConverter.call(this, newValue) : valueConverter(newValue)) : newValue; this[sourceKey] = ValueSource.Css; } @@ -948,7 +948,7 @@ export class CssAnimationProperty implements CssAnimationPro } } else { if (options.valueConverter && typeof boxedValue === 'string') { - boxedValue = options.valueConverter(boxedValue); + boxedValue = options.valueConverter.call(this, boxedValue); } this[symbol] = boxedValue; if (this[computedSource] <= propertySource) { @@ -1076,7 +1076,7 @@ export class InheritedCssProperty extends CssProperty let equalityComparer = options.equalityComparer; let valueChanged = options.valueChanged; let valueConverter = options.valueConverter; - let overrideHandlers = false; + let overrideConverter = false; const property = this; @@ -1092,7 +1092,7 @@ export class InheritedCssProperty extends CssProperty } if (typeof options.valueConverter !== 'undefined') { valueConverter = options.valueConverter; - overrideHandlers = true; + overrideConverter = true; } }; @@ -1139,7 +1139,7 @@ export class InheritedCssProperty extends CssProperty } else { this[sourceKey] = valueSource; if (valueConverter && typeof boxedValue === 'string') { - value = overrideHandlers ? valueConverter.call(this, boxedValue) : valueConverter(boxedValue); + value = overrideConverter ? valueConverter.call(this, boxedValue) : valueConverter(boxedValue); } else { value = boxedValue; }