@triniwiz/nativescript-masonkit 1.0.0-beta.89 → 1.0.0-beta.90

package/properties.js

@@ -1,14 +1,29 @@
 import { CssProperty, Style, ShorthandProperty, Length as CoreLength, fontSizeProperty, textAlignmentProperty, textTransformProperty, PercentLength as CorePercentLength, Trace, CoreTypes, unsetValue, verticalAlignmentProperty, textShadowProperty, Font, Property, makeParser, makeValidator, minWidthProperty, minHeightProperty } from '@nativescript/core';
-import { isMasonChild_, isMasonView_ } from './symbols';
+import { isMasonView_ } from './symbols';
 import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+import { parseCSSShadow } from '@nativescript/core/ui/styling/css-shadow';
 function getViewStyle(view) {
-    const ret = (__ANDROID__ ? view.get() : view.deref());
-    return ret._styleHelper;
+    const ret = (__ANDROID__ ? view?.get() : view?.deref());
+    // Undefined for a plain NativeScript view (and for a cleared ref): only mason's
+    // own view classes define `_styleHelper`.
+    return ret?._styleHelper;
 }
-function isMasonViewOrChild(style) {
+// Mason parses CSS values itself, so for its own elements the raw declaration is
+// passed straight through; anything else has to go through core's parser first.
+//
+// This asks specifically whether the view *is* a mason element, not whether it
+// sits inside one. A plain NativeScript view parented into a mason tree has no
+// mason style buffer — its value still has to be converted for core, or core's
+// own setNative gets a string it can't use. See "Mixing with plain NativeScript
+// views" in MASON_CONTEXT.md.
+//
+// `isMasonView_` is a plain marker set in the mason view constructors. Don't
+// reach for `_styleHelper` here: its getter lazily builds the native view, and a
+// valueConverter can run long before that should happen.
+function isMasonView(style) {
     if (style && style.viewRef) {
         const view = __ANDROID__ ? style.viewRef.get() : style.viewRef.deref();
-        return view && (view[isMasonView_] || view[isMasonChild_]);
+        return !!(view && view[isMasonView_]);
     }
     return false;
 }
@@ -100,18 +115,42 @@ export const backgroundImageProperty = new CssProperty({
 export const backgroundRepeatProperty = new CssProperty({
     name: 'backgroundRepeat',
     cssName: 'background-repeat',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundRepeat = newValue;
+        }
+    },
 });
 export const backgroundPositionProperty = new CssProperty({
     name: 'backgroundPosition',
     cssName: 'background-position',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundPosition = newValue;
+        }
+    },
 });
 export const backgroundSizeProperty = new CssProperty({
     name: 'backgroundSize',
     cssName: 'background-size',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundSize = newValue;
+        }
+    },
 });
 export const backgroundClipProperty = new CssProperty({
     name: 'backgroundClip',
     cssName: 'background-clip',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundClip = newValue;
+        }
+    },
 });
 function overflowConverter(value) {
     if (typeof value === 'number') {
@@ -209,52 +248,170 @@ export const paddingProperty = new CssProperty({
     name: 'padding',
     cssName: 'padding',
 });
-paddingProperty.register(Style);
-export const marginProperty = new CssProperty({
-    name: 'margin',
-    cssName: 'margin',
+// These four style-buffer fields were consumed by the natives all along but had
+// no JS or CSS path to them: reserved StyleKeys nobody ever wrote. Same shape of
+// gap as `list-style-type`. (`text-indent` and `font-variant-numeric` are
+// deliberately left out — their offsets exist but nothing reads them yet, so
+// exposing them would write bytes into the void.)
+export const whiteSpaceProperty = new CssProperty({
+    name: 'whiteSpace',
+    cssName: 'white-space',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.whiteSpace = newValue;
+        }
+    },
 });
-export const scrollBarWidthProperty = new CssProperty({
-    name: 'scrollBarWidth',
-    cssName: 'scrollbar-width',
-    defaultValue: 0,
-    valueConverter: parseFloat,
+export const objectFitProperty = new CssProperty({
+    name: 'objectFit',
+    cssName: 'object-fit',
+    defaultValue: 'contain',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.objectFit = newValue;
+        }
+    },
 });
-flexDirectionProperty.overrideHandlers({
-    name: 'flexDirection',
-    cssName: 'flex-direction',
+export const textJustifyProperty = new CssProperty({
+    name: 'textJustify',
+    cssName: 'text-justify',
+    defaultValue: 'auto',
     valueChanged(target, oldValue, newValue) {
         const view = getViewStyle(target.viewRef);
         if (view) {
-            if (newValue) {
-                view.flexDirection = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                target.flexDirection = oldValue;
-            }
+            view.textJustify = newValue;
         }
     },
 });
-flexWrapProperty.overrideHandlers({
-    name: 'flexWrap',
-    cssName: 'flex-wrap',
-    valueConverter: function (value) {
-        return value;
+export const textDecorationThicknessProperty = new CssProperty({
+    name: 'textDecorationThickness',
+    cssName: 'text-decoration-thickness',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textDecorationThickness = newValue;
+        }
     },
+});
+// `font-family` had no path at all: FONT_FAMILY_STATE exists with no value slot
+// (the natives keep the family on a FontFace, not in the buffer), and core's
+// fontInternalProperty.setNative hook in common.ts is Windows-only. So on both
+// mobile platforms this was unsettable from CSS *and* from TS.
+export const fontFamilyProperty = new CssProperty({
+    name: 'fontFamily',
+    cssName: 'font-family',
     valueChanged(target, oldValue, newValue) {
         const view = getViewStyle(target.viewRef);
         if (view) {
-            if (newValue) {
-                view.flexWrap = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                target.flexWrap = oldValue;
+            view.fontFamily = newValue;
+        }
+    },
+});
+// ---------------------------------------------------------------------------
+// Registering alongside @nativescript/core
+// ---------------------------------------------------------------------------
+//
+// `CssProperty.register()` installs its accessors with Object.defineProperty, so
+// for a CSS name core already owns the last registration wins outright — and
+// masonkit registers after core. That silently shadowed core's handling of
+// `margin`, `padding`, `background`, `background-*`, `border-color`,
+// `border-radius`, `box-shadow`, `transform`, `vertical-align`, `text-overflow`,
+// `align-content`, `flex` and `flex-flow` for **every view in the app**, mason's
+// or not: a plain StackLayout with `margin: 10` in a stylesheet got nothing,
+// because mason's property only implements setNative on mason's own ViewBase.
+//
+// So instead of replacing core's accessor, keep both and pick at assignment
+// time: a mason view gets mason's, anything else keeps core's untouched.
+function registerAlongsideCore(property) {
+    const proto = Style.prototype;
+    const keys = [property.name, property.cssName, property.cssLocalName].filter((key) => typeof key === 'string' && key.length > 0);
+    const core = new Map();
+    for (const key of keys) {
+        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+        if (descriptor)
+            core.set(key, descriptor);
+    }
+    property.register(Style);
+    for (const [key, coreDescriptor] of core) {
+        const masonDescriptor = Object.getOwnPropertyDescriptor(proto, key);
+        if (!masonDescriptor)
+            continue;
+        Object.defineProperty(proto, key, {
+            enumerable: masonDescriptor.enumerable ?? true,
+            configurable: true,
+            get() {
+                const descriptor = isMasonView(this) ? masonDescriptor : coreDescriptor;
+                return descriptor.get?.call(this);
+            },
+            set(value) {
+                const descriptor = isMasonView(this) ? masonDescriptor : coreDescriptor;
+                descriptor.set?.call(this, value);
+            },
+        });
+    }
+}
+registerAlongsideCore(paddingProperty);
+export const marginProperty = new CssProperty({
+    name: 'margin',
+    cssName: 'margin',
+});
+export const scrollBarWidthProperty = new CssProperty({
+    name: 'scrollBarWidth',
+    cssName: 'scrollbar-width',
+    defaultValue: 0,
+    valueConverter: parseFloat,
+});
+// Core keeps these parsers private, so the fallbacks below have to restate them.
+// The value lists mirror @nativescript/core exactly — flexbox-layout-common's
+// FlexWrap and text-base-common's textAlignment/textTransform converters.
+const FlexWrapParse = makeParser(makeValidator('nowrap', 'wrap', 'wrap-reverse'));
+const FlexDirectionParse = makeParser(makeValidator('row', 'row-reverse', 'column', 'column-reverse'));
+const TextAlignmentParse = makeParser(makeValidator('left', 'center', 'right', 'justify'));
+const TextTransformParse = makeParser(makeValidator('none', 'capitalize', 'uppercase', 'lowercase'));
+/**
+ * Narrow one of @nativescript/core's own properties so mason views get mason's
+ * handling and every other view keeps core's, untouched.
+ *
+ * `overrideHandlers` replaces core's handlers outright and core holds the
+ * originals in a closure, so a fallback has to be named explicitly. Without
+ * this, merely installing masonkit changed these properties for every view in
+ * the app: the converters handed core's setNative a raw CSS string, and the
+ * valueChanged bodies *reverted* the value (`target.x = oldValue`) whenever
+ * there was no mason style — which is every plain NativeScript view.
+ */
+function overrideForMasonViews(property, options) {
+    const handlers = {
+        valueChanged(target, _oldValue, newValue) {
+            const masonStyle = getViewStyle(target.viewRef);
+            // No mason style means a plain NativeScript view: core's setNative owns
+            // it, so leave the value exactly as core produced it.
+            if (!masonStyle) {
+                return;
             }
-        }
+            options.apply(masonStyle, newValue);
+        },
+    };
+    if (options.coreConverter) {
+        handlers.valueConverter = function (value) {
+            // Mason parses CSS itself, so its own elements get the raw declaration.
+            return isMasonView(this) ? value : options.coreConverter(value);
+        };
+    }
+    property.overrideHandlers(handlers);
+}
+overrideForMasonViews(flexDirectionProperty, {
+    coreConverter: FlexDirectionParse,
+    apply: (style, value) => {
+        style.flexDirection = value;
+    },
+});
+overrideForMasonViews(flexWrapProperty, {
+    coreConverter: FlexWrapParse,
+    apply: (style, value) => {
+        style.flexWrap = value;
     },
 });
 flexGrowProperty.overrideHandlers({
@@ -279,7 +436,7 @@ fontSizeProperty.overrideHandlers({
     name: 'fontSize',
     cssName: 'font-size',
     valueConverter: function (value) {
-        if (isMasonViewOrChild(this)) {
+        if (isMasonView(this)) {
             return value;
         }
         return parseFloat(value);
@@ -480,38 +637,16 @@ export const gridColumnGapProperty = new ShorthandProperty({
         return [[columnGapProperty, value]];
     },
 });
-textAlignmentProperty.overrideHandlers({
-    name: 'textAlignment',
-    cssName: 'text-align',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.textAlignment = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                target.textAlignment = oldValue;
-            }
-        }
+overrideForMasonViews(textAlignmentProperty, {
+    coreConverter: TextAlignmentParse,
+    apply: (style, value) => {
+        style.textAlignment = value;
     },
 });
-textTransformProperty.overrideHandlers({
-    name: 'textTransform',
-    cssName: 'text-transform',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.textTransform = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                target.textTransform = oldValue;
-            }
-        }
+overrideForMasonViews(textTransformProperty, {
+    coreConverter: TextTransformParse,
+    apply: (style, value) => {
+        style.textTransform = value;
     },
 });
 function masonLengthParse(value) {
@@ -566,17 +701,29 @@ export const maxHeightProperty = new CssProperty({
 });
 // Core's minWidth/minHeight already route into this Style via setNative
 // (common.ts), so no new CssProperty is needed — just fix the '%' handling.
+// Core's min-width/min-height converter is Length.parse, which has no '%'
+// handling; mason needs percentages. Core's own valueChanged (which sets
+// effectiveMinWidth) is deliberately left in place for both kinds of view, so
+// only the converter is narrowed — a plain view must still get a plain Length,
+// or core's Length.toDevicePixels mis-reads a percentage.
+function masonMinSizeConverter(value) {
+    return (isMasonView(this) ? masonLengthPercentParse(value) : CoreLength.parse(value));
+}
 minWidthProperty.overrideHandlers({
+    name: 'minWidth',
+    cssName: 'min-width',
     // @ts-ignore
     equalityComparer: CorePercentLength.equals,
     // @ts-ignore
-    valueConverter: masonLengthPercentParse,
+    valueConverter: masonMinSizeConverter,
 });
 minHeightProperty.overrideHandlers({
+    name: 'minHeight',
+    cssName: 'min-height',
     // @ts-ignore
     equalityComparer: CorePercentLength.equals,
     // @ts-ignore
-    valueConverter: masonLengthPercentParse,
+    valueConverter: masonMinSizeConverter,
 });
 export const insetProperty = new ShorthandProperty({
     name: 'inset',
@@ -774,7 +921,7 @@ alignItemsProperty.overrideHandlers({
     name: 'alignItems',
     cssName: 'align-items',
     valueConverter: function (value) {
-        if (isMasonViewOrChild(this)) {
+        if (isMasonView(this)) {
             return value;
         }
         return AlignItemsParse(value);
@@ -797,7 +944,7 @@ alignSelfProperty.overrideHandlers({
     name: 'alignSelf',
     cssName: 'align-self',
     valueConverter: function (value) {
-        if (isMasonViewOrChild(this)) {
+        if (isMasonView(this)) {
             return value;
         }
         return AlignSelfParse(value);
@@ -823,7 +970,7 @@ export const alignContentProperty = new CssProperty({
     cssName: 'align-content',
     defaultValue: 'normal',
     valueConverter: function (value) {
-        if (isMasonViewOrChild(this)) {
+        if (isMasonView(this)) {
             return value;
         }
         return AlignContentParse(value);
@@ -884,7 +1031,7 @@ justifyContentProperty.overrideHandlers({
     name: 'justifyContent',
     cssName: 'justify-content',
     valueConverter: function (value) {
-        if (isMasonViewOrChild(this)) {
+        if (isMasonView(this)) {
             return value;
         }
         return JustifyContentParse(value);
@@ -1137,7 +1284,7 @@ const flexProperty = new ShorthandProperty({
                 const values = trimmed.split(/\s+/);
                 if (values.length === 1) {
                     switch (values[0]) {
-                        case 'inital':
+                        case 'initial':
                             properties.push([flexGrowProperty, 0]);
                             properties.push([flexShrinkProperty, 1]);
                             properties.push([flexBasisProperty, 'auto']);
@@ -1164,8 +1311,12 @@ const flexProperty = new ShorthandProperty({
                     properties.push([flexGrowProperty, values[0]]);
                     properties.push([flexShrinkProperty, values[1]]);
                 }
-                if (value.length >= 3) {
-                    properties.push({ property: flexBasisProperty, value: values[2] });
+                // `values.length`, not `value.length` — the latter is the string's
+                // length, so this fired for any value of 3+ characters. And core's
+                // setCssValue destructures each entry as `[property, value]`, so an
+                // object here threw "not iterable" for every three-part flex.
+                if (values.length >= 3) {
+                    properties.push([flexBasisProperty, values[2]]);
                 }
             }
         }
@@ -1204,7 +1355,7 @@ verticalAlignmentProperty.overrideHandlers({
     name: 'verticalAlignment',
     cssName: 'vertical-align',
     valueConverter: function (value) {
-        if (isMasonViewOrChild(this)) {
+        if (isMasonView(this)) {
             return value;
         }
         return CoreTypes.VerticalAlignmentText.parse(value);
@@ -1224,22 +1375,10 @@ verticalAlignmentProperty.overrideHandlers({
         }
     },
 });
-textShadowProperty.overrideHandlers({
-    name: 'textShadow',
-    cssName: 'text-shadow',
-    valueConverter: function (value) {
-        return value;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.textShadow = newValue;
-        }
-        else {
-            // Revert to old value if newValue is invalid
-            // @ts-ignore
-            target.textShadow = oldValue;
-        }
+overrideForMasonViews(textShadowProperty, {
+    coreConverter: parseCSSShadow,
+    apply: (style, value) => {
+        style.textShadow = value;
     },
 });
 export const floatProperty = new CssProperty({
@@ -1267,36 +1406,60 @@ export const transformProperty = new CssProperty({
 export const cornerShapeTopLeftProperty = new CssProperty({
     name: 'cornerShapeTopLeft',
     cssName: 'corner-shape-top-left',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeTopLeft = newValue;
+        }
+    },
 });
 export const cornerShapeTopRightProperty = new CssProperty({
     name: 'cornerShapeTopRight',
     cssName: 'corner-shape-top-right',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeTopRight = newValue;
+        }
+    },
 });
 export const cornerShapeBottomRightProperty = new CssProperty({
     name: 'cornerShapeBottomRight',
     cssName: 'corner-shape-bottom-right',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeBottomRight = newValue;
+        }
+    },
 });
 export const cornerShapeBottomLeftProperty = new CssProperty({
     name: 'cornerShapeBottomLeft',
     cssName: 'corner-shape-bottom-left',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeBottomLeft = newValue;
+        }
+    },
 });
 cornerShapeProperty.register(Style);
-boxShadowProperty.register(Style);
-transformProperty.register(Style);
+registerAlongsideCore(boxShadowProperty);
+registerAlongsideCore(transformProperty);
 cornerShapeTopLeftProperty.register(Style);
 cornerShapeTopRightProperty.register(Style);
 cornerShapeBottomRightProperty.register(Style);
 cornerShapeBottomLeftProperty.register(Style);
 clearProperty.register(Style);
 floatProperty.register(Style);
-verticalAlignProperty.register(Style);
-textOverFlowProperty.register(Style);
-flexProperty.register(Style);
-flexFlowProperty.register(Style);
+registerAlongsideCore(verticalAlignProperty);
+registerAlongsideCore(textOverFlowProperty);
+registerAlongsideCore(flexProperty);
+registerAlongsideCore(flexFlowProperty);
 textWrapProperty.register(Style);
 gridTemplateColumnsProperty.register(Style);
 gridTemplateRowsProperty.register(Style);
-alignContentProperty.register(Style);
+registerAlongsideCore(alignContentProperty);
 justifySelfProperty.register(Style);
 justifyItemsProperty.register(Style);
 gridTemplateAreasProperty.register(Style);
@@ -1312,7 +1475,7 @@ gridAutoRowsProperty.register(Style);
 gridAutoColumnsProperty.register(Style);
 aspectRatioProperty.register(Style);
 flexBasisProperty.register(Style);
-borderRadiusProperty.register(Style);
+registerAlongsideCore(borderRadiusProperty);
 boxSizingProperty.register(Style);
 positionProperty.register(Style);
 insetProperty.register(Style);
@@ -1329,14 +1492,14 @@ gapProperty.register(Style);
 rowGapProperty.register(Style);
 columnGapProperty.register(Style);
 scrollBarWidthProperty.register(Style);
-marginProperty.register(Style);
+registerAlongsideCore(marginProperty);
 overflowProperty.register(Style);
 overflowXProperty.register(Style);
 overflowYProperty.register(Style);
-backgroundProperty.register(Style);
-backgroundRepeatProperty.register(Style);
-backgroundPositionProperty.register(Style);
-backgroundSizeProperty.register(Style);
+registerAlongsideCore(backgroundProperty);
+registerAlongsideCore(backgroundRepeatProperty);
+registerAlongsideCore(backgroundPositionProperty);
+registerAlongsideCore(backgroundSizeProperty);
 backgroundClipProperty.register(Style);
 borderProperty.register(Style);
 borderLeftProperty.register(Style);
@@ -1344,12 +1507,18 @@ borderTopProperty.register(Style);
 borderRightProperty.register(Style);
 borderBottomProperty.register(Style);
 filterProperty.register(Style);
-borderColorProperty.register(Style);
+registerAlongsideCore(borderColorProperty);
 // New CSS properties
 export const objectPositionProperty = new CssProperty({
     name: 'objectPosition',
     cssName: 'object-position',
     defaultValue: '50% 50%',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.objectPosition = newValue;
+        }
+    },
 });
 export const borderStyleProperty = new CssProperty({
     name: 'borderStyle',
@@ -1359,45 +1528,99 @@ export const borderStyleProperty = new CssProperty({
 export const borderImageProperty = new CssProperty({
     name: 'borderImage',
     cssName: 'border-image',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.borderImage = newValue;
+        }
+    },
 });
 export const fontStretchProperty = new CssProperty({
     name: 'fontStretch',
     cssName: 'font-stretch',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.fontStretch = newValue;
+        }
+    },
 });
 export const fontFeatureSettingsProperty = new CssProperty({
     name: 'fontFeatureSettings',
     cssName: 'font-feature-settings',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.fontFeatureSettings = newValue;
+        }
+    },
 });
 export const wordSpacingProperty = new CssProperty({
     name: 'wordSpacing',
     cssName: 'word-spacing',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.wordSpacing = newValue;
+        }
+    },
 });
 export const hyphensProperty = new CssProperty({
     name: 'hyphens',
     cssName: 'hyphens',
     defaultValue: 'manual',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.hyphens = newValue;
+        }
+    },
 });
 export const backdropFilterProperty = new CssProperty({
     name: 'backdropFilter',
     cssName: 'backdrop-filter',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backdropFilter = newValue;
+        }
+    },
 });
 export const writingModeProperty = new CssProperty({
     name: 'writingMode',
     cssName: 'writing-mode',
     defaultValue: 'horizontal-tb',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.writingMode = newValue;
+        }
+    },
 });
 export const unicodeBidiProperty = new CssProperty({
     name: 'unicodeBidi',
     cssName: 'unicode-bidi',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.unicodeBidi = newValue;
+        }
+    },
 });
 export const caretColorProperty = new CssProperty({
     name: 'caretColor',
     cssName: 'caret-color',
     defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.caretColor = newValue;
+        }
+    },
 });
 objectPositionProperty.register(Style);
 borderStyleProperty.register(Style);
@@ -1410,7 +1633,7 @@ backdropFilterProperty.register(Style);
 writingModeProperty.register(Style);
 unicodeBidiProperty.register(Style);
 caretColorProperty.register(Style);
-backgroundImageProperty.register(Style);
+registerAlongsideCore(backgroundImageProperty);
 export const listStyleTypeProperty = new CssProperty({
     name: 'listStyleType',
     cssName: 'list-style-type',
@@ -1421,5 +1644,13 @@ export const listStylePositionProperty = new CssProperty({
 });
 listStyleTypeProperty.register(Style);
 listStylePositionProperty.register(Style);
+// core owns `white-space` too (its Label honours nowrap), so dispatch.
+registerAlongsideCore(whiteSpaceProperty);
+objectFitProperty.register(Style);
+textJustifyProperty.register(Style);
+textDecorationThicknessProperty.register(Style);
+// core owns `font-family` (through its Font shorthand), so this has to dispatch
+// rather than shadow it.
+registerAlongsideCore(fontFamilyProperty);
 displayProperty.register(Style);
 //# sourceMappingURL=properties.js.map