@triniwiz/nativescript-masonkit 1.0.0-alpha.35 → 1.0.0-alpha.36

package/style.d.ts

@@ -57,14 +57,14 @@ export declare class Style {
     set maxWidth(value: LengthAuto);
     get maxHeight(): LengthAuto;
     set maxHeight(value: LengthAuto);
-    get borderLeft(): Length;
-    set borderLeft(value: Length);
-    get borderRight(): Length;
-    set borderRight(value: Length);
-    get borderTop(): Length;
-    set borderTop(value: Length);
-    get borderBottom(): Length;
-    set borderBottom(value: Length);
+    get borderLeftWidth(): Length;
+    set borderLeftWidth(value: Length);
+    get borderRightWidth(): Length;
+    set borderRightWidth(value: Length);
+    get borderTopWidth(): Length;
+    set borderTopWidth(value: Length);
+    get borderBottomWidth(): Length;
+    set borderBottomWidth(value: Length);
     get left(): LengthAuto;
     set left(value: LengthAuto);
     get right(): LengthAuto;
@@ -164,6 +164,12 @@ export declare class Style {
     set textOverflow(value: 'clip' | 'ellipsis' | `${string}`);
     get textAlignment(): 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
     set textAlignment(value: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end');
+    get background(): string;
+    set background(value: string);
+    get border(): string;
+    set border(value: string);
+    get filter(): string;
+    set filter(value: string);
     toJSON(): {
         display: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "inline-grid";
         position: "relative" | "absolute";
@@ -198,12 +204,6 @@ export declare class Style {
             top: Length;
             bottom: Length;
         };
-        border: {
-            left: Length;
-            right: Length;
-            top: Length;
-            bottom: Length;
-        };
         aspectRatio: number;
         flexBasis: LengthAuto;
         overflow: OverFlow | "visible visible" | "visible hidden" | "visible scroll" | "visible clip" | "visible auto" | "hidden visible" | "hidden hidden" | "hidden scroll" | "hidden clip" | "hidden auto" | "scroll visible" | "scroll hidden" | "scroll scroll" | "scroll clip" | "scroll auto" | "clip visible" | "clip hidden" | "clip scroll" | "clip clip" | "clip auto" | "auto visible" | "auto hidden" | "auto scroll" | "auto clip" | "auto auto";
@@ -218,5 +218,6 @@ export declare class Style {
         gridRow: string;
         gridTemplateRows: string;
         gridTemplateColumns: string;
+        filter: string;
     };
 }

package/style.js

@@ -85,8 +85,61 @@ var StyleKeys;
     StyleKeys[StyleKeys["ITEM_IS_REPLACED"] = 320] = "ITEM_IS_REPLACED";
     StyleKeys[StyleKeys["DISPLAY_MODE"] = 324] = "DISPLAY_MODE";
     StyleKeys[StyleKeys["FORCE_INLINE"] = 328] = "FORCE_INLINE";
-    StyleKeys[StyleKeys["MIN_CONTENT"] = 332] = "MIN_CONTENT";
-    StyleKeys[StyleKeys["MAX_CONTENT"] = 336] = "MAX_CONTENT";
+    StyleKeys[StyleKeys["MIN_CONTENT_WIDTH"] = 332] = "MIN_CONTENT_WIDTH";
+    StyleKeys[StyleKeys["MIN_CONTENT_HEIGHT"] = 336] = "MIN_CONTENT_HEIGHT";
+    StyleKeys[StyleKeys["MAX_CONTENT_WIDTH"] = 340] = "MAX_CONTENT_WIDTH";
+    StyleKeys[StyleKeys["MAX_CONTENT_HEIGHT"] = 344] = "MAX_CONTENT_HEIGHT";
+    // ----------------------------
+    // Border Style (per side)
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_LEFT_STYLE"] = 348] = "BORDER_LEFT_STYLE";
+    StyleKeys[StyleKeys["BORDER_RIGHT_STYLE"] = 352] = "BORDER_RIGHT_STYLE";
+    StyleKeys[StyleKeys["BORDER_TOP_STYLE"] = 356] = "BORDER_TOP_STYLE";
+    StyleKeys[StyleKeys["BORDER_BOTTOM_STYLE"] = 360] = "BORDER_BOTTOM_STYLE";
+    // ----------------------------
+    // Border Color (per side)
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_LEFT_COLOR"] = 364] = "BORDER_LEFT_COLOR";
+    StyleKeys[StyleKeys["BORDER_RIGHT_COLOR"] = 368] = "BORDER_RIGHT_COLOR";
+    StyleKeys[StyleKeys["BORDER_TOP_COLOR"] = 372] = "BORDER_TOP_COLOR";
+    StyleKeys[StyleKeys["BORDER_BOTTOM_COLOR"] = 376] = "BORDER_BOTTOM_COLOR";
+    // ============================================================
+    // Border Radius (elliptical + squircle exponent)
+    // Each corner = 20 bytes:
+    //   x_type (4), x_value (4), y_type (4), y_value (4), exponent (4)
+    // ============================================================
+    // ----------------------------
+    // Top-left corner (20 bytes)
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_X_TYPE"] = 380] = "BORDER_RADIUS_TOP_LEFT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_X_VALUE"] = 384] = "BORDER_RADIUS_TOP_LEFT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_Y_TYPE"] = 388] = "BORDER_RADIUS_TOP_LEFT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_Y_VALUE"] = 392] = "BORDER_RADIUS_TOP_LEFT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_EXPONENT"] = 396] = "BORDER_RADIUS_TOP_LEFT_EXPONENT";
+    // ----------------------------
+    // Top-right corner
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_X_TYPE"] = 400] = "BORDER_RADIUS_TOP_RIGHT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_X_VALUE"] = 404] = "BORDER_RADIUS_TOP_RIGHT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_Y_TYPE"] = 408] = "BORDER_RADIUS_TOP_RIGHT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_Y_VALUE"] = 412] = "BORDER_RADIUS_TOP_RIGHT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_EXPONENT"] = 416] = "BORDER_RADIUS_TOP_RIGHT_EXPONENT";
+    // ----------------------------
+    // Bottom-right corner
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_X_TYPE"] = 420] = "BORDER_RADIUS_BOTTOM_RIGHT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_X_VALUE"] = 424] = "BORDER_RADIUS_BOTTOM_RIGHT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_Y_TYPE"] = 428] = "BORDER_RADIUS_BOTTOM_RIGHT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_Y_VALUE"] = 432] = "BORDER_RADIUS_BOTTOM_RIGHT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_EXPONENT"] = 436] = "BORDER_RADIUS_BOTTOM_RIGHT_EXPONENT";
+    // ----------------------------
+    // Bottom-left corner
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_X_TYPE"] = 440] = "BORDER_RADIUS_BOTTOM_LEFT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_X_VALUE"] = 444] = "BORDER_RADIUS_BOTTOM_LEFT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_Y_TYPE"] = 448] = "BORDER_RADIUS_BOTTOM_LEFT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_Y_VALUE"] = 452] = "BORDER_RADIUS_BOTTOM_LEFT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_EXPONENT"] = 456] = "BORDER_RADIUS_BOTTOM_LEFT_EXPONENT";
 })(StyleKeys || (StyleKeys = {}));
 var TextStyleKeys;
 (function (TextStyleKeys) {
@@ -198,8 +251,13 @@ StateKeys.ITEM_IS_TABLE = new StateKeys(1n << 32n);
 StateKeys.ITEM_IS_REPLACED = new StateKeys(1n << 33n);
 StateKeys.DISPLAY_MODE = new StateKeys(1n << 34n);
 StateKeys.FORCE_INLINE = new StateKeys(1n << 35n);
-StateKeys.MIN_CONTENT = new StateKeys(1n << 36n);
-StateKeys.MAX_CONTENT = new StateKeys(1n << 37n);
+StateKeys.MIN_CONTENT_WIDTH = new StateKeys(1n << 36n);
+StateKeys.MIN_CONTENT_HEIGHT = new StateKeys(1n << 37n);
+StateKeys.MAX_CONTENT_WIDTH = new StateKeys(1n << 38n);
+StateKeys.MAX_CONTENT_HEIGHT = new StateKeys(1n << 39n);
+StateKeys.BORDER_STYLE = new StateKeys(1n << 40n);
+StateKeys.BORDER_RADIUS = new StateKeys(1n << 41n);
+StateKeys.BORDER_COLOR = new StateKeys(1n << 42n);
 class TextStateKeys {
     constructor(bits) {
         this.bits = bits;
@@ -929,12 +987,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.MAX_SIZE);
     }
-    get borderLeft() {
+    get borderLeftWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderLeft(value) {
+    set borderLeftWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 0);
@@ -959,12 +1017,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.BORDER);
     }
-    get borderRight() {
+    get borderRightWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderRight(value) {
+    set borderRightWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 0);
@@ -989,12 +1047,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.BORDER);
     }
-    get borderTop() {
+    get borderTopWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderTop(value) {
+    set borderTopWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE, 0);
@@ -1019,12 +1077,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.BORDER);
     }
-    get borderBottom() {
+    get borderBottomWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderBottom(value) {
+    set borderBottomWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 0);
@@ -1885,25 +1943,47 @@ export class Style {
         if (!this.nativeView) {
             return '';
         }
-        return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridAutoRows(this.nativeView);
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridAutoRows(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridAutoRows;
+        }
+        return '';
     }
     set gridAutoRows(value) {
         if (!this.nativeView) {
             return;
         }
-        org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoRows(this.nativeView, value);
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoRows(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridAutoRows = value;
+        }
     }
     get gridAutoColumns() {
         if (!this.nativeView) {
             return '';
         }
-        return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridAutoColumns(this.nativeView);
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridAutoColumns(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridAutoColumns;
+        }
+        return '';
     }
     set gridAutoColumns(value) {
         if (!this.nativeView) {
             return;
         }
-        org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoColumns(this.nativeView, value);
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoColumns(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridAutoColumns = value;
+        }
     }
     get gridAutoFlow() {
         switch (getInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW)) {
@@ -1953,6 +2033,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumn(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridColumn = value;
+        }
     }
     get gridColumn() {
         if (!this.nativeView) {
@@ -1961,6 +2044,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridColumn(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridColumn;
+        }
         return '';
     }
     get gridColumnStart() {
@@ -1970,6 +2056,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridColumnStart(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridColumnStart;
+        }
         return '';
     }
     set gridColumnStart(value) {
@@ -1979,6 +2068,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumnStart(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridColumnStart = value;
+        }
     }
     get gridColumnEnd() {
         if (!this.nativeView) {
@@ -1987,6 +2079,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridColumnEnd(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridColumnEnd;
+        }
         return '';
     }
     set gridColumnEnd(value) {
@@ -1996,6 +2091,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumnEnd(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridColumnEnd = value;
+        }
     }
     set gridRow(value) {
         if (!this.nativeView) {
@@ -2004,6 +2102,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRow(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridRow = value;
+        }
     }
     get gridRow() {
         if (!this.nativeView) {
@@ -2012,6 +2113,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridRow(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridRow;
+        }
         return '';
     }
     get gridRowStart() {
@@ -2021,6 +2125,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridRowStart(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridRowStart;
+        }
         return '';
     }
     set gridRowStart(value) {
@@ -2030,6 +2137,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRowStart(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridRowStart = value;
+        }
     }
     get gridRowEnd() {
         if (!this.nativeView) {
@@ -2038,6 +2148,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridRowEnd(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridRowEnd;
+        }
         return '';
     }
     set gridRowEnd(value) {
@@ -2047,6 +2160,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRowEnd(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridRowEnd = value;
+        }
     }
     set gridArea(value) {
         if (!this.nativeView) {
@@ -2055,6 +2171,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridArea(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridArea = value;
+        }
     }
     get gridArea() {
         if (!this.nativeView) {
@@ -2063,6 +2182,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridArea(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridArea;
+        }
         return '';
     }
     set gridTemplateRows(value) {
@@ -2072,6 +2194,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateRows(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridTemplateRows = value;
+        }
     }
     get gridTemplateRows() {
         if (!this.nativeView) {
@@ -2080,6 +2205,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridTemplateRows(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridTemplateRows;
+        }
         return '';
     }
     get gridTemplateColumns() {
@@ -2089,6 +2217,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridTemplateColumns(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridTemplateColumns;
+        }
         return '';
     }
     set gridTemplateColumns(value) {
@@ -2098,6 +2229,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateColumns(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridTemplateColumns = value;
+        }
     }
     get gridTemplateAreas() {
         if (!this.nativeView) {
@@ -2106,6 +2240,9 @@ export class Style {
         if (__ANDROID__) {
             return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridTemplateAreas(this.nativeView);
         }
+        if (__APPLE__) {
+            return this.nativeView.style.gridTemplateAreas;
+        }
         return '';
     }
     set gridTemplateAreas(value) {
@@ -2115,6 +2252,9 @@ export class Style {
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateAreas(this.nativeView, value);
         }
+        if (__APPLE__) {
+            this.nativeView.style.gridTemplateAreas = value;
+        }
     }
     get overflow() {
         const x = this.overflowX;
@@ -2460,6 +2600,75 @@ export class Style {
             this.setOrAppendTextState(TextStateKeys.TEXT_ALIGN);
         }
     }
+    get background() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getBackground(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.background;
+        }
+        return '';
+    }
+    set background(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setBackground(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.background = value;
+        }
+    }
+    get border() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getBorder(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.border;
+        }
+        return '';
+    }
+    set border(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setBorder(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.border = value;
+        }
+    }
+    get filter() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getFilter(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.filter;
+        }
+        return '';
+    }
+    set filter(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setFilter(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.filter = value;
+        }
+    }
     toJSON() {
         return {
             display: this.display,
@@ -2495,12 +2704,6 @@ export class Style {
                 top: this.paddingTop,
                 bottom: this.paddingBottom,
             },
-            border: {
-                left: this.borderLeft,
-                right: this.borderRight,
-                top: this.borderTop,
-                bottom: this.borderBottom,
-            },
             aspectRatio: this.aspectRatio,
             flexBasis: this.flexBasis,
             overflow: this.overflow,
@@ -2515,6 +2718,7 @@ export class Style {
             gridRow: this.gridRow,
             gridTemplateRows: this.gridTemplateRows,
             gridTemplateColumns: this.gridTemplateColumns,
+            filter: this.filter
         };
     }
 }