@octane-xplat/nativescript-mason-core 0.0.1 → 1.0.0-beta.0

package/css-math.js

@@ -0,0 +1,300 @@
+/**
+ * `calc()`, `min()`, `max()` and `clamp()` evaluated with Mason's units. Lengths resolve to CSS px
+ * as read; a pure `%` result stays a percentage, `%` mixed with a length is left unresolved.
+ */
+const MATH_FUNCTION = /^(calc|min|max|clamp)\(/i;
+const MATH_FUNCTION_ANYWHERE = /(?<![\w-])(calc|min|max|clamp)\(/i;
+const URL = /(?<![\w-])url\(/i;
+/** Whether `value` is a single math function, e.g. `calc(1rem + 2px)`. */
+export function isCssMathFunction(value) {
+    return MATH_FUNCTION.test(value.trim());
+}
+/** Whether `value` holds a math function anywhere. */
+export function hasCssMathFunction(value) {
+    return MATH_FUNCTION_ANYWHERE.test(value);
+}
+const NUMBER = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?/i;
+const UNIT = /^(%|[a-z]+)/i;
+const IDENT = /^[a-z-]+/i;
+function tokenize(source) {
+    const tokens = [];
+    let i = 0;
+    while (i < source.length) {
+        const ch = source[i];
+        if (/\s/.test(ch)) {
+            i++;
+            continue;
+        }
+        const rest = source.slice(i);
+        const previous = tokens[tokens.length - 1];
+        // A sign belongs to the number unless it follows an operand.
+        const signAllowed = !previous || previous.type === 'op' || previous.type === 'open' || previous.type === 'comma';
+        const number = (signAllowed || (ch !== '+' && ch !== '-')) && NUMBER.exec(rest);
+        if (number) {
+            i += number[0].length;
+            const unit = UNIT.exec(source.slice(i));
+            if (unit) {
+                i += unit[0].length;
+            }
+            tokens.push({ type: 'number', value: parseFloat(number[0]), unit: unit ? unit[0].toLowerCase() : '' });
+            continue;
+        }
+        if (ch === '+' || ch === '-' || ch === '*' || ch === '/') {
+            tokens.push({ type: 'op', op: ch });
+            i++;
+            continue;
+        }
+        if (ch === '(') {
+            tokens.push({ type: 'open', fn: '' });
+            i++;
+            continue;
+        }
+        if (ch === ')') {
+            tokens.push({ type: 'close' });
+            i++;
+            continue;
+        }
+        if (ch === ',') {
+            tokens.push({ type: 'comma' });
+            i++;
+            continue;
+        }
+        const ident = IDENT.exec(rest);
+        if (ident && source[i + ident[0].length] === '(') {
+            tokens.push({ type: 'open', fn: ident[0].toLowerCase() });
+            i += ident[0].length + 1;
+            continue;
+        }
+        return undefined;
+    }
+    return tokens;
+}
+class Parser {
+    constructor(tokens, resolveUnit) {
+        this.tokens = tokens;
+        this.resolveUnit = resolveUnit;
+        this.at = 0;
+    }
+    done() {
+        return this.at === this.tokens.length;
+    }
+    peek() {
+        return this.tokens[this.at];
+    }
+    next() {
+        return this.tokens[this.at++];
+    }
+    sum() {
+        let left = this.product();
+        while (left) {
+            const token = this.peek();
+            if (token?.type !== 'op' || (token.op !== '+' && token.op !== '-')) {
+                break;
+            }
+            this.next();
+            const right = this.product();
+            if (!right || right.number !== left.number) {
+                return undefined;
+            }
+            const sign = token.op === '+' ? 1 : -1;
+            left = { number: left.number, px: left.px + sign * right.px, pct: left.pct + sign * right.pct };
+        }
+        return left;
+    }
+    product() {
+        let left = this.operand();
+        while (left) {
+            const token = this.peek();
+            if (token?.type !== 'op' || (token.op !== '*' && token.op !== '/')) {
+                break;
+            }
+            this.next();
+            const right = this.operand();
+            if (!right) {
+                return undefined;
+            }
+            if (token.op === '*') {
+                // One side has to be a plain number.
+                if (left.number) {
+                    left = { number: right.number, px: right.px * left.px, pct: right.pct * left.px };
+                }
+                else if (right.number) {
+                    left = { number: false, px: left.px * right.px, pct: left.pct * right.px };
+                }
+                else {
+                    return undefined;
+                }
+            }
+            else {
+                // Only by a number; dividing by zero gives an infinity the caller rejects.
+                if (!right.number) {
+                    return undefined;
+                }
+                left = { number: left.number, px: left.px / right.px, pct: left.pct / right.px };
+            }
+        }
+        return left;
+    }
+    operand() {
+        const token = this.next();
+        if (!token) {
+            return undefined;
+        }
+        if (token.type === 'number') {
+            if (token.unit === '') {
+                return { number: true, px: token.value, pct: 0 };
+            }
+            const resolved = this.resolveUnit(token.value, token.unit);
+            if (resolved === undefined) {
+                return token.unit === '%' ? { number: false, px: 0, pct: token.value } : undefined;
+            }
+            return typeof resolved === 'number' ? { number: false, px: resolved, pct: 0 } : { number: false, px: 0, pct: resolved.percent };
+        }
+        if (token.type === 'open') {
+            return this.call(token.fn);
+        }
+        return undefined;
+    }
+    call(fn) {
+        const args = [];
+        for (;;) {
+            const arg = this.sum();
+            if (!arg) {
+                return undefined;
+            }
+            args.push(arg);
+            const token = this.next();
+            if (token?.type === 'close') {
+                break;
+            }
+            if (token?.type !== 'comma') {
+                return undefined;
+            }
+        }
+        switch (fn) {
+            case '':
+            case 'calc':
+                return args.length === 1 ? args[0] : undefined;
+            case 'min':
+                return compare(args, Math.min);
+            case 'max':
+                return compare(args, Math.max);
+            case 'clamp': {
+                if (args.length !== 3) {
+                    return undefined;
+                }
+                const [min, preferred, max] = args;
+                const upper = compare([preferred, max], Math.min);
+                return upper && compare([min, upper], Math.max);
+            }
+            default:
+                return undefined;
+        }
+    }
+}
+/**
+ * min()/max() over values of one kind. A length and a percentage can't be
+ * compared before layout, so mixing them is unresolved.
+ */
+function compare(args, pick) {
+    const [first] = args;
+    if (args.some((arg) => arg.number !== first.number)) {
+        return undefined;
+    }
+    if (first.number) {
+        return { number: true, px: pick(...args.map((arg) => arg.px)), pct: 0 };
+    }
+    if (args.every((arg) => arg.pct === 0)) {
+        return { number: false, px: pick(...args.map((arg) => arg.px)), pct: 0 };
+    }
+    if (args.every((arg) => arg.px === 0)) {
+        return { number: false, px: 0, pct: pick(...args.map((arg) => arg.pct)) };
+    }
+    return undefined;
+}
+/**
+ * Evaluate one math function, e.g. `clamp(1rem, 2.5vw, 2rem)`, or undefined
+ * when it isn't one, doesn't parse, or mixes `%` with a length.
+ */
+export function evaluateCssMath(value, resolveUnit) {
+    const source = value.trim();
+    if (!MATH_FUNCTION.test(source)) {
+        return undefined;
+    }
+    const tokens = tokenize(source);
+    if (!tokens) {
+        return undefined;
+    }
+    const parser = new Parser(tokens, resolveUnit);
+    const result = parser.sum();
+    if (!result || !parser.done()) {
+        return undefined;
+    }
+    if (result.number) {
+        return Number.isFinite(result.px) ? { kind: 'number', value: result.px } : undefined;
+    }
+    if (result.pct !== 0 && result.px !== 0) {
+        return undefined;
+    }
+    if (result.pct !== 0) {
+        return Number.isFinite(result.pct) ? { kind: 'percent', percent: result.pct } : undefined;
+    }
+    return Number.isFinite(result.px) ? { kind: 'length', px: result.px } : undefined;
+}
+function round(n) {
+    return Math.round(n * 10000) / 10000;
+}
+/** A result as CSS text: `12px`, `50%` or `1.5`. */
+export function cssMathText(result) {
+    switch (result.kind) {
+        case 'length':
+            return `${round(result.px)}px`;
+        case 'percent':
+            return `${round(result.percent)}%`;
+        case 'number':
+            return `${round(result.value)}`;
+    }
+}
+/**
+ * Replace every math function in `value` that resolves with its result, leaving the rest as is:
+ * `0 0 calc(0.5rem + 1px) red` becomes `0 0 9px red`.
+ */
+export function substituteCssMath(value, resolveUnit) {
+    if (!hasCssMathFunction(value)) {
+        return value;
+    }
+    const pattern = new RegExp(`${URL.source}|${MATH_FUNCTION_ANYWHERE.source}`, 'gi');
+    let out = '';
+    let last = 0;
+    let match;
+    while ((match = pattern.exec(value))) {
+        const open = match.index + match[0].length - 1;
+        const close = closingParen(value, open);
+        if (close === -1) {
+            break;
+        }
+        pattern.lastIndex = close + 1;
+        // A url() is opaque: a data: URL may contain anything.
+        if (/^url\(/i.test(match[0])) {
+            continue;
+        }
+        const result = evaluateCssMath(value.slice(match.index, close + 1), resolveUnit);
+        if (result) {
+            out += value.slice(last, match.index) + cssMathText(result);
+            last = close + 1;
+        }
+    }
+    return out + value.slice(last);
+}
+function closingParen(value, open) {
+    let depth = 0;
+    for (let i = open; i < value.length; i++) {
+        if (value[i] === '(') {
+            depth++;
+        }
+        else if (value[i] === ')' && --depth === 0) {
+            return i;
+        }
+    }
+    return -1;
+}

package/css-shorthands.d.ts

@@ -0,0 +1,65 @@
+import { unsetValue } from '@nativescript/core';
+export type LonghandValue = string | typeof unsetValue;
+export declare function tokenizeCss(value: string): string[];
+export interface CssLength {
+    value: number;
+    unit: 'dip' | 'px' | '%';
+    css: string;
+}
+export declare function cssLength(css: string, parse: (value: string) => unknown): CssLength;
+export declare function isCssLength(value: unknown): value is CssLength;
+/** "background-color" -> "backgroundColor". */
+export declare function toCamelCase(prop: string): string;
+export declare const splitMargin: (value: string) => string[];
+export declare const splitPadding: (value: string) => string[];
+export declare const BORDER_WIDTH_KEYWORDS: ReadonlyMap<string, string>;
+export declare const splitBorderWidth: (value: string) => string[];
+export declare const splitBorderColor: (value: string) => string[];
+export declare const splitMarginStartEnd: (value: string) => string[];
+export declare const splitPaddingStartEnd: (value: string) => string[];
+export declare const splitInsetStartEnd: (value: string) => string[];
+export declare const splitBorderWidthStartEnd: (value: string) => string[];
+export declare const splitBorderColorStartEnd: (value: string) => string[];
+/** A logical property that maps onto one physical longhand: the value as is. */
+export declare function passThrough(value: string): string[];
+export declare const BORDER_STYLES: ReadonlySet<string>;
+export declare const splitBorderStyle: (value: string) => string[];
+export declare const splitBorderStyleStartEnd: (value: string) => string[];
+/** `border-<side>` as its width, style and color; omitted parts take BORDER_OMITTED. */
+export declare function splitBorderSide(value: string): string[];
+/**
+ * `border` as four widths, four styles and four colors (top, right, bottom, left).
+ * Accepts up to four widths, as `border-width` does.
+ */
+export declare function splitBorder(value: string): string[];
+export declare function splitBorderRadius(value: string): string[];
+export type CornerRadius = [horizontal: string, vertical: string];
+export type CornerIndex = 0 | 1 | 2 | 3;
+export declare function parseCornerRadius(value: string): CornerRadius;
+export declare function borderRadiusCorners(value: string): CornerRadius[];
+export declare function composeBorderRadius(corners: CornerRadius[]): string;
+export declare function splitBackground(value: string): LonghandValue[];
+/** `mask` into image, position, size, repeat, origin, clip, composite and mode, per layer. */
+export declare function splitMask(value: string): LonghandValue[];
+/** A -webkit-mask-composite list as `mask-composite`; operators with no equivalent become `add`. */
+export declare function webkitMaskComposite(value: string): string;
+/** A -webkit-mask-origin or -clip list as the standard property. */
+export declare function webkitMaskBox(value: string): string;
+/** `-webkit-mask`: `mask` with WebKit's composite operators and box keywords. */
+export declare function splitWebkitMask(value: string): LonghandValue[];
+/**
+ * `mask-border` (and `-webkit-mask-box-image`) into source, slice, width, outset, repeat and mode:
+ * `<source> || <slice> [ / <width>? [ / <outset> ]? ]? || <repeat> || <mode>`.
+ */
+export declare function splitMaskBorder(value: string): LonghandValue[];
+export declare function splitOverflow(value: string): string[];
+export declare function splitFlexFlow(value: string): LonghandValue[];
+export declare function splitFlex(value: string): string[];
+export declare function splitGap(value: string): string[];
+/** `place-items` / `place-content` / `place-self`: the align value, then the justify value, which defaults to it. */
+export declare function splitPlace(value: string): string[];
+/**
+ * Splits `list-style` into type and position, in any order. An image is accepted
+ * and dropped; omitted parts reset to `disc` and `outside`.
+ */
+export declare function splitListStyle(value: string): string[];