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

package/style.d.ts

@@ -124,6 +124,7 @@ declare class StateKeys {
 }
 export declare function parseLinearGradientCss(value: string): {
     angle: number;
+    corner?: [number, number];
     offsets: number[];
     colors: number[];
     interpolation: string;
@@ -275,10 +276,8 @@ export declare class Style {
      * with a percentage of the parent's, or the inherited one when unset.
      */
     emBasis(): number;
-    /**
-     * The nearest Mason ancestor's font size (the element's own for a pseudo-class
-     * style). Reads only existing styles, since building one creates the native view.
-     */
+    emBasisFor(value: unknown): number | undefined;
+    /** The nearest existing Mason ancestor style's font size (its own for a pseudo-class style). */
     private parentEmBasis;
     private prepareMut;
     get boxSizing(): 'border-box' | 'content-box';

package/style.js

@@ -331,6 +331,7 @@ function finite(n) {
     reportCssDiagnostic({ kind: 'unparsable-value', name: 'length', value: String(n), detail: 'not a finite number, treated as 0' });
     return 0;
 }
+const EM_UNIT = /em/i;
 /** 1pt = 1/72in and 1 CSS px = 1/96in, so a point is 96/72 CSS px. */
 const PX_PER_PT = 96 / 72;
 /** `n<unit>` in CSS px inside a math function, or undefined for an unknown unit. */
@@ -825,6 +826,20 @@ function parseGradientAngle(token) {
         return 315;
     return 180; // CSS default is 'to bottom'
 }
+function parseGradientCorner(token) {
+    const words = token.trim().toLowerCase().split(/\s+/);
+    if (words.length !== 3 || words[0] !== 'to')
+        return undefined;
+    let x = 0;
+    let y = 0;
+    for (const word of words.slice(1)) {
+        if (word === 'left' || word === 'right')
+            x = word === 'left' ? -1 : 1;
+        else if (word === 'top' || word === 'bottom')
+            y = word === 'top' ? -1 : 1;
+    }
+    return x && y ? [x, y] : undefined;
+}
 const LINEAR_GRADIENT = /linear-gradient/i;
 const ANY_GRADIENT = /gradient/i;
 const LINEAR_GRADIENT_ARGS = /linear-gradient\s*\(([\s\S]*)\)\s*$/i;
@@ -840,6 +855,7 @@ export function parseLinearGradientCss(value) {
     if (parts.length < 2)
         return null;
     let angle = 180;
+    let corner;
     let start = 0;
     let head = parts[0];
     let interpolation = '';
@@ -851,6 +867,7 @@ export function parseLinearGradientCss(value) {
     }
     if (/^(to\s|-?[\d.]+(deg|rad|turn))/i.test(head)) {
         angle = parseGradientAngle(head);
+        corner = parseGradientCorner(head);
         start = 1;
     }
     const colors = [];
@@ -868,7 +885,7 @@ export function parseLinearGradientCss(value) {
     }
     if (colors.length < 1)
         return null;
-    return { angle, offsets: resolveStopPositions(positions), colors, interpolation };
+    return { angle, ...(corner && { corner }), offsets: resolveStopPositions(positions), colors, interpolation };
 }
 const RADIAL_GRADIENT_ARGS = /radial-gradient\s*\(([\s\S]*)\)\s*$/i;
 function positionFraction(token, axis) {
@@ -1633,7 +1650,7 @@ export class Style {
     coerceCssStringValue(value) {
         if (typeof value === 'string') {
             // Nor do they evaluate calc()/min()/max()/clamp(); see css-math.ts.
-            const resolved = hasCssMathFunction(value) ? resolveCssMathIn(value, this.emBasis()) : value;
+            const resolved = hasCssMathFunction(value) ? resolveCssMathIn(value, this.emBasisFor(value)) : value;
             return resolveCssColors(resolved, cssColorToRgba);
         }
         if (value == null) {
@@ -1687,7 +1704,7 @@ export class Style {
             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);
+                    NativeScript.Mason.Css.ApplyLinearGradient(this.nativeView, g.angle, g.corner?.[0] ?? 0, g.corner?.[1] ?? 0, stopsOf(g), g.interpolation);
                 return;
             }
             if (url) {
@@ -1723,7 +1740,7 @@ export class Style {
     }
     windowsMaskContext() {
         return {
-            length: (token) => cssLengthToDip(token, this.emBasis()),
+            length: (token) => cssLengthToDip(token, this.emBasisFor(token)),
             color: (color) => normalizeColorValue(color),
             linear: parseLinearGradientCss,
             radial: parseRadialGradientCss,
@@ -1801,7 +1818,7 @@ export class Style {
             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));
+            const spec = encodeCssFilter(parseCssFilter(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, this.emBasisFor(token))), (color) => (color && color.toLowerCase() !== 'currentcolor' ? (normalizeColorValue(color) ?? current) : current));
             if (name === 'filter')
                 NativeScript.Mason.Css.SetFilter(view, spec);
             else
@@ -1818,7 +1835,7 @@ export class Style {
             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()));
+                const shadows = parseBoxShadows(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, this.emBasisFor(token)));
                 view.SetTextShadow(encodeBoxShadows(shadows, (color) => (color && color.toLowerCase() !== 'currentcolor' ? (normalizeColorValue(color) ?? current) : current)));
             }
             return;
@@ -1842,7 +1859,7 @@ export class Style {
             return;
         }
         if (name === 'border-radius') {
-            const r = parseBorderRadiusShorthand(value, this.emBasis());
+            const r = parseBorderRadiusShorthand(value, this.emBasisFor(value));
             this.prepareMut();
             for (const [corner, keys] of RADIUS_KEYS) {
                 const { type, value: v } = r[corner];
@@ -1855,7 +1872,7 @@ export class Style {
             return;
         }
         if (name === 'border' || name === 'border-top' || name === 'border-right' || name === 'border-bottom' || name === 'border-left') {
-            const p = parseBorderShorthand(value, this.emBasis());
+            const p = parseBorderShorthand(value, this.emBasisFor(value));
             let style = p.style;
             if (style == null && (p.width != null || p.color != null))
                 style = 4; // solid
@@ -1902,7 +1919,7 @@ export class Style {
         let thickness = null;
         switch (name) {
             case 'text-decoration': {
-                const d = parseTextDecoration(value, (token) => cssLengthToDip(token, this.emBasis()));
+                const d = parseTextDecoration(value, (token) => cssLengthToDip(token, this.emBasisFor(token)));
                 if (!d)
                     return;
                 ({ line, style, color, thickness } = d);
@@ -1918,7 +1935,7 @@ export class Style {
                 color = parseTextDecorationColor(value);
                 break;
             case 'text-decoration-thickness':
-                thickness = cssLengthToDip(value, this.emBasis()) ?? null;
+                thickness = cssLengthToDip(value, this.emBasisFor(value)) ?? null;
                 break;
         }
         if (line == null && style == null && color == null && thickness == null)
@@ -2104,10 +2121,10 @@ export class Style {
         // `0.75em` is stored as 75 (%), not 75px.
         return getInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE) === 1 ? (own / 100) * this.parentEmBasis() : own;
     }
-    /**
-     * The nearest Mason ancestor's font size (the element's own for a pseudo-class
-     * style). Reads only existing styles, since building one creates the native view.
-     */
+    emBasisFor(value) {
+        return typeof value === 'string' && EM_UNIT.test(value) ? this.emBasis() : undefined;
+    }
+    /** The nearest existing Mason ancestor style's font size (its own for a pseudo-class style). */
     parentEmBasis() {
         const view = this.view_;
         let ancestor = (this._pseudo ? view : view?.parent);
@@ -2704,7 +2721,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, dim.value);
                 break;
@@ -2749,7 +2766,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, dim.value);
                 break;
@@ -2794,7 +2811,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = dimensionFromString(value, this.emBasis());
+                const dim = dimensionFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.WIDTH_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, dim.value);
                 break;
@@ -2839,7 +2856,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = dimensionFromString(value, this.emBasis());
+                const dim = dimensionFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, dim.value);
                 break;
@@ -2884,7 +2901,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, dim.value);
                 break;
@@ -2929,7 +2946,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, dim.value);
                 break;
@@ -2974,7 +2991,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.BORDER_LEFT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE, dim.value);
                 break;
@@ -3015,7 +3032,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE, dim.value);
                 break;
@@ -3056,7 +3073,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.BORDER_TOP_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE, dim.value);
                 break;
@@ -3097,7 +3114,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE, dim.value);
                 break;
@@ -3148,7 +3165,7 @@ export class Style {
         var insetValue;
         switch (typeof value) {
             case 'string': {
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 type = dim.type;
                 insetValue = dim.value;
                 break;
@@ -3192,7 +3209,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.INSET_LEFT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, dim.value);
                 break;
@@ -3233,7 +3250,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.INSET_RIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, dim.value);
                 break;
@@ -3274,7 +3291,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.INSET_TOP_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, dim.value);
                 break;
@@ -3315,7 +3332,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, dim.value);
                 break;
@@ -3366,7 +3383,7 @@ export class Style {
         var marginValue;
         switch (typeof value) {
             case 'string': {
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 type = dim.type;
                 marginValue = dim.value;
                 break;
@@ -3410,7 +3427,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, dim.value);
                 break;
@@ -3451,7 +3468,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, dim.value);
                 break;
@@ -3492,7 +3509,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MARGIN_TOP_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, dim.value);
                 break;
@@ -3533,7 +3550,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageAutoFromString(value, this.emBasis());
+                const dim = lengthPercentageAutoFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, dim.value);
                 break;
@@ -3595,7 +3612,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.PADDING_LEFT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, dim.value);
                 break;
@@ -3636,7 +3653,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, dim.value);
                 break;
@@ -3677,7 +3694,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.PADDING_TOP_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, dim.value);
                 break;
@@ -3718,7 +3735,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, dim.value);
                 break;
@@ -3791,7 +3808,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.GAP_ROW_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.GAP_ROW_VALUE, dim.value);
                 break;
@@ -3832,7 +3849,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = lengthPercentageFromString(value, this.emBasis());
+                const dim = lengthPercentageFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.GAP_COLUMN_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.GAP_COLUMN_VALUE, dim.value);
                 break;
@@ -3889,7 +3906,7 @@ export class Style {
         switch (typeof value) {
             case 'string': {
                 this.prepareMut();
-                const dim = dimensionFromString(value, this.emBasis());
+                const dim = dimensionFromString(value, this.emBasisFor(value));
                 setInt8(this.style_view, StyleKeys.FLEX_BASIS_TYPE, dim.type);
                 setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, dim.value);
                 break;
@@ -5284,7 +5301,7 @@ export class Style {
     /** Read by TextNode when stroking the decoration line. */
     set textDecorationThickness(value) {
         this.prepareMut();
-        const devicePx = typeof value === 'number' ? layout.toDevicePixels(finite(value)) : tokenToDevicePx(value, parseFloat(value) || 0, this.emBasis());
+        const devicePx = typeof value === 'number' ? layout.toDevicePixels(finite(value)) : tokenToDevicePx(value, parseFloat(value) || 0, this.emBasisFor(value));
         setFloat32(this.style_view, StyleKeys.DECORATION_THICKNESS, devicePx);
         setInt8(this.style_view, StyleKeys.DECORATION_THICKNESS_STATE, 1);
         this.commitState(StateKeys.DECORATION_THICKNESS);
@@ -6150,7 +6167,7 @@ export class Style {
                 indent = n;
             }
             else {
-                indent = tokenToDevicePx(token, n, this.emBasis());
+                indent = tokenToDevicePx(token, n, this.emBasisFor(token));
             }
         }
         this.prepareMut();
@@ -6206,7 +6223,7 @@ export class Style {
     set transformOrigin(value) {
         if (!this.style_view)
             return;
-        const parsed = parseTransformOrigin(String(value ?? ''), this.emBasis());
+        const parsed = parseTransformOrigin(String(value ?? ''), this.emBasisFor(value));
         if (!parsed)
             return;
         this.prepareMut();