@triniwiz/nativescript-masonkit 1.0.0-beta.117 → 1.0.0-beta.119

package/properties.d.ts

@@ -1,4 +1,4 @@
-import { CssProperty, CssAnimationProperty, Style, ShorthandProperty, Property } from '@nativescript/core';
+import { CssProperty, CssAnimationProperty, InheritedCssProperty, Style, ShorthandProperty, Property } from '@nativescript/core';
 import { Display, Overflow, Length, LengthAuto, Position, BoxSizing, GridAutoFlow, AlignContent, VerticalAlign, Float, Clear } from '.';
 import type { ViewBase } from './common';
 import type { LonghandValue } from './css-shorthands';
@@ -13,11 +13,6 @@ export declare const textProperty: Property<ViewBase, string>;
 export declare const displayProperty: CssProperty<Style, Display>;
 export declare const filterProperty: CssProperty<Style, string>;
 export declare const borderColorProperty: CssProperty<Style, string>;
-export declare const borderProperty: CssProperty<Style, string>;
-export declare const borderLeftProperty: CssProperty<Style, string>;
-export declare const borderTopProperty: CssProperty<Style, string>;
-export declare const borderRightProperty: CssProperty<Style, string>;
-export declare const borderBottomProperty: CssProperty<Style, string>;
 export declare const backgroundProperty: CssProperty<Style, string>;
 export declare const backgroundImageProperty: CssProperty<Style, string>;
 export declare const backgroundRepeatProperty: CssProperty<Style, string>;
@@ -76,6 +71,7 @@ export declare const AlignContentParse: (value: any) => unknown;
 export declare const alignContentProperty: CssProperty<Style, AlignContent>;
 export declare const justifyItemsProperty: CssProperty<Style, import(".").AlignItems>;
 export declare const justifySelfProperty: CssProperty<Style, import(".").AlignSelf>;
+export declare const placeShorthands: MasonShorthand[];
 export declare const JustifyContentIsValid: (value: any) => value is string;
 export declare const JustifyContentParse: (value: any) => unknown;
 export declare const flexBasisProperty: CssProperty<Style, LengthAuto>;
@@ -106,12 +102,19 @@ export declare const cornerShapeTopRightProperty: CssProperty<Style, string>;
 export declare const cornerShapeBottomRightProperty: CssProperty<Style, string>;
 export declare const cornerShapeBottomLeftProperty: CssProperty<Style, string>;
 export declare const objectPositionProperty: CssProperty<Style, string>;
-export declare const borderStyleProperty: CssProperty<Style, string>;
+export declare const borderTopStyleProperty: CssProperty<Style, string>;
+export declare const borderRightStyleProperty: CssProperty<Style, string>;
+export declare const borderBottomStyleProperty: CssProperty<Style, string>;
+export declare const borderLeftStyleProperty: CssProperty<Style, string>;
 export declare const borderImageProperty: CssProperty<Style, string>;
 export declare const fontStretchProperty: CssProperty<Style, string>;
 export declare const fontFeatureSettingsProperty: CssProperty<Style, string>;
 export declare const wordSpacingProperty: CssProperty<Style, string>;
 export declare const hyphensProperty: CssProperty<Style, string>;
+export declare const textIndentProperty: CssProperty<Style, string>;
+export declare const lineClampProperty: CssProperty<Style, string>;
+export declare const webkitLineClampProperty: CssProperty<Style, string>;
+export declare const transformOriginProperty: CssProperty<Style, string>;
 export declare const backdropFilterProperty: CssProperty<Style, string>;
 export declare const maskImageProperty: CssProperty<Style, string>;
 export declare const maskSizeProperty: CssAnimationProperty<Style, string>;
@@ -133,7 +136,15 @@ export declare const maskBorderProperty: ShorthandProperty<Style, any>;
 export declare const writingModeProperty: CssProperty<Style, string>;
 export declare const unicodeBidiProperty: CssProperty<Style, string>;
 export declare const caretColorProperty: CssProperty<Style, string>;
-export declare const listStyleTypeProperty: CssProperty<Style, string>;
-export declare const listStylePositionProperty: CssProperty<Style, string>;
+export declare const listStyleTypeProperty: InheritedCssProperty<Style, string>;
+export declare const listStylePositionProperty: InheritedCssProperty<Style, string>;
+export declare const listStyleShorthand: MasonShorthand;
+export declare const listStyleProperty: ShorthandProperty<Style, any>;
+export declare const borderStyleProperty: ShorthandProperty<Style, any>;
+export declare const borderProperty: ShorthandProperty<Style, any>;
+export declare const borderTopProperty: ShorthandProperty<Style, any>;
+export declare const borderRightProperty: ShorthandProperty<Style, any>;
+export declare const borderBottomProperty: ShorthandProperty<Style, any>;
+export declare const borderLeftProperty: ShorthandProperty<Style, any>;
 export declare const masonShorthands: MasonShorthand[];
 export {};

package/properties.js

@@ -1,14 +1,16 @@
-import { CssProperty, CssAnimationProperty, backgroundColorProperty, Style, ShorthandProperty, Length as CoreLength, fontSizeProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, PercentLength as CorePercentLength, Trace, CoreTypes, unsetValue, verticalAlignmentProperty, textShadowProperty, Font, Property, makeParser, makeValidator, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty } from '@nativescript/core';
+import { CssProperty, CssAnimationProperty, InheritedCssProperty, backgroundColorProperty, Style, ShorthandProperty, Length as CoreLength, fontSizeProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, PercentLength as CorePercentLength, Trace, CoreTypes, unsetValue, verticalAlignmentProperty, textShadowProperty, Font, Property, makeParser, makeValidator, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty } from '@nativescript/core';
 import { isMasonView_, touchAction_ } from './symbols';
 /** Marks a Style whose size accessors already resolve Mason's units. */
 const MASON_SIZE_UNITS = Symbol('mason:size-units');
 import { cssLengthToDip, parseAspectRatio } from './style';
+import { isCssMathFunction } from './css-math';
 import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
 import { parseCSSShadow } from '@nativescript/core/ui/styling/css-shadow';
 import { installKeyframes, interpolatePositionList, interpolateSizeList, registerKeyframeProperty } from './css-keyframes';
 import { borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
-import { BORDER_WIDTH_KEYWORDS, splitBackground, splitMask, splitMaskBorder, splitWebkitMask, webkitMaskBox, webkitMaskComposite, splitBorderColor, splitBorderRadius, splitBorderWidth, splitFlex, splitFlexFlow, splitGap, splitMargin, splitOverflow, splitPadding } from './css-shorthands';
+import { BORDER_WIDTH_KEYWORDS, passThrough, splitBorder, splitBorderSide, splitBorderStyle, splitBorderStyleStartEnd, splitBorderWidthStartEnd, splitBorderColorStartEnd, splitInsetStartEnd, splitMarginStartEnd, splitPaddingStartEnd, splitBackground, splitMask, splitMaskBorder, splitWebkitMask, webkitMaskBox, webkitMaskComposite, splitBorderColor, splitBorderRadius, splitBorderWidth, splitFlex, splitFlexFlow, splitGap, splitMargin, splitOverflow, splitPadding } from './css-shorthands';
 import { cssLength, isCssLength, toCamelCase } from './css-shorthands';
+import { splitListStyle, splitPlace } from './css-shorthands';
 function getViewStyle(view) {
     const ret = (__ANDROID__ ? view?.get() : view?.deref());
     // Undefined for a plain NativeScript view (and for a cleared ref): only mason's
@@ -111,6 +113,11 @@ export const displayProperty = new CssProperty({
             case 'inline-flex':
             case 'inline-grid':
                 return value;
+            // The legacy boxes `line-clamp` utilities ask for.
+            case '-webkit-box':
+                return 'block';
+            case '-webkit-inline-box':
+                return 'inline-block';
             default:
                 return undefined;
         }
@@ -124,26 +131,6 @@ export const borderColorProperty = new CssProperty({
     name: 'borderColor',
     cssName: 'border-color',
 });
-export const borderProperty = new CssProperty({
-    name: 'border',
-    cssName: 'border',
-});
-export const borderLeftProperty = new CssProperty({
-    name: 'borderLeft',
-    cssName: 'border-left',
-});
-export const borderTopProperty = new CssProperty({
-    name: 'borderTop',
-    cssName: 'border-top',
-});
-export const borderRightProperty = new CssProperty({
-    name: 'borderRight',
-    cssName: 'border-right',
-});
-export const borderBottomProperty = new CssProperty({
-    name: 'borderBottom',
-    cssName: 'border-bottom',
-});
 export const backgroundProperty = new CssProperty({
     name: 'background',
     cssName: 'background',
@@ -586,7 +573,12 @@ fontSizeProperty.overrideHandlers({
             if (newValue) {
                 if (typeof newValue === 'string') {
                     // @ts-ignore
-                    if (newValue.indexOf('%') !== -1) {
+                    if (isCssMathFunction(newValue)) {
+                        // Mason's setter evaluates calc()/min()/max()/clamp() itself.
+                        view.fontSize = newValue;
+                        // @ts-ignore
+                    }
+                    else if (newValue.indexOf('%') !== -1) {
                         view.fontSize = {
                             value: parseFloat(newValue) / 100,
                             unit: '%',
@@ -631,16 +623,10 @@ export const rowGapProperty = new CssProperty({
     name: 'rowGap',
     cssName: 'row-gap',
     defaultValue: 0,
-    // Length.parse has no '%' handling; use masonLengthPercentParse instead.
-    valueConverter(value) {
-        // @ts-ignore
-        const parsed = masonLengthPercentParse(value);
-        if (parsed === undefined || typeof parsed === 'string') {
-            return 0;
-        }
-        // @ts-ignore
-        return parsed;
-    },
+    // @ts-ignore
+    valueConverter: masonGapConverter,
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, rowGapProperty))
             return;
@@ -654,15 +640,10 @@ export const columnGapProperty = new CssProperty({
     name: 'columnGap',
     cssName: 'column-gap',
     defaultValue: 0,
-    valueConverter(value) {
-        // @ts-ignore
-        const parsed = masonLengthPercentParse(value);
-        if (parsed === undefined || typeof parsed === 'string') {
-            return 0;
-        }
-        // @ts-ignore
-        return parsed;
-    },
+    // @ts-ignore
+    valueConverter: masonGapConverter,
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, columnGapProperty))
             return;
@@ -672,11 +653,25 @@ export const columnGapProperty = new CssProperty({
         }
     },
 });
+/** A gap longhand as CSS text: CSS text as is, a number in px, a core length as `<n><unit>`. */
+function gapText(value) {
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    if (value && typeof value === 'object') {
+        const { value: amount, unit } = value;
+        return unit === '%' ? `${Math.round((amount ?? 0) * 1e6) / 1e4}%` : `${amount ?? 0}${unit === 'dip' ? 'px' : (unit ?? 'px')}`;
+    }
+    return String(value ?? '');
+}
 function gapGetter() {
     if (this.rowGap === this.columnGap) {
         return this.rowGap;
     }
-    return `${this.rowGap} ${this.columnGap}`;
+    const row = gapText(this.rowGap);
+    const column = gapText(this.columnGap);
+    // Two equal parses are different objects.
+    return row === column ? row : `${row} ${column}`;
 }
 const gapShorthand = { cssName: 'gap', longhands: [rowGapProperty, columnGapProperty], split: splitGap };
 const gridGapShorthand = { ...gapShorthand, cssName: 'grid-gap' };
@@ -730,6 +725,40 @@ function masonLengthPercentParse(value) {
         return undefined;
     }
 }
+/** Lengths in units core's parsers read as bare numbers. */
+const UNITS_CORE_MISREADS = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?(r?em|pt|vw|vh|vmin|vmax|dppx)$/i;
+/** CSS text for a length in a unit core can't parse (rem, em, vw), else undefined. */
+function masonLengthText(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const t = value.trim();
+    // Core can't evaluate math functions either; Mason's setter does.
+    return UNITS_CORE_MISREADS.test(t) || isCssMathFunction(t) ? t : undefined;
+}
+/** `left`/`top`/`right`/`bottom`: Mason's units, else core's parse (`%`, `auto`). */
+function masonInsetConverter(value) {
+    return (masonLengthText(value) ?? masonLengthPercentParse(value));
+}
+/** `row-gap`/`column-gap`: as the insets, but anything unparsable is 0. */
+function masonGapConverter(value) {
+    const text = masonLengthText(value);
+    if (text !== undefined) {
+        return text;
+    }
+    const parsed = masonLengthPercentParse(value);
+    if (parsed === undefined || typeof parsed === 'string') {
+        return 0;
+    }
+    return parsed;
+}
+/** Compares CSS text as text: core's `PercentLength.equals` calls any two strings equal. */
+function masonLengthEquals(a, b) {
+    if (typeof a === 'string' || typeof b === 'string') {
+        return a === b;
+    }
+    return CorePercentLength.equals(a, b);
+}
 /** As `masonSizeConverter`, for Mason's own max-* properties (core has none). */
 function masonMaxSizeConverter(value) {
     const resolved = masonSizeValue(value);
@@ -945,10 +974,10 @@ function convertToInsets(value) {
     if (typeof value === 'string' && value !== 'auto') {
         const thickness = parseShorthandPositioning(value);
         return [
-            [topProperty, masonLengthPercentParse(thickness.top)],
-            [rightProperty, masonLengthPercentParse(thickness.right)],
-            [bottomProperty, masonLengthPercentParse(thickness.bottom)],
-            [leftProperty, masonLengthPercentParse(thickness.left)],
+            [topProperty, masonInsetConverter(thickness.top)],
+            [rightProperty, masonInsetConverter(thickness.right)],
+            [bottomProperty, masonInsetConverter(thickness.bottom)],
+            [leftProperty, masonInsetConverter(thickness.left)],
         ];
     }
     else {
@@ -965,9 +994,9 @@ export const leftProperty = new CssProperty({
     cssName: 'left',
     defaultValue: 'auto',
     // @ts-ignore
-    equalityComparer: CorePercentLength.equals,
+    equalityComparer: masonLengthEquals,
     // @ts-ignore
-    valueConverter: masonLengthPercentParse,
+    valueConverter: masonInsetConverter,
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, leftProperty))
             return;
@@ -982,9 +1011,9 @@ export const rightProperty = new CssProperty({
     cssName: 'right',
     defaultValue: 'auto',
     // @ts-ignore
-    equalityComparer: CorePercentLength.equals,
+    equalityComparer: masonLengthEquals,
     // @ts-ignore
-    valueConverter: masonLengthPercentParse,
+    valueConverter: masonInsetConverter,
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, rightProperty))
             return;
@@ -999,9 +1028,9 @@ export const topProperty = new CssProperty({
     cssName: 'top',
     defaultValue: 'auto',
     // @ts-ignore
-    equalityComparer: CorePercentLength.equals,
+    equalityComparer: masonLengthEquals,
     // @ts-ignore
-    valueConverter: masonLengthPercentParse,
+    valueConverter: masonInsetConverter,
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, topProperty))
             return;
@@ -1016,9 +1045,9 @@ export const bottomProperty = new CssProperty({
     cssName: 'bottom',
     defaultValue: 'auto',
     // @ts-ignore
-    equalityComparer: CorePercentLength.equals,
+    equalityComparer: masonLengthEquals,
     // @ts-ignore
-    valueConverter: masonLengthPercentParse,
+    valueConverter: masonInsetConverter,
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, bottomProperty))
             return;
@@ -1198,6 +1227,14 @@ export const justifySelfProperty = new CssProperty({
         }
     },
 });
+export const placeShorthands = [
+    { cssName: 'place-items', longhands: [alignItemsProperty, justifyItemsProperty], split: splitPlace },
+    { cssName: 'place-content', longhands: [alignContentProperty, justifyContentProperty], split: splitPlace },
+    { cssName: 'place-self', longhands: [alignSelfProperty, justifySelfProperty], split: splitPlace },
+];
+for (const entry of placeShorthands) {
+    masonShorthandProperty(entry).register(Style);
+}
 export const JustifyContentIsValid = makeValidator('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'start', 'end');
 export const JustifyContentParse = makeParser(JustifyContentIsValid);
 justifyContentProperty.overrideHandlers({
@@ -1230,10 +1267,9 @@ export const flexBasisProperty = new CssProperty({
     cssName: 'flex-basis',
     defaultValue: 'auto',
     // @ts-ignore
-    equalityComparer: CorePercentLength.equals,
-    // masonLengthParse has no '%' support; see maxWidthProperty above.
+    equalityComparer: masonLengthEquals,
     // @ts-ignore
-    valueConverter: masonLengthPercentParse,
+    valueConverter: masonInsetConverter,
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, flexBasisProperty))
             return;
@@ -1638,11 +1674,6 @@ backgroundPositionYProperty.register(Style);
 backgroundOriginProperty.register(Style);
 backgroundAttachmentProperty.register(Style);
 backgroundBlendModeProperty.register(Style);
-borderProperty.register(Style);
-borderLeftProperty.register(Style);
-borderTopProperty.register(Style);
-borderRightProperty.register(Style);
-borderBottomProperty.register(Style);
 filterProperty.register(Style);
 registerAlongsideCore(borderColorProperty);
 // New CSS properties
@@ -1657,9 +1688,25 @@ export const objectPositionProperty = new CssProperty({
         }
     },
 });
-export const borderStyleProperty = new CssProperty({
-    name: 'borderStyle',
-    cssName: 'border-style',
+// Per-side style longhands; `border-style`, `border` and `border-<side>` expand into them.
+export const borderTopStyleProperty = new CssProperty({
+    name: 'borderTopStyle',
+    cssName: 'border-top-style',
+    defaultValue: 'none',
+});
+export const borderRightStyleProperty = new CssProperty({
+    name: 'borderRightStyle',
+    cssName: 'border-right-style',
+    defaultValue: 'none',
+});
+export const borderBottomStyleProperty = new CssProperty({
+    name: 'borderBottomStyle',
+    cssName: 'border-bottom-style',
+    defaultValue: 'none',
+});
+export const borderLeftStyleProperty = new CssProperty({
+    name: 'borderLeftStyle',
+    cssName: 'border-left-style',
     defaultValue: 'none',
 });
 export const borderImageProperty = new CssProperty({
@@ -1716,6 +1763,47 @@ export const hyphensProperty = new CssProperty({
         }
     },
 });
+export const textIndentProperty = new CssProperty({
+    name: 'textIndent',
+    cssName: 'text-indent',
+    defaultValue: '0px',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textIndent = newValue;
+        }
+    },
+});
+function setLineClamp(target, value) {
+    const view = getViewStyle(target.viewRef);
+    if (view) {
+        view.lineClamp = (value ?? 'none');
+    }
+}
+export const lineClampProperty = new CssProperty({
+    name: 'lineClamp',
+    cssName: 'line-clamp',
+    defaultValue: 'none',
+    valueChanged: (target, oldValue, newValue) => setLineClamp(target, newValue),
+});
+// Tailwind's `line-clamp-*` pairs this with `display: -webkit-box`, read as block.
+export const webkitLineClampProperty = new CssProperty({
+    name: 'webkitLineClamp',
+    cssName: '-webkit-line-clamp',
+    defaultValue: 'none',
+    valueChanged: (target, oldValue, newValue) => setLineClamp(target, newValue),
+});
+export const transformOriginProperty = new CssProperty({
+    name: 'transformOrigin',
+    cssName: 'transform-origin',
+    defaultValue: '50% 50%',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.transformOrigin = newValue;
+        }
+    },
+});
 export const backdropFilterProperty = new CssProperty({
     name: 'backdropFilter',
     cssName: 'backdrop-filter',
@@ -2019,12 +2107,19 @@ export const caretColorProperty = new CssProperty({
     },
 });
 objectPositionProperty.register(Style);
-borderStyleProperty.register(Style);
+borderTopStyleProperty.register(Style);
+borderRightStyleProperty.register(Style);
+borderBottomStyleProperty.register(Style);
+borderLeftStyleProperty.register(Style);
 borderImageProperty.register(Style);
 fontStretchProperty.register(Style);
 fontFeatureSettingsProperty.register(Style);
 wordSpacingProperty.register(Style);
 hyphensProperty.register(Style);
+textIndentProperty.register(Style);
+lineClampProperty.register(Style);
+webkitLineClampProperty.register(Style);
+transformOriginProperty.register(Style);
 backdropFilterProperty.register(Style);
 maskImageProperty.register(Style);
 maskProperty.register(Style);
@@ -2061,16 +2156,24 @@ writingModeProperty.register(Style);
 unicodeBidiProperty.register(Style);
 caretColorProperty.register(Style);
 registerAlongsideCore(backgroundImageProperty);
-export const listStyleTypeProperty = new CssProperty({
+// Inherited, as in CSS, so a list's value reaches its items.
+export const listStyleTypeProperty = new InheritedCssProperty({
     name: 'listStyleType',
     cssName: 'list-style-type',
 });
-export const listStylePositionProperty = new CssProperty({
+export const listStylePositionProperty = new InheritedCssProperty({
     name: 'listStylePosition',
     cssName: 'list-style-position',
 });
 listStyleTypeProperty.register(Style);
 listStylePositionProperty.register(Style);
+export const listStyleShorthand = { cssName: 'list-style', longhands: [listStyleTypeProperty, listStylePositionProperty], split: splitListStyle };
+export const listStyleProperty = masonShorthandProperty(listStyleShorthand, function () {
+    const style = this;
+    const parts = [style.listStyleType, style.listStylePosition].filter((part) => typeof part === 'string' && part);
+    return parts.join(' ');
+});
+listStyleProperty.register(Style);
 // core owns `white-space` too (its Label honours nowrap), so dispatch.
 registerAlongsideCore(whiteSpaceProperty);
 objectFitProperty.register(Style);
@@ -2142,5 +2245,117 @@ const coreShorthands = [
 for (const entry of coreShorthands) {
     masonShorthandProperty(entry);
 }
-export const masonShorthands = [...coreShorthands, overflowShorthand, maskShorthand, webkitMaskShorthand, maskBorderShorthand, webkitMaskBoxImageShorthand, gapShorthand, gridGapShorthand, flexFlowShorthand, flexShorthand];
+// `border`, `border-<side>` and `border-style` expand into the width, style and
+// color longhands, so the cascade resolves each longhand on its own.
+const SIDES = ['top', 'right', 'bottom', 'left'];
+/** A longhand's value as CSS text, for the shorthand getters. */
+function cssText(value) {
+    if (value == null || value === unsetValue) {
+        return '';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    if (isCssLength(value)) {
+        return value.css;
+    }
+    const { hex, unit, value: amount } = value;
+    if (typeof hex === 'string') {
+        return hex;
+    }
+    if (typeof amount === 'number') {
+        return unit === '%' ? `${amount * 100}%` : `${amount}px`;
+    }
+    return String(value);
+}
+const borderStyleLonghands = [borderTopStyleProperty, borderRightStyleProperty, borderBottomStyleProperty, borderLeftStyleProperty];
+const borderStyleShorthand = { cssName: 'border-style', longhands: borderStyleLonghands, split: splitBorderStyle };
+const borderShorthand = { cssName: 'border', longhands: [...borderWidthLonghands, ...borderStyleLonghands, ...borderColorLonghands], split: splitBorder };
+const borderSideShorthands = [0, 1, 2, 3].map((i) => ({
+    cssName: `border-${SIDES[i]}`,
+    longhands: [borderWidthLonghands[i], borderStyleLonghands[i], borderColorLonghands[i]],
+    split: splitBorderSide,
+}));
+function sideValues(style, longhands) {
+    return longhands.map(({ name }) => cssText(style[name]));
+}
+/** The shared value when every side agrees, else undefined. */
+function uniformSides(values) {
+    return values.every((value) => value === values[0]) ? values[0] : undefined;
+}
+export const borderStyleProperty = masonShorthandProperty(borderStyleShorthand, function () {
+    const styles = sideValues(this, borderStyleLonghands);
+    return uniformSides(styles) ?? styles.join(' ');
+});
+export const borderProperty = masonShorthandProperty(borderShorthand, function () {
+    const width = uniformSides(sideValues(this, borderWidthLonghands));
+    const style = uniformSides(sideValues(this, borderStyleLonghands));
+    const color = uniformSides(sideValues(this, borderColorLonghands));
+    return width !== undefined && style !== undefined && color !== undefined ? [width, style, color].filter(Boolean).join(' ') : '';
+});
+function borderSideGetter(i) {
+    return function () {
+        return sideValues(this, [borderWidthLonghands[i], borderStyleLonghands[i], borderColorLonghands[i]]).filter(Boolean).join(' ');
+    };
+}
+export const borderTopProperty = masonShorthandProperty(borderSideShorthands[0], borderSideGetter(0));
+export const borderRightProperty = masonShorthandProperty(borderSideShorthands[1], borderSideGetter(1));
+export const borderBottomProperty = masonShorthandProperty(borderSideShorthands[2], borderSideGetter(2));
+export const borderLeftProperty = masonShorthandProperty(borderSideShorthands[3], borderSideGetter(3));
+borderStyleProperty.register(Style);
+borderProperty.register(Style);
+borderTopProperty.register(Style);
+borderRightProperty.register(Style);
+borderBottomProperty.register(Style);
+borderLeftProperty.register(Style);
+const LOGICAL_SIDES = [
+    ['block-start', 0],
+    ['inline-end', 1],
+    ['block-end', 2],
+    ['inline-start', 3],
+];
+/** `<prefix>-inline<suffix>`, `<prefix>-block<suffix>` and the four `-start`/`-end` sides. */
+function logicalSides(prefix, suffix, sides, splitAxis) {
+    const inline = { cssName: `${prefix}-inline${suffix}`, longhands: [sides[3], sides[1]], split: splitAxis };
+    const block = { cssName: `${prefix}-block${suffix}`, longhands: [sides[0], sides[2]], split: splitAxis };
+    const perSide = LOGICAL_SIDES.map(([side, i]) => ({ cssName: `${prefix}-${side}${suffix}`, longhands: [sides[i]], split: passThrough }));
+    return [inline, block, ...perSide];
+}
+const borderSideLonghands = (i) => [borderWidthLonghands[i], borderStyleLonghands[i], borderColorLonghands[i]];
+const logicalShorthands = [
+    ...logicalSides('margin', '', marginLonghands, splitMarginStartEnd),
+    ...logicalSides('padding', '', paddingLonghands, splitPaddingStartEnd),
+    ...logicalSides('inset', '', [topProperty, rightProperty, bottomProperty, leftProperty], splitInsetStartEnd),
+    ...logicalSides('border', '-width', borderWidthLonghands, splitBorderWidthStartEnd),
+    ...logicalSides('border', '-style', borderStyleLonghands, splitBorderStyleStartEnd),
+    ...logicalSides('border', '-color', borderColorLonghands, splitBorderColorStartEnd),
+    // `border-inline: 1px solid` gives both sides the same border.
+    { cssName: 'border-inline', longhands: [...borderSideLonghands(3), ...borderSideLonghands(1)], split: (value) => [...splitBorderSide(value), ...splitBorderSide(value)] },
+    { cssName: 'border-block', longhands: [...borderSideLonghands(0), ...borderSideLonghands(2)], split: (value) => [...splitBorderSide(value), ...splitBorderSide(value)] },
+    ...LOGICAL_SIDES.map(([side, i]) => ({ cssName: `border-${side}`, longhands: borderSideLonghands(i), split: splitBorderSide })),
+    // Corners are <block>-<inline>: start-start is top-left.
+    { cssName: 'border-start-start-radius', longhands: [borderTopLeftRadiusProperty], split: passThrough },
+    { cssName: 'border-start-end-radius', longhands: [borderTopRightRadiusProperty], split: passThrough },
+    { cssName: 'border-end-end-radius', longhands: [borderBottomRightRadiusProperty], split: passThrough },
+    { cssName: 'border-end-start-radius', longhands: [borderBottomLeftRadiusProperty], split: passThrough },
+    { cssName: 'inline-size', longhands: [widthProperty], split: passThrough },
+    { cssName: 'block-size', longhands: [heightProperty], split: passThrough },
+    { cssName: 'min-inline-size', longhands: [minWidthProperty], split: passThrough },
+    { cssName: 'min-block-size', longhands: [minHeightProperty], split: passThrough },
+    { cssName: 'max-inline-size', longhands: [maxWidthProperty], split: passThrough },
+    { cssName: 'max-block-size', longhands: [maxHeightProperty], split: passThrough },
+    { cssName: 'overflow-inline', longhands: [overflowXProperty], split: passThrough },
+    { cssName: 'overflow-block', longhands: [overflowYProperty], split: passThrough },
+];
+for (const entry of logicalShorthands) {
+    masonShorthandProperty(entry, function () {
+        const parts = entry.longhands.map((longhand) => cssText(this[longhand.name]));
+        // The axis shorthands read back as one value when both sides agree.
+        return entry.longhands.length === 2 && parts[0] === parts[1] ? parts[0] : parts.join(' ');
+    }).register(Style);
+}
+export const masonShorthands = [...coreShorthands, borderStyleShorthand, borderShorthand, ...borderSideShorthands, ...logicalShorthands, overflowShorthand, maskShorthand, webkitMaskShorthand, maskBorderShorthand, webkitMaskBoxImageShorthand, gapShorthand, gridGapShorthand, flexFlowShorthand, flexShorthand];
 //# sourceMappingURL=properties.js.map