@triniwiz/nativescript-masonkit 1.0.0-beta.107 → 1.0.0-beta.109

package/style.js

@@ -3,7 +3,9 @@ import { cssUnits } from './units';
 import { masonEngine } from './windows-panel-helpers';
 import { reportCssDiagnostic } from './diagnostics';
 import { expandColorStops, resolveStopPositions } from './gradient-stops';
-import { Color, Length as CoreLength, PercentLength as CorePercentLength, Screen } from '@nativescript/core';
+import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
+import { encodeCssFilter, parseCssFilter } from './css-filter';
+import { Color, Length as CoreLength, PercentLength as CorePercentLength, Screen, knownFolders } from '@nativescript/core';
 // The Windows shell lays out in XAML DIPs, so its style buffer holds DIPs. Core's Windows density
 // is 1 until the window has a XamlRoot, so converting stored early styles unscaled and later ones scaled.
 const layout = __WINDOWS__ ? { ...coreLayout, getDisplayDensity: () => 1, toDevicePixels: (value) => value, toDeviceIndependentPixels: (value) => value } : coreLayout;
@@ -257,7 +259,7 @@ function windowsSetGrid(nativeView, field, value) {
     // UpdateGrid doesn't mark the node dirty / invalidate XAML measure on its own;
     // SyncStyle does, so a grid item's placement change re-runs the container layout.
     try {
-        nativeView.SyncStyle('0', '0');
+        nativeView.SyncStyle(-1, -1, -1, -1);
     }
     catch (_) { }
 }
@@ -493,28 +495,43 @@ function parseLengthPercentage(type, value) {
             return { value, unit: '%' };
     }
 }
+// The 128-bit dirty mask as four signed 32-bit words, low to high (the
+// syncStyleParts argument order). Plain numbers: BigInt ops allocate.
 class StateKeys {
-    constructor(bits) {
-        this.bits = bits;
+    constructor(w0, w1, w2, w3) {
+        this.w0 = w0;
+        this.w1 = w1;
+        this.w2 = w2;
+        this.w3 = w3;
     }
     static flag(n) {
-        return new StateKeys(1n << BigInt(n));
+        const bit = (1 << (n & 31)) | 0;
+        switch (n >> 5) {
+            case 0:
+                return new StateKeys(bit, 0, 0, 0);
+            case 1:
+                return new StateKeys(0, bit, 0, 0);
+            case 2:
+                return new StateKeys(0, 0, bit, 0);
+            default:
+                return new StateKeys(0, 0, 0, bit);
+        }
     }
-    // compatibility: return low bits when code expects single 64-bit value
-    get bitsLow() {
-        return this.bits;
+    /** The mask as one unsigned 128-bit value (tests and diagnostics). */
+    get bits() {
+        return wordsToBigInt(this.w0, this.w1, this.w2, this.w3);
     }
     or(other) {
-        return new StateKeys(this.bits | other.bits);
+        return new StateKeys(this.w0 | other.w0, this.w1 | other.w1, this.w2 | other.w2, this.w3 | other.w3);
     }
     and(other) {
-        return new StateKeys(this.bits & other.bits);
+        return new StateKeys(this.w0 & other.w0, this.w1 & other.w1, this.w2 & other.w2, this.w3 & other.w3);
     }
     hasFlag(flag) {
-        return (this.bits & flag.bits) !== 0n;
+        return (this.w0 & flag.w0) !== 0 || (this.w1 & flag.w1) !== 0 || (this.w2 & flag.w2) !== 0 || (this.w3 & flag.w3) !== 0;
     }
 }
-StateKeys.NONE = new StateKeys(0n);
+StateKeys.NONE = new StateKeys(0, 0, 0, 0);
 StateKeys.DISPLAY = StateKeys.flag(0);
 StateKeys.POSITION = StateKeys.flag(1);
 StateKeys.DIRECTION = StateKeys.flag(2);
@@ -594,6 +611,12 @@ StateKeys.HYPHENS = StateKeys.flag(75);
 StateKeys.CARET_COLOR = StateKeys.flag(76);
 StateKeys.WORD_SPACING = StateKeys.flag(77);
 StateKeys.FONT_STRETCH = StateKeys.flag(78);
+StateKeys.DISPLAY_AND_MODE = StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE);
+StateKeys.FLOW_TYPE = StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE).or(StateKeys.POSITION).or(StateKeys.FLOAT);
+StateKeys.WINDOWS_TEXT = [49, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 73, 74, 75, 77, 78].reduce((mask, n) => mask.or(StateKeys.flag(n)), StateKeys.NONE);
+function wordsToBigInt(w0, w1, w2, w3) {
+    return BigInt(w0 >>> 0) | (BigInt(w1 >>> 0) << 32n) | (BigInt(w2 >>> 0) << 64n) | (BigInt(w3 >>> 0) << 96n);
+}
 const getInt8 = (view, offset) => {
     return view.getInt8(offset);
 };
@@ -606,19 +629,6 @@ const getUint8 = (view, offset) => {
 const setUint8 = (view, offset, value) => {
     view.setUint8(offset, value);
 };
-// Splits the 128-bit dirty mask into four signed 32-bit words (plain {N} int
-// marshalling) for Element.syncStyleParts on Android and mason_syncStyleParts on iOS.
-const splitBigIntToInt32Parts = (value) => {
-    const MASK64 = (1n << 64n) - 1n;
-    const MASK32 = 0xffffffffn;
-    const LOW = value & MASK64;
-    const HIGH = (value >> 64n) & MASK64;
-    const lowLow32 = Number(BigInt.asIntN(32, LOW & MASK32));
-    const lowHigh32 = Number(BigInt.asIntN(32, (LOW >> 32n) & MASK32));
-    const highLow32 = Number(BigInt.asIntN(32, HIGH & MASK32));
-    const highHigh32 = Number(BigInt.asIntN(32, (HIGH >> 32n) & MASK32));
-    return [lowLow32, lowHigh32, highLow32, highHigh32];
-};
 const getInt16 = (view, offset) => {
     return view.getInt16(offset, true);
 };
@@ -739,6 +749,102 @@ export function parseLinearGradientCss(value) {
         return null;
     return { angle, offsets: resolveStopPositions(positions), colors, interpolation };
 }
+const RADIAL_GRADIENT_ARGS = /radial-gradient\s*\(([\s\S]*)\)\s*$/i;
+function positionFraction(token, axis) {
+    if (token == null)
+        return null;
+    const t = token.trim().toLowerCase();
+    if (t === 'center')
+        return 0.5;
+    if (t === (axis === 'x' ? 'left' : 'top'))
+        return 0;
+    if (t === (axis === 'x' ? 'right' : 'bottom'))
+        return 1;
+    if (t.endsWith('%')) {
+        const n = parseFloat(t);
+        return Number.isFinite(n) ? n / 100 : null;
+    }
+    return null;
+}
+export function parseBoxPosition(value, fallback = 0.5) {
+    const parts = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    let x = null;
+    let y = null;
+    for (const part of parts) {
+        if ((part === 'top' || part === 'bottom') && y == null)
+            y = positionFraction(part, 'y');
+        else if ((part === 'left' || part === 'right') && x == null)
+            x = positionFraction(part, 'x');
+        else if (x == null)
+            x = positionFraction(part, 'x');
+        else if (y == null)
+            y = positionFraction(part, 'y');
+    }
+    if (x != null || y != null)
+        return { x: x ?? 0.5, y: y ?? 0.5 };
+    return { x: fallback, y: fallback };
+}
+export function parseRadialGradientCss(value) {
+    const m = RADIAL_GRADIENT_ARGS.exec(value.trim());
+    if (!m)
+        return null;
+    const parts = splitTopLevelCommas(m[1])
+        .map((p) => p.trim())
+        .filter(Boolean);
+    if (parts.length < 2)
+        return null;
+    let start = 0;
+    let cx = 0.5;
+    let cy = 0.5;
+    let size = 'farthest-corner';
+    let interpolation = '';
+    let head = parts[0];
+    const method = INTERPOLATION_METHOD.exec(head);
+    if (method) {
+        interpolation = method[1].toLowerCase().replace(/\s+/g, ' ');
+        head = (head.slice(0, method.index) + head.slice(method.index + method[0].length)).trim();
+        start = 1;
+    }
+    if (/\b(circle|ellipse|closest-side|farthest-side|closest-corner|farthest-corner|at)\b/i.test(head)) {
+        start = 1;
+        const at = /\bat\s+(.+)$/i.exec(head);
+        if (at) {
+            const p = parseBoxPosition(at[1]);
+            cx = p.x;
+            cy = p.y;
+        }
+        const sizeKeyword = /(closest-side|farthest-side|closest-corner|farthest-corner)/i.exec(head);
+        if (sizeKeyword)
+            size = sizeKeyword[1].toLowerCase();
+    }
+    const sideX = size.startsWith('closest') ? Math.min(cx, 1 - cx) : Math.max(cx, 1 - cx);
+    const sideY = size.startsWith('closest') ? Math.min(cy, 1 - cy) : Math.max(cy, 1 - cy);
+    const corner = size.endsWith('corner') ? Math.SQRT2 : 1;
+    const colors = [];
+    const positions = [];
+    for (const stop of expandColorStops(parts.slice(start))) {
+        const pos = /\s+(-?[\d.]+)(%|[a-z]+)\s*$/i.exec(stop);
+        const colorStr = pos ? stop.slice(0, pos.index).trim() : stop;
+        const argb = normalizeColorValue(colorStr);
+        if (argb == null)
+            continue;
+        colors.push(argb >>> 0);
+        positions.push(pos && pos[2] === '%' ? parseFloat(pos[1]) / 100 : null);
+    }
+    if (colors.length < 1)
+        return null;
+    return { cx, cy, rx: Math.max(sideX * corner, 0.001), ry: Math.max(sideY * corner, 0.001), offsets: resolveStopPositions(positions), colors, interpolation };
+}
+export function backgroundFit(size) {
+    const t = (size ?? '').trim().toLowerCase();
+    if (t === 'cover')
+        return 3;
+    if (t === 'contain')
+        return 2;
+    if (t === '100%' || t === '100% 100%')
+        return 1;
+    return 0;
+}
 const SIDE_TOKEN = /^(auto|[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?(px|dip|dppx|rem|em|pt|vw|vh|vmin|vmax|%)?|[a-z-]+\(.*\))$/i;
 /** 1-4 lengths, percentages or `auto`. Anything else makes the whole declaration invalid, which CSS ignores. */
 export function isSideList(value) {
@@ -1149,6 +1255,14 @@ function androidWritableStyleBuffer(nativeView) {
     }
     return typeof style.getWritableValue === 'function' ? style.getWritableValue() : style.getValues();
 }
+let appleWritableStyleValues;
+// Newer frameworks return the node's own (copied-on-write) buffer in one call.
+function appleHasWritableStyleValues(nativeView) {
+    if (appleWritableStyleValues === undefined && nativeView) {
+        appleWritableStyleValues = typeof nativeView.mason_writableStyleValues === 'function';
+    }
+    return !!appleWritableStyleValues;
+}
 function windowsStyleValues(nativeView) {
     if (nativeView?.Node)
         return masonEngine().StyleValues(nativeView);
@@ -1170,7 +1284,13 @@ function cssInitialIfReset(value, initial) {
 }
 export class Style {
     constructor() {
-        this.isDirty = -1n;
+        this._bufferRequested = false;
+        // Dirty mask words (StateKeys layout); `_hasDirty` false means clean.
+        this._d0 = 0;
+        this._d1 = 0;
+        this._d2 = 0;
+        this._d3 = 0;
+        this._hasDirty = false;
         this.inBatch = false;
         this._syncScheduled = false;
         // Buffer bytes before this turn's first write. Frameworks often undo and
@@ -1179,41 +1299,89 @@ export class Style {
         // `false` means a write happened without a snapshot, so always sync.
         this._turnSnapshot = undefined;
         this._synced = false;
+        this._windowsCss = new Map();
     }
     static fromView(view, nativeView) {
-        //console.time('fromView');
         const ret = new Style();
         ret.view_ = view;
         ret.nativeView = nativeView;
+        return ret;
+    }
+    get style_view() {
+        if (!this._bufferRequested)
+            this.loadBuffer(false);
+        return this._sv;
+    }
+    set style_view(value) {
+        this._bufferRequested = true;
+        this._sv = value;
+    }
+    get i8View() {
+        if (!this._bufferRequested)
+            this.loadBuffer(false);
+        if (this._i8 === undefined && this._sv)
+            this._i8 = new Int8Array(this._sv.buffer, this._sv.byteOffset, this._sv.byteLength);
+        return this._i8;
+    }
+    set i8View(value) {
+        this._i8 = value;
+    }
+    get u8View() {
+        if (!this._bufferRequested)
+            this.loadBuffer(false);
+        if (this._u8 === undefined && this._sv)
+            this._u8 = new Uint8Array(this._sv.buffer, this._sv.byteOffset, this._sv.byteLength);
+        return this._u8;
+    }
+    set u8View(value) {
+        this._u8 = value;
+    }
+    /** The native MasonStyle, fetched once (each `nativeView.style` read is a bridge call). */
+    get appleStyle() {
+        if (this._appleStyle === undefined) {
+            this._appleStyle = (this.nativeView?.style ?? NSCMason.shared.styleForViewOrNode(this.nativeView));
+        }
+        return this._appleStyle;
+    }
+    // The byte views are rarely read, so they are made on demand.
+    setBuffer(buffer) {
+        this._bufferRequested = true;
+        this._sv = new DataView(buffer);
+        this._i8 = undefined;
+        this._u8 = undefined;
+    }
+    // A new node shares the arena's default buffer, so a style whose first use
+    // is a write asks for its own copy up front instead of fetching twice.
+    loadBuffer(writable) {
+        this._bufferRequested = true;
         if (__ANDROID__) {
-            const buffer = ArrayBuffer.from(androidWritableStyleBuffer(nativeView));
-            ret.style_view = new DataView(buffer);
-            ret.i8View = new Int8Array(buffer);
-            ret.u8View = new Uint8Array(buffer);
+            this.setBuffer(ArrayBuffer.from(androidWritableStyleBuffer(this.nativeView)));
         }
         else if (__APPLE__) {
-            let style = nativeView?.style;
-            if (!style) {
-                style = NSCMason.shared.styleForViewOrNode(nativeView);
+            const nativeView = this.nativeView;
+            let data = null;
+            if (writable && appleHasWritableStyleValues(nativeView)) {
+                data = nativeView.mason_writableStyleValues();
             }
-            const styleBuffer = style.values;
-            const buffer = interop.bufferFromData(styleBuffer);
-            ret.style_view = new DataView(buffer);
-            ret.i8View = new Int8Array(buffer);
-            ret.u8View = new Uint8Array(buffer);
+            if (!data) {
+                const style = this.appleStyle;
+                if (writable)
+                    style.prepareMut();
+                data = style.values;
+            }
+            this.setBuffer(interop.bufferFromData(data));
         }
         else if (__WINDOWS__) {
             // Live IBuffer over the engine's arena style memory; the @nativescript/windows runtime
             // projects it as a writable ArrayBuffer, so the same StyleKeys-offset writes used on
             // iOS/Android land straight in the node's style.
             //@ts-ignore
-            const buffer = NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(nativeView));
-            ret.style_view = new DataView(buffer);
-            ret.i8View = new Int8Array(buffer);
-            ret.u8View = new Uint8Array(buffer);
+            this.setBuffer(NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(this.nativeView)));
         }
-        //console.timeEnd('fromView');
-        return ret;
+    }
+    /** The dirty mask as one value, `-1n` when clean (tests and diagnostics). */
+    get isDirty() {
+        return this._hasDirty ? wordsToBigInt(this._d0, this._d1, this._d2, this._d3) : -1n;
     }
     static fromPseudo(pseudo, view, nativeView) {
         var mask = -1;
@@ -1287,13 +1455,11 @@ export class Style {
         const HIGH_OFFSET = StyleKeys.PSEUDO_SET_MASK_HIGH;
         if (this.style_view.byteLength < HIGH_OFFSET + 8)
             return;
-        const low = this.style_view.getBigUint64(LOW_OFFSET, true);
-        const high = this.style_view.getBigUint64(HIGH_OFFSET, true);
-        const MASK64 = (1n << 64n) - 1n;
-        const keyLow = key.bits & MASK64;
-        const keyHigh = (key.bits >> 64n) & MASK64;
-        this.style_view.setBigUint64(LOW_OFFSET, low | keyLow, true);
-        this.style_view.setBigUint64(HIGH_OFFSET, high | keyHigh, true);
+        const v = this.style_view;
+        setInt32(v, LOW_OFFSET, getInt32(v, LOW_OFFSET) | key.w0);
+        setInt32(v, LOW_OFFSET + 4, getInt32(v, LOW_OFFSET + 4) | key.w1);
+        setInt32(v, HIGH_OFFSET, getInt32(v, HIGH_OFFSET) | key.w2);
+        setInt32(v, HIGH_OFFSET + 4, getInt32(v, HIGH_OFFSET + 4) | key.w3);
     }
     commitState(value) {
         if (this._pseudo) {
@@ -1334,34 +1500,91 @@ export class Style {
         }
         if (__WINDOWS__) {
             // Android and iOS parse these natively; Windows parses them here into the style buffer.
+            if (!this._pseudo)
+                this._windowsCss.set(name, value);
             this.applyWindowsCssString(name, value);
         }
     }
+    applyWindowsBackground(shorthand) {
+        const v = (this._windowsBackground ?? '').trim();
+        const layer = splitTopLevelCommas(v)[0]?.trim() ?? '';
+        const stopsOf = (g) => g.offsets.map((o, i) => o + ':' + (g.colors[i] >>> 0)).join(',');
+        try {
+            if (/^radial-gradient/i.test(layer)) {
+                const g = parseRadialGradientCss(layer);
+                if (g)
+                    NativeScript.Mason.Css.ApplyRadialGradientAt(this.nativeView, g.cx, g.cy, g.rx, g.ry, stopsOf(g), g.interpolation);
+                return;
+            }
+            if (/^linear-gradient/i.test(layer)) {
+                const g = parseLinearGradientCss(layer);
+                if (g && g.colors.length)
+                    NativeScript.Mason.Css.ApplyLinearGradient(this.nativeView, g.angle, stopsOf(g), g.interpolation);
+                return;
+            }
+            const url = /url\(\s*(['"]?)(.*?)\1\s*\)/i.exec(layer);
+            if (url) {
+                let source = url[2];
+                if (source.startsWith('~/'))
+                    source = source.replace('~/', knownFolders.currentApp().path + '/');
+                const rest = layer.slice(url.index + url[0].length).trim();
+                const keywords = /\b(no-repeat|repeat-x|repeat-y|repeat|space|round|scroll|fixed|local|border-box|padding-box|content-box)\b/gi;
+                const [positionPart, sizePart] = rest.split('/').map((p) => p.replace(keywords, '').trim());
+                const size = shorthand && sizePart ? sizePart.split(/\s+/).slice(0, 2).join(' ') : this._windowsBackgroundSize;
+                const position = parseBoxPosition(shorthand && positionPart ? positionPart : (this._windowsBackgroundPosition ?? '0% 0%'), 0);
+                const align = (f) => (f <= 0.25 ? 0 : f >= 0.75 ? 2 : 1);
+                NativeScript.Mason.Css.ApplyBackgroundImage(this.nativeView, source, backgroundFit(size), align(position.x), align(position.y));
+                return;
+            }
+            if (!ANY_GRADIENT.test(layer)) {
+                NativeScript.Mason.Css.ClearBackground(this.nativeView);
+                if (shorthand && v.length && v.toLowerCase() !== 'none')
+                    this.backgroundColor = v;
+            }
+        }
+        catch (_) { }
+    }
     applyWindowsCssString(name, value) {
         // A gradient is a Panel brush from Css that VisualApply leaves over BACKGROUND_COLOR; clearing
         // it lets VisualApply repaint the color.
         if (name === 'background' || name === 'background-image') {
-            const v = typeof value === 'string' ? value : String(value ?? '');
-            if (LINEAR_GRADIENT.test(v)) {
-                const g = parseLinearGradientCss(v);
-                if (g && g.colors.length) {
-                    try {
-                        // Pass stops as an "offset:argb,..." string — WinRT array_view params don't marshal
-                        // reliably from the NS-Windows JS runtime (plain arrays -> E_FAIL, typed arrays -> crash).
-                        const stops = g.offsets.map((o, i) => o + ':' + (g.colors[i] >>> 0)).join(',');
-                        NativeScript.Mason.Css.ApplyLinearGradient(this.nativeView, g.angle, stops, g.interpolation);
-                    }
-                    catch (_) { }
-                }
-            }
-            else if (!ANY_GRADIENT.test(v)) {
-                try {
-                    NativeScript.Mason.Css.ClearBackground(this.nativeView);
-                }
-                catch (_) { }
-                if (name === 'background' && v.trim().length && v.trim().toLowerCase() !== 'none') {
-                    this.backgroundColor = v;
-                }
+            this._windowsBackground = typeof value === 'string' ? value : String(value ?? '');
+            this.applyWindowsBackground(name === 'background');
+            return;
+        }
+        if (name === 'background-size' || name === 'background-position') {
+            if (name === 'background-size')
+                this._windowsBackgroundSize = String(value ?? '');
+            else
+                this._windowsBackgroundPosition = String(value ?? '');
+            if (/url\(/i.test(this._windowsBackground ?? ''))
+                this.applyWindowsBackground(false);
+            return;
+        }
+        if (name === 'filter' || name === 'backdrop-filter') {
+            const view = this.nativeView;
+            if (!view)
+                return;
+            const current = this.color >>> 0 || 0xff000000;
+            const spec = encodeCssFilter(parseCssFilter(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, this.emBasis())), (color) => (color && color.toLowerCase() !== 'currentcolor' ? (normalizeColorValue(color) ?? current) : current));
+            if (name === 'filter')
+                NativeScript.Mason.Css.SetFilter(view, spec);
+            else
+                NativeScript.Mason.Css.SetBackdropFilter(view, spec);
+            return;
+        }
+        if (name === 'font-feature-settings') {
+            const view = this.nativeView;
+            if (view && typeof view.SetFontFeatureSettings === 'function')
+                view.SetFontFeatureSettings(typeof value === 'string' ? value : '');
+            return;
+        }
+        if (name === 'text-shadow') {
+            const view = this.nativeView;
+            if (view && typeof view.SetTextShadow === 'function') {
+                const current = this.color >>> 0 || 0xff000000;
+                const shadows = parseBoxShadows(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, this.emBasis()));
+                view.SetTextShadow(encodeBoxShadows(shadows, (color) => (color && color.toLowerCase() !== 'currentcolor' ? (normalizeColorValue(color) ?? current) : current)));
             }
             return;
         }
@@ -1459,6 +1682,9 @@ export class Style {
             case 'text-decoration-color':
                 color = parseTextDecorationColor(value);
                 break;
+            case 'text-decoration-thickness':
+                thickness = cssLengthToDip(value, this.emBasis()) ?? null;
+                break;
         }
         if (line == null && style == null && color == null && thickness == null)
             return;
@@ -1504,13 +1730,14 @@ export class Style {
         this.commitState(StateKeys.BORDER_COLOR);
     }
     resetState() {
-        this.isDirty = -1n;
+        this._hasDirty = false;
+        this._d0 = this._d1 = this._d2 = this._d3 = 0;
     }
     syncStyle() {
         this._synced = true;
         const snapshot = this._turnSnapshot;
         this._turnSnapshot = undefined;
-        if (snapshot && this.isDirty !== -1n && bytesEqual(snapshot, this.u8View)) {
+        if (snapshot && this._hasDirty && bytesEqual(snapshot, this.u8View)) {
             this.resetState();
             return;
         }
@@ -1519,47 +1746,60 @@ export class Style {
     }
     _sendSync() {
         if (__ANDROID__) {
-            const [lowLow, lowHigh, highLow, highHigh] = splitBigIntToInt32Parts(this.isDirty);
             //@ts-ignore
             const view = this.view?.android ?? this.view._view;
             // @ts-ignore - syncStyleParts is a newer native method; typings regenerate from the AAR separately.
-            view.syncStyleParts(lowLow, lowHigh, highLow, highHigh);
+            view.syncStyleParts(this._d0, this._d1, this._d2, this._d3);
         }
         else if (__APPLE__) {
-            const [lowLow, lowHigh, highLow, highHigh] = splitBigIntToInt32Parts(this.isDirty);
             //@ts-ignore
             const view = this.view?.ios ?? this.view._view;
             // @ts-ignore
-            view.mason_syncStyleParts(lowLow, lowHigh, highLow, highHigh);
+            view.mason_syncStyleParts(this._d0, this._d1, this._d2, this._d3);
         }
         else if (__WINDOWS__) {
-            // The Windows elements re-read the whole buffer, so the dirty bits aren't passed.
             // @ts-ignore
             const view = this.view?.windows ?? this.view._view;
-            view.SyncStyle('', '');
-            this.view?._windowsSyncAnonymousText?.();
+            const all = !this._hasDirty;
+            const d0 = all ? -1 : this._d0;
+            const d1 = all ? -1 : this._d1;
+            const d2 = all ? -1 : this._d2;
+            const d3 = all ? -1 : this._d3;
+            view.SyncStyle(d0, d1, d2, d3);
+            const text = StateKeys.WINDOWS_TEXT;
+            if ((d0 & text.w0) | (d1 & text.w1) | (d2 & text.w2) | (d3 & text.w3)) {
+                this.view?._windowsSyncAnonymousText?.(d0, d1, d2, d3);
+            }
+            const flow = StateKeys.FLOW_TYPE;
+            if (!this._pseudo && (d0 & flow.w0) | (d1 & flow.w1) | (d2 & flow.w2) | (d3 & flow.w3)) {
+                this.view?._windowsFlowTypeChanged?.();
+            }
         }
     }
     /** The anonymous Windows Text holding a container's own runs inherits the container's text styles. */
-    copyTextStyleTo(text) {
+    copyTextStyleTo(text, d0 = -1, d1 = -1, d2 = -1, d3 = -1, block = false) {
         if (!__WINDOWS__ || !this.u8View)
             return;
         //@ts-ignore
         const target = new Uint8Array(NSWinRT.interop.arrayBufferFromBuffer(masonEngine().StyleValues(text)));
         target.set(this.u8View.subarray(StyleKeys.FONT_COLOR, StyleKeys.BACKGROUND_COLOR), StyleKeys.FONT_COLOR);
         target.set(this.u8View.subarray(StyleKeys.DECORATION_LINE, StyleKeys.PSEUDO_SET_MASK_LOW), StyleKeys.DECORATION_LINE);
-        text.SyncStyle('0', '0');
+        target.set(this.u8View.subarray(StyleKeys.HYPHENS, StyleKeys.FONT_STRETCH_STATE + 1), StyleKeys.HYPHENS);
+        if (block) {
+            target[StyleKeys.DISPLAY] = 3;
+            target[StyleKeys.DISPLAY_MODE] = 0 /* DisplayMode.None */;
+        }
+        text.SyncStyle(d0, d1, d2, d3);
     }
     setOrAppendState(value) {
         if (this._turnSnapshot === undefined) {
             this._turnSnapshot = false;
         }
-        if (this.isDirty == -1n) {
-            this.isDirty = value.bits;
-        }
-        else {
-            this.isDirty = this.isDirty | value.bits;
-        }
+        this._d0 |= value.w0;
+        this._d1 |= value.w1;
+        this._d2 |= value.w2;
+        this._d3 |= value.w3;
+        this._hasDirty = true;
         if (!this.inBatch) {
             // Coalesce rapid-fire property changes (e.g. CSS batch apply) into a
             // single syncStyle() call on the next microtask. This avoids N
@@ -1573,7 +1813,7 @@ export class Style {
     }
     _flushScheduledSync() {
         this._syncScheduled = false;
-        if (this.isDirty !== -1n) {
+        if (this._hasDirty) {
             this.syncStyle();
         }
     }
@@ -1602,40 +1842,18 @@ export class Style {
         return own > 0 ? own : cssUnits.rootFontSize;
     }
     prepareMut() {
-        // always mut
         if (this._pseudo) {
             return;
         }
-        if (this._turnSnapshot === undefined && this.isDirty === -1n && this.u8View) {
+        if (!this._bufferRequested) {
+            this.loadBuffer(true);
+        }
+        if (this._turnSnapshot === undefined && !this._hasDirty && this._sv) {
             this._turnSnapshot = this._synced ? this.u8View.slice() : false;
         }
-        const ref = getUint32(this.style_view, StyleKeys.REF_COUNT);
-        if (ref !== 1) {
-            if (__APPLE__) {
-                let style = this.nativeView?.style;
-                if (!style) {
-                    style = NSCMason.shared.styleForViewOrNode(this.nativeView);
-                }
-                style.prepareMut();
-                const styleBuffer = style.values;
-                const buffer = interop.bufferFromData(styleBuffer);
-                this.style_view = new DataView(buffer);
-                this.i8View = new Int8Array(buffer);
-                this.u8View = new Uint8Array(buffer);
-            }
-            if (__ANDROID__) {
-                const buffer = ArrayBuffer.from(androidWritableStyleBuffer(this.nativeView));
-                this.style_view = new DataView(buffer);
-                this.i8View = new Int8Array(buffer);
-                this.u8View = new Uint8Array(buffer);
-            }
-            if (__WINDOWS__) {
-                //@ts-ignore
-                const buffer = NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(this.nativeView));
-                this.style_view = new DataView(buffer);
-                this.i8View = new Int8Array(buffer);
-                this.u8View = new Uint8Array(buffer);
-            }
+        if (getUint32(this._sv, StyleKeys.REF_COUNT) !== 1) {
+            // Still the shared buffer (read before the first write): take a copy.
+            this.loadBuffer(true);
         }
     }
     get boxSizing() {
@@ -1662,6 +1880,24 @@ export class Style {
             this.commitState(StateKeys.BOX_SIZING);
         }
     }
+    get direction() {
+        switch (getUint8(this.style_view, StyleKeys.DIRECTION)) {
+            case 1:
+                return 'ltr';
+            case 2:
+                return 'rtl';
+            default:
+                return 'inherit';
+        }
+    }
+    set direction(value) {
+        const direction = value === 'ltr' ? 1 : value === 'rtl' ? 2 : 0;
+        if (getUint8(this.style_view, StyleKeys.DIRECTION) === direction)
+            return;
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.DIRECTION, direction);
+        this.commitState(StateKeys.DIRECTION);
+    }
     get listStyleType() {
         switch (getUint8(this.style_view, StyleKeys.LIST_STYLE_TYPE)) {
             case 1:
@@ -1691,6 +1927,18 @@ export class Style {
         setInt8(this.style_view, StyleKeys.LIST_STYLE_TYPE_STATE, 1);
         this.commitState(StateKeys.LIST_STYLE_TYPE);
     }
+    get listStylePosition() {
+        return getUint8(this.style_view, StyleKeys.LIST_STYLE_POSITION) === 1 ? 'inside' : 'outside';
+    }
+    set listStylePosition(value) {
+        if (value !== 'outside' && value !== 'inside') {
+            return;
+        }
+        this.prepareMut();
+        setUint8(this.style_view, StyleKeys.LIST_STYLE_POSITION, value === 'inside' ? 1 : 0);
+        setInt8(this.style_view, StyleKeys.LIST_STYLE_POSITION_STATE, 1);
+        this.commitState(StateKeys.LIST_STYLE_POSITION);
+    }
     get fontSize() {
         if (!this.style_view) {
             // BLACK ?
@@ -1885,6 +2133,12 @@ export class Style {
         }
         const normalized = normalizeColorValue(value);
         if (normalized == null) {
+            // Leaving :active on Windows resets an unset color, which then inherits again.
+            if (__WINDOWS__ && getInt8(this.style_view, StyleKeys.FONT_COLOR_STATE)) {
+                this.prepareMut();
+                setInt8(this.style_view, StyleKeys.FONT_COLOR_STATE, 0);
+                this.commitState(StateKeys.FONT_COLOR);
+            }
             return;
         }
         this.prepareMut();
@@ -1955,6 +2209,15 @@ export class Style {
     get styleView() {
         return this.style_view;
     }
+    get hasBoxStyle() {
+        const view = this.style_view;
+        if (!view)
+            return false;
+        if (getInt8(view, StyleKeys.WIDTH_TYPE) !== 0 || getInt8(view, StyleKeys.HEIGHT_TYPE) !== 0)
+            return true;
+        const sides = [StyleKeys.PADDING_LEFT_VALUE, StyleKeys.PADDING_RIGHT_VALUE, StyleKeys.PADDING_TOP_VALUE, StyleKeys.PADDING_BOTTOM_VALUE, StyleKeys.BORDER_LEFT_VALUE, StyleKeys.BORDER_RIGHT_VALUE, StyleKeys.BORDER_TOP_VALUE, StyleKeys.BORDER_BOTTOM_VALUE];
+        return sides.some((offset) => getFloat32(view, offset) > 0);
+    }
     get display() {
         const mode = getInt8(this.style_view, StyleKeys.DISPLAY_MODE);
         if (mode === 1 /* DisplayMode.Inline */) {
@@ -2021,14 +2284,7 @@ export class Style {
             this.prepareMut();
             setInt8(this.style_view, StyleKeys.DISPLAY, display);
             setInt8(this.style_view, StyleKeys.DISPLAY_MODE, displayMode);
-            if (this.isDirty == -1n) {
-                this.isDirty = StateKeys.DISPLAY_MODE.bits;
-            }
-            else {
-                this.isDirty = this.isDirty | StateKeys.DISPLAY_MODE.bits;
-            }
-            // DISPLAY/DISPLAY_MODE are disjoint bits; use .or(), not .and()
-            this.commitState(StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE));
+            this.commitState(StateKeys.DISPLAY_AND_MODE);
         }
     }
     get position() {
@@ -2183,8 +2439,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MIN_SIZE);
     }
@@ -2224,8 +2484,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MIN_SIZE);
     }
@@ -2265,8 +2529,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.WIDTH_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.SIZE);
     }
@@ -2306,8 +2574,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.SIZE);
     }
@@ -2347,8 +2619,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MAX_SIZE);
     }
@@ -2388,8 +2664,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MAX_SIZE);
     }
@@ -3702,9 +3982,9 @@ export class Style {
             return nodeHelper().getGridAutoRows(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridAutoRows;
+            return this.appleStyle.gridAutoRows;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridAutoRowsCss ?? '') : '';
     }
     set gridAutoRows(value) {
         if (!this.nativeView) {
@@ -3716,7 +3996,7 @@ export class Style {
             nodeHelper().setGridAutoRows(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridAutoRows = value;
+            this.appleStyle.gridAutoRows = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridAutoRows', value);
@@ -3730,9 +4010,9 @@ export class Style {
             return nodeHelper().getGridAutoColumns(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridAutoColumns;
+            return this.appleStyle.gridAutoColumns;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridAutoColumnsCss ?? '') : '';
     }
     set gridAutoColumns(value) {
         if (!this.nativeView) {
@@ -3744,7 +4024,7 @@ export class Style {
             nodeHelper().setGridAutoColumns(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridAutoColumns = value;
+            this.appleStyle.gridAutoColumns = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridAutoColumns', value);
@@ -3792,7 +4072,7 @@ export class Style {
             nodeHelper().setGridColumn(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridColumn = value;
+            this.appleStyle.gridColumn = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridColumn', value);
@@ -3806,9 +4086,9 @@ export class Style {
             return nodeHelper().getGridColumn(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridColumn;
+            return this.appleStyle.gridColumn;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridColumnCss ?? '') : '';
     }
     get gridColumnStart() {
         if (!this.nativeView) {
@@ -3818,9 +4098,9 @@ export class Style {
             return nodeHelper().getGridColumnStart(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridColumnStart;
+            return this.appleStyle.gridColumnStart;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridColumnStartCss ?? '') : '';
     }
     set gridColumnStart(value) {
         if (!this.nativeView) {
@@ -3832,7 +4112,7 @@ export class Style {
             nodeHelper().setGridColumnStart(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridColumnStart = value;
+            this.appleStyle.gridColumnStart = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridColumnStart', value);
@@ -3846,9 +4126,9 @@ export class Style {
             return nodeHelper().getGridColumnEnd(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridColumnEnd;
+            return this.appleStyle.gridColumnEnd;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridColumnEndCss ?? '') : '';
     }
     set gridColumnEnd(value) {
         if (!this.nativeView) {
@@ -3860,7 +4140,7 @@ export class Style {
             nodeHelper().setGridColumnEnd(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridColumnEnd = value;
+            this.appleStyle.gridColumnEnd = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridColumnEnd', value);
@@ -3876,7 +4156,7 @@ export class Style {
             nodeHelper().setGridRow(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridRow = value;
+            this.appleStyle.gridRow = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridRow', value);
@@ -3890,9 +4170,9 @@ export class Style {
             return nodeHelper().getGridRow(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridRow;
+            return this.appleStyle.gridRow;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridRowCss ?? '') : '';
     }
     get gridRowStart() {
         if (!this.nativeView) {
@@ -3902,9 +4182,9 @@ export class Style {
             return nodeHelper().getGridRowStart(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridRowStart;
+            return this.appleStyle.gridRowStart;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridRowStartCss ?? '') : '';
     }
     set gridRowStart(value) {
         if (!this.nativeView) {
@@ -3916,7 +4196,7 @@ export class Style {
             nodeHelper().setGridRowStart(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridRowStart = value;
+            this.appleStyle.gridRowStart = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridRowStart', value);
@@ -3930,9 +4210,9 @@ export class Style {
             return nodeHelper().getGridRowEnd(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridRowEnd;
+            return this.appleStyle.gridRowEnd;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridRowEndCss ?? '') : '';
     }
     set gridRowEnd(value) {
         if (!this.nativeView) {
@@ -3944,7 +4224,7 @@ export class Style {
             nodeHelper().setGridRowEnd(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridRowEnd = value;
+            this.appleStyle.gridRowEnd = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridRowEnd', value);
@@ -3960,7 +4240,7 @@ export class Style {
             nodeHelper().setGridArea(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridArea = value;
+            this.appleStyle.gridArea = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridArea', value);
@@ -3974,9 +4254,9 @@ export class Style {
             return nodeHelper().getGridArea(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridArea;
+            return this.appleStyle.gridArea;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridAreaCss ?? '') : '';
     }
     set gridTemplateRows(value) {
         if (!this.nativeView) {
@@ -3988,7 +4268,7 @@ export class Style {
             nodeHelper().setGridTemplateRows(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridTemplateRows = value;
+            this.appleStyle.gridTemplateRows = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridTemplateRows', value);
@@ -4002,9 +4282,9 @@ export class Style {
             return nodeHelper().getGridTemplateRows(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridTemplateRows;
+            return this.appleStyle.gridTemplateRows;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridTemplateRowsCss ?? '') : '';
     }
     get gridTemplateColumns() {
         if (!this.nativeView) {
@@ -4014,9 +4294,9 @@ export class Style {
             return nodeHelper().getGridTemplateColumns(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridTemplateColumns;
+            return this.appleStyle.gridTemplateColumns;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridTemplateColumnsCss ?? '') : '';
     }
     set gridTemplateColumns(value) {
         if (!this.nativeView) {
@@ -4028,7 +4308,7 @@ export class Style {
             nodeHelper().setGridTemplateColumns(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridTemplateColumns = value;
+            this.appleStyle.gridTemplateColumns = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridTemplateColumns', value);
@@ -4042,9 +4322,9 @@ export class Style {
             return nodeHelper().getGridTemplateAreas(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridTemplateAreas;
+            return this.appleStyle.gridTemplateAreas;
         }
-        return '';
+        return __WINDOWS__ ? (this.nativeView?.Style?.GridTemplateAreasCss ?? '') : '';
     }
     set gridTemplateAreas(value) {
         if (!this.nativeView) {
@@ -4056,7 +4336,7 @@ export class Style {
             nodeHelper().setGridTemplateAreas(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridTemplateAreas = value;
+            this.appleStyle.gridTemplateAreas = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridTemplateAreas', value);
@@ -4409,13 +4689,13 @@ export class Style {
             return nodeHelper().getBackground(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.background;
+            return this.appleStyle.background;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background') ?? '') : '';
     }
     set background(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background', value, () => nodeHelper().setBackground(this.nativeView, value), () => (this.nativeView.style.background = value));
+        this.setPseudoCssStringValue('background', value, () => nodeHelper().setBackground(this.nativeView, value), () => (this.appleStyle.background = value));
     }
     get backgroundImage() {
         if (!this.nativeView) {
@@ -4425,13 +4705,13 @@ export class Style {
             return nodeHelper().getBackgroundImage(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundImage;
+            return this.appleStyle.backgroundImage;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-image') ?? '') : '';
     }
     set backgroundImage(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-image', value, () => nodeHelper().setBackgroundImage(this.nativeView, value), () => (this.nativeView.style.backgroundImage = value));
+        this.setPseudoCssStringValue('background-image', value, () => nodeHelper().setBackgroundImage(this.nativeView, value), () => (this.appleStyle.backgroundImage = value));
     }
     get backgroundRepeat() {
         if (!this.nativeView) {
@@ -4441,13 +4721,13 @@ export class Style {
             return nodeHelper().getBackgroundRepeat(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundRepeat;
+            return this.appleStyle.backgroundRepeat;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-repeat') ?? '') : '';
     }
     set backgroundRepeat(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-repeat', value, () => nodeHelper().setBackgroundRepeat(this.nativeView, value), () => (this.nativeView.style.backgroundRepeat = value));
+        this.setPseudoCssStringValue('background-repeat', value, () => nodeHelper().setBackgroundRepeat(this.nativeView, value), () => (this.appleStyle.backgroundRepeat = value));
     }
     get backgroundPosition() {
         if (!this.nativeView) {
@@ -4457,13 +4737,13 @@ export class Style {
             return nodeHelper().getBackgroundPosition(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundPosition;
+            return this.appleStyle.backgroundPosition;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-position') ?? '') : '';
     }
     set backgroundPosition(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-position', value, () => nodeHelper().setBackgroundPosition(this.nativeView, value), () => (this.nativeView.style.backgroundPosition = value));
+        this.setPseudoCssStringValue('background-position', value, () => nodeHelper().setBackgroundPosition(this.nativeView, value), () => (this.appleStyle.backgroundPosition = value));
     }
     get backgroundSize() {
         if (!this.nativeView) {
@@ -4473,13 +4753,13 @@ export class Style {
             return nodeHelper().getBackgroundSize(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundSize;
+            return this.appleStyle.backgroundSize;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-size') ?? '') : '';
     }
     set backgroundSize(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-size', value, () => nodeHelper().setBackgroundSize(this.nativeView, value), () => (this.nativeView.style.backgroundSize = value));
+        this.setPseudoCssStringValue('background-size', value, () => nodeHelper().setBackgroundSize(this.nativeView, value), () => (this.appleStyle.backgroundSize = value));
     }
     get backgroundClip() {
         if (!this.nativeView) {
@@ -4489,13 +4769,13 @@ export class Style {
             return nodeHelper().getBackgroundClip(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundClip;
+            return this.appleStyle.backgroundClip;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-clip') ?? '') : '';
     }
     set backgroundClip(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-clip', value, () => nodeHelper().setBackgroundClip(this.nativeView, value), () => (this.nativeView.style.backgroundClip = value));
+        this.setPseudoCssStringValue('background-clip', value, () => nodeHelper().setBackgroundClip(this.nativeView, value), () => (this.appleStyle.backgroundClip = value));
     }
     get backgroundPositionX() {
         if (!this.nativeView) {
@@ -4505,13 +4785,13 @@ export class Style {
             return nodeHelper().getBackgroundPositionX(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundPositionX;
+            return this.appleStyle.backgroundPositionX;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-position-x') ?? '') : '';
     }
     set backgroundPositionX(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), '0%');
-        this.setPseudoCssStringValue('background-position-x', value, () => nodeHelper().setBackgroundPositionX(this.nativeView, value), () => (this.nativeView.style.backgroundPositionX = value));
+        this.setPseudoCssStringValue('background-position-x', value, () => nodeHelper().setBackgroundPositionX(this.nativeView, value), () => (this.appleStyle.backgroundPositionX = value));
     }
     get backgroundPositionY() {
         if (!this.nativeView) {
@@ -4521,13 +4801,13 @@ export class Style {
             return nodeHelper().getBackgroundPositionY(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundPositionY;
+            return this.appleStyle.backgroundPositionY;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-position-y') ?? '') : '';
     }
     set backgroundPositionY(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), '0%');
-        this.setPseudoCssStringValue('background-position-y', value, () => nodeHelper().setBackgroundPositionY(this.nativeView, value), () => (this.nativeView.style.backgroundPositionY = value));
+        this.setPseudoCssStringValue('background-position-y', value, () => nodeHelper().setBackgroundPositionY(this.nativeView, value), () => (this.appleStyle.backgroundPositionY = value));
     }
     get backgroundOrigin() {
         if (!this.nativeView) {
@@ -4537,13 +4817,13 @@ export class Style {
             return nodeHelper().getBackgroundOrigin(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundOrigin;
+            return this.appleStyle.backgroundOrigin;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-origin') ?? '') : '';
     }
     set backgroundOrigin(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'padding-box');
-        this.setPseudoCssStringValue('background-origin', value, () => nodeHelper().setBackgroundOrigin(this.nativeView, value), () => (this.nativeView.style.backgroundOrigin = value));
+        this.setPseudoCssStringValue('background-origin', value, () => nodeHelper().setBackgroundOrigin(this.nativeView, value), () => (this.appleStyle.backgroundOrigin = value));
     }
     get backgroundAttachment() {
         if (!this.nativeView) {
@@ -4553,13 +4833,13 @@ export class Style {
             return nodeHelper().getBackgroundAttachment(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundAttachment;
+            return this.appleStyle.backgroundAttachment;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-attachment') ?? '') : '';
     }
     set backgroundAttachment(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'scroll');
-        this.setPseudoCssStringValue('background-attachment', value, () => nodeHelper().setBackgroundAttachment(this.nativeView, value), () => (this.nativeView.style.backgroundAttachment = value));
+        this.setPseudoCssStringValue('background-attachment', value, () => nodeHelper().setBackgroundAttachment(this.nativeView, value), () => (this.appleStyle.backgroundAttachment = value));
     }
     get backgroundBlendMode() {
         if (!this.nativeView) {
@@ -4569,13 +4849,13 @@ export class Style {
             return nodeHelper().getBackgroundBlendMode(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundBlendMode;
+            return this.appleStyle.backgroundBlendMode;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('background-blend-mode') ?? '') : '';
     }
     set backgroundBlendMode(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'normal');
-        this.setPseudoCssStringValue('background-blend-mode', value, () => nodeHelper().setBackgroundBlendMode(this.nativeView, value), () => (this.nativeView.style.backgroundBlendMode = value));
+        this.setPseudoCssStringValue('background-blend-mode', value, () => nodeHelper().setBackgroundBlendMode(this.nativeView, value), () => (this.appleStyle.backgroundBlendMode = value));
     }
     hasBorderRadius() {
         const view = this.style_view;
@@ -4595,7 +4875,7 @@ export class Style {
             return this._borderRadiusCss ?? nodeHelper().getBorderRadius(this.nativeView);
         }
         if (__APPLE__) {
-            return this._borderRadiusCss ?? this.nativeView.style.borderRadius;
+            return this._borderRadiusCss ?? this.appleStyle.borderRadius;
         }
         if (__WINDOWS__ && this.style_view) {
             // Read back so a single corner longhand keeps the other three instead of resetting them to 0.
@@ -4613,7 +4893,7 @@ export class Style {
         }
         if (!this._pseudo)
             this._borderRadiusCss = undefined;
-        this.setPseudoCssStringValue('border-radius', value, () => nodeHelper().setBorderRadius(this.nativeView, value), () => (this.nativeView.style.borderRadius = value));
+        this.setPseudoCssStringValue('border-radius', value, () => nodeHelper().setBorderRadius(this.nativeView, value), () => (this.appleStyle.borderRadius = value));
     }
     _writeCornerRadius(corner, radius, shorthand, scale = deviceScale()) {
         if (!this.nativeView || this._pseudo || !this.style_view)
@@ -4677,7 +4957,7 @@ export class Style {
     }
     get objectFit() {
         const map = ['contain', 'cover', 'fill', 'none', 'scale-down'];
-        return map[getUint8(this.style_view, StyleKeys.OBJECT_FIT)] ?? 'contain';
+        return map[getUint8(this.style_view, StyleKeys.OBJECT_FIT)] ?? 'fill';
     }
     /** Read by `Img`; previously reachable only through the native HTML parser. */
     set objectFit(value) {
@@ -4724,19 +5004,19 @@ export class Style {
             return nodeHelper().getFontFamily(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.fontFamily;
+            return this.appleStyle.fontFamily;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('font-family') ?? '') : '';
     }
     // `font-family` is a native Style property (builds a FontFace), not a
     // style-buffer field, so it can't be written through the shared buffer.
     set fontFamily(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('font-family', value, () => nodeHelper().setFontFamily(this.nativeView, value), () => (this.nativeView.style.fontFamily = value));
+        this.setPseudoCssStringValue('font-family', value, () => nodeHelper().setFontFamily(this.nativeView, value), () => (this.appleStyle.fontFamily = value));
     }
     set textDecoration(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('text-decoration', value, () => nodeHelper().setTextDecoration(this.nativeView, value), () => this.nativeView.style.setTextDecoration(value));
+        this.setPseudoCssStringValue('text-decoration', value, () => nodeHelper().setTextDecoration(this.nativeView, value), () => this.appleStyle.setTextDecoration(value));
     }
     get textDecorationLine() {
         if (!this.nativeView) {
@@ -4746,7 +5026,7 @@ export class Style {
             return nodeHelper().getTextDecorationLine(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textDecorationLine;
+            return this.appleStyle.textDecorationLine;
         }
         if (__WINDOWS__ && this.style_view) {
             return textDecorationLineToCss(getUint8(this.style_view, StyleKeys.DECORATION_LINE));
@@ -4755,7 +5035,7 @@ export class Style {
     }
     set textDecorationLine(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'none');
-        this.setPseudoCssStringValue('text-decoration-line', value, () => nodeHelper().setTextDecorationLine(this.nativeView, value), () => (this.nativeView.style.textDecorationLine = value));
+        this.setPseudoCssStringValue('text-decoration-line', value, () => nodeHelper().setTextDecorationLine(this.nativeView, value), () => (this.appleStyle.textDecorationLine = value));
     }
     get textDecorationStyle() {
         if (!this.nativeView) {
@@ -4765,7 +5045,7 @@ export class Style {
             return nodeHelper().getTextDecorationStyle(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textDecorationStyle;
+            return this.appleStyle.textDecorationStyle;
         }
         if (__WINDOWS__ && this.style_view) {
             return textDecorationStyleToCss(getUint8(this.style_view, StyleKeys.DECORATION_STYLE));
@@ -4774,7 +5054,7 @@ export class Style {
     }
     set textDecorationStyle(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'solid');
-        this.setPseudoCssStringValue('text-decoration-style', value, () => nodeHelper().setTextDecorationStyle(this.nativeView, value), () => (this.nativeView.style.textDecorationStyle = value));
+        this.setPseudoCssStringValue('text-decoration-style', value, () => nodeHelper().setTextDecorationStyle(this.nativeView, value), () => (this.appleStyle.textDecorationStyle = value));
     }
     get textDecorationColor() {
         if (!this.nativeView) {
@@ -4784,7 +5064,7 @@ export class Style {
             return nodeHelper().getTextDecorationColor(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textDecorationColor;
+            return this.appleStyle.textDecorationColor;
         }
         if (__WINDOWS__ && this.style_view) {
             const argb = getUint32(this.style_view, StyleKeys.DECORATION_COLOR);
@@ -4794,7 +5074,7 @@ export class Style {
     }
     set textDecorationColor(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'currentcolor');
-        this.setPseudoCssStringValue('text-decoration-color', value, () => nodeHelper().setTextDecorationColor(this.nativeView, value), () => (this.nativeView.style.textDecorationColor = value));
+        this.setPseudoCssStringValue('text-decoration-color', value, () => nodeHelper().setTextDecorationColor(this.nativeView, value), () => (this.appleStyle.textDecorationColor = value));
     }
     get border() {
         if (!this.nativeView) {
@@ -4804,13 +5084,13 @@ export class Style {
             return nodeHelper().getBorder(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.border;
+            return this.appleStyle.border;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('border') ?? '') : '';
     }
     set border(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border', value, () => nodeHelper().setBorder(this.nativeView, value), () => (this.nativeView.style.border = value));
+        this.setPseudoCssStringValue('border', value, () => nodeHelper().setBorder(this.nativeView, value), () => (this.appleStyle.border = value));
     }
     get paddingCss() {
         if (!this.nativeView)
@@ -4819,15 +5099,15 @@ export class Style {
             return nodeHelper().getPaddingCssValue(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.paddingCss;
+            return this.appleStyle.paddingCss;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('padding') ?? '') : '';
     }
     set paddingCss(value) {
         // a bare number is dip, matching other numeric setters; Android's
         // native parser treats "px" as unscaled device pixels, "dip" as scaled
         const strValue = typeof value === 'number' ? `${value}dip` : value;
-        this.setPseudoCssStringValue('padding', strValue, () => nodeHelper().setPaddingCss(this.nativeView, strValue), () => (this.nativeView.style.paddingCss = strValue));
+        this.setPseudoCssStringValue('padding', strValue, () => nodeHelper().setPaddingCss(this.nativeView, strValue), () => (this.appleStyle.paddingCss = strValue));
     }
     get marginCss() {
         if (!this.nativeView)
@@ -4836,14 +5116,14 @@ export class Style {
             return nodeHelper().getMarginCssValue(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.marginCss;
+            return this.appleStyle.marginCss;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('margin') ?? '') : '';
     }
     set marginCss(value) {
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
         const strValue = typeof value === 'number' ? `${value}dip` : value;
-        this.setPseudoCssStringValue('margin', strValue, () => nodeHelper().setMarginCss(this.nativeView, strValue), () => (this.nativeView.style.marginCss = strValue));
+        this.setPseudoCssStringValue('margin', strValue, () => nodeHelper().setMarginCss(this.nativeView, strValue), () => (this.appleStyle.marginCss = strValue));
     }
     get insetCss() {
         if (!this.nativeView)
@@ -4852,42 +5132,42 @@ export class Style {
             return nodeHelper().getInsetCssValue(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.insetCss;
+            return this.appleStyle.insetCss;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('inset') ?? '') : '';
     }
     set insetCss(value) {
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
         const strValue = typeof value === 'number' ? `${value}dip` : value;
-        this.setPseudoCssStringValue('inset', strValue, () => nodeHelper().setInsetCss(this.nativeView, strValue), () => (this.nativeView.style.insetCss = strValue));
+        this.setPseudoCssStringValue('inset', strValue, () => nodeHelper().setInsetCss(this.nativeView, strValue), () => (this.appleStyle.insetCss = strValue));
     }
     get borderLeft() {
         return '';
     }
     set borderLeft(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-left', value, () => nodeHelper().setBorderLeft(this.nativeView, value), () => (this.nativeView.style.borderLeft = value));
+        this.setPseudoCssStringValue('border-left', value, () => nodeHelper().setBorderLeft(this.nativeView, value), () => (this.appleStyle.borderLeft = value));
     }
     get borderTop() {
         return '';
     }
     set borderTop(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-top', value, () => nodeHelper().setBorderTop(this.nativeView, value), () => (this.nativeView.style.borderTop = value));
+        this.setPseudoCssStringValue('border-top', value, () => nodeHelper().setBorderTop(this.nativeView, value), () => (this.appleStyle.borderTop = value));
     }
     get borderRight() {
         return '';
     }
     set borderRight(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-right', value, () => nodeHelper().setBorderRight(this.nativeView, value), () => (this.nativeView.style.borderRight = value));
+        this.setPseudoCssStringValue('border-right', value, () => nodeHelper().setBorderRight(this.nativeView, value), () => (this.appleStyle.borderRight = value));
     }
     get borderBottom() {
         return '';
     }
     set borderBottom(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-bottom', value, () => nodeHelper().setBorderBottom(this.nativeView, value), () => (this.nativeView.style.borderBottom = value));
+        this.setPseudoCssStringValue('border-bottom', value, () => nodeHelper().setBorderBottom(this.nativeView, value), () => (this.appleStyle.borderBottom = value));
     }
     get filter() {
         if (!this.nativeView) {
@@ -4897,13 +5177,13 @@ export class Style {
             return nodeHelper().getFilter(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.filter;
+            return this.appleStyle.filter;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('filter') ?? '') : '';
     }
     set filter(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('filter', value, () => nodeHelper().setFilter(this.nativeView, value), () => (this.nativeView.style.filter = value));
+        this.setPseudoCssStringValue('filter', value, () => nodeHelper().setFilter(this.nativeView, value), () => (this.appleStyle.filter = value));
     }
     get boxShadow() {
         if (!this.nativeView) {
@@ -4913,9 +5193,9 @@ export class Style {
             return nodeHelper().getBoxShadow(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.boxShadow;
+            return this.appleStyle.boxShadow;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('box-shadow') ?? '') : '';
     }
     set 'box-shadow'(value) {
         this.boxShadow = value;
@@ -4925,7 +5205,7 @@ export class Style {
     }
     set boxShadow(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('box-shadow', value, () => nodeHelper().setBoxShadow(this.nativeView, value), () => (this.nativeView.style.boxShadow = value));
+        this.setPseudoCssStringValue('box-shadow', value, () => nodeHelper().setBoxShadow(this.nativeView, value), () => (this.appleStyle.boxShadow = value));
     }
     get transform() {
         if (!this.nativeView) {
@@ -4935,13 +5215,13 @@ export class Style {
             return nodeHelper().getTransform(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.transform;
+            return this.appleStyle.transform;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('transform') ?? '') : '';
     }
     set transform(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('transform', value, () => nodeHelper().setTransform(this.nativeView, value), () => (this.nativeView.style.transform = value));
+        this.setPseudoCssStringValue('transform', value, () => nodeHelper().setTransform(this.nativeView, value), () => (this.appleStyle.transform = value));
     }
     get verticalAlign() {
         const isPercent = getUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET) == 1;
@@ -5099,13 +5379,13 @@ export class Style {
             return nodeHelper().getTextShadow(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textShadow;
+            return this.appleStyle.textShadow;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('text-shadow') ?? '') : '';
     }
     set textShadow(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('text-shadow', value, () => nodeHelper().setTextShadow(this.nativeView, value), () => (this.nativeView.style.textShadow = value));
+        this.setPseudoCssStringValue('text-shadow', value, () => nodeHelper().setTextShadow(this.nativeView, value), () => (this.appleStyle.textShadow = value));
     }
     get zIndex() {
         return getInt32(this.style_view, StyleKeys.Z_INDEX);
@@ -5187,7 +5467,7 @@ export class Style {
     }
     set cornerShape(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape', value, () => nodeHelper().setCornerShape(this.nativeView, value), () => (this.nativeView.style.cornerShape = value));
+        this.setPseudoCssStringValue('corner-shape', value, () => nodeHelper().setCornerShape(this.nativeView, value), () => (this.appleStyle.cornerShape = value));
     }
     get cornerShape() {
         if (!this.nativeView) {
@@ -5197,9 +5477,9 @@ export class Style {
             return nodeHelper().getCornerShape(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShape;
+            return this.appleStyle.cornerShape;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape') ?? '') : '';
     }
     get cornerShapeTopLeft() {
         if (!this.nativeView)
@@ -5208,13 +5488,13 @@ export class Style {
             return nodeHelper().getCornerShapeTopLeft(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeTopLeft;
+            return this.appleStyle.cornerShapeTopLeft;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-top-left') ?? '') : '';
     }
     set cornerShapeTopLeft(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-top-left', value, () => nodeHelper().setCornerShapeTopLeft(this.nativeView, value), () => (this.nativeView.style.cornerShapeTopLeft = value));
+        this.setPseudoCssStringValue('corner-shape-top-left', value, () => nodeHelper().setCornerShapeTopLeft(this.nativeView, value), () => (this.appleStyle.cornerShapeTopLeft = value));
     }
     get cornerShapeTopRight() {
         if (!this.nativeView)
@@ -5223,13 +5503,13 @@ export class Style {
             return nodeHelper().getCornerShapeTopRight(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeTopRight;
+            return this.appleStyle.cornerShapeTopRight;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-top-right') ?? '') : '';
     }
     set cornerShapeTopRight(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-top-right', value, () => nodeHelper().setCornerShapeTopRight(this.nativeView, value), () => (this.nativeView.style.cornerShapeTopRight = value));
+        this.setPseudoCssStringValue('corner-shape-top-right', value, () => nodeHelper().setCornerShapeTopRight(this.nativeView, value), () => (this.appleStyle.cornerShapeTopRight = value));
     }
     get cornerShapeBottomRight() {
         if (!this.nativeView)
@@ -5238,13 +5518,13 @@ export class Style {
             return nodeHelper().getCornerShapeBottomRight(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeBottomRight;
+            return this.appleStyle.cornerShapeBottomRight;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-bottom-right') ?? '') : '';
     }
     set cornerShapeBottomRight(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-bottom-right', value, () => nodeHelper().setCornerShapeBottomRight(this.nativeView, value), () => (this.nativeView.style.cornerShapeBottomRight = value));
+        this.setPseudoCssStringValue('corner-shape-bottom-right', value, () => nodeHelper().setCornerShapeBottomRight(this.nativeView, value), () => (this.appleStyle.cornerShapeBottomRight = value));
     }
     get cornerShapeBottomLeft() {
         if (!this.nativeView)
@@ -5253,13 +5533,13 @@ export class Style {
             return nodeHelper().getCornerShapeBottomLeft(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeBottomLeft;
+            return this.appleStyle.cornerShapeBottomLeft;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('corner-shape-bottom-left') ?? '') : '';
     }
     set cornerShapeBottomLeft(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-bottom-left', value, () => nodeHelper().setCornerShapeBottomLeft(this.nativeView, value), () => (this.nativeView.style.cornerShapeBottomLeft = value));
+        this.setPseudoCssStringValue('corner-shape-bottom-left', value, () => nodeHelper().setCornerShapeBottomLeft(this.nativeView, value), () => (this.appleStyle.cornerShapeBottomLeft = value));
     }
     get objectPosition() {
         if (!this.style_view)
@@ -5401,13 +5681,13 @@ export class Style {
             return nodeHelper().getBorderImage(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.borderImage;
+            return this.appleStyle.borderImage;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('border-image') ?? '') : '';
     }
     set borderImage(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-image', value, () => nodeHelper().setBorderImage(this.nativeView, value), () => (this.nativeView.style.borderImage = value));
+        this.setPseudoCssStringValue('border-image', value, () => nodeHelper().setBorderImage(this.nativeView, value), () => (this.appleStyle.borderImage = value));
     }
     set 'border-image'(value) {
         this.borderImage = value;
@@ -5448,13 +5728,13 @@ export class Style {
             return nodeHelper().getFontFeatureSettings(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.fontFeatureSettings;
+            return this.appleStyle.fontFeatureSettings;
         }
-        return 'normal';
+        return __WINDOWS__ ? this._windowsCss.get('font-feature-settings') || 'normal' : 'normal';
     }
     set fontFeatureSettings(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('font-feature-settings', value, () => nodeHelper().setFontFeatureSettings(this.nativeView, value), () => (this.nativeView.style.fontFeatureSettings = value));
+        this.setPseudoCssStringValue('font-feature-settings', value, () => nodeHelper().setFontFeatureSettings(this.nativeView, value), () => (this.appleStyle.fontFeatureSettings = value));
     }
     set 'font-feature-settings'(value) {
         this.fontFeatureSettings = value;
@@ -5554,13 +5834,13 @@ export class Style {
             return nodeHelper().getBackdropFilter(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backdropFilter;
+            return this.appleStyle.backdropFilter;
         }
-        return '';
+        return __WINDOWS__ ? (this._windowsCss.get('backdrop-filter') ?? '') : '';
     }
     set backdropFilter(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('backdrop-filter', value, () => nodeHelper().setBackdropFilter(this.nativeView, value), () => (this.nativeView.style.backdropFilter = value));
+        this.setPseudoCssStringValue('backdrop-filter', value, () => nodeHelper().setBackdropFilter(this.nativeView, value), () => (this.appleStyle.backdropFilter = value));
     }
     set 'backdrop-filter'(value) {
         this.backdropFilter = value;