normalizeScreens.js 5.35 KB
/**
 * @typedef {object} ScreenValue
 * @property {number|undefined} min
 * @property {number|undefined} max
 * @property {string|undefined} raw
 */ /**
 * @typedef {object} Screen
 * @property {string} name
 * @property {boolean} not
 * @property {ScreenValue[]} values
 */ /**
 * A function that normalizes the various forms that the screens object can be
 * provided in.
 *
 * Input(s):
 *   - ['100px', '200px'] // Raw strings
 *   - { sm: '100px', md: '200px' } // Object with string values
 *   - { sm: { min: '100px' }, md: { max: '100px' } } // Object with object values
 *   - { sm: [{ min: '100px' }, { max: '200px' }] } // Object with object array (multiple values)
 *
 * Output(s):
 *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
 *
 * @returns {Screen[]}
 */ "use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    normalizeScreens: ()=>normalizeScreens,
    isScreenSortable: ()=>isScreenSortable,
    compareScreens: ()=>compareScreens,
    toScreen: ()=>toScreen
});
function normalizeScreens(screens, root = true) {
    if (Array.isArray(screens)) {
        return screens.map((screen)=>{
            if (root && Array.isArray(screen)) {
                throw new Error("The tuple syntax is not supported for `screens`.");
            }
            if (typeof screen === "string") {
                return {
                    name: screen.toString(),
                    not: false,
                    values: [
                        {
                            min: screen,
                            max: undefined
                        }
                    ]
                };
            }
            let [name, options] = screen;
            name = name.toString();
            if (typeof options === "string") {
                return {
                    name,
                    not: false,
                    values: [
                        {
                            min: options,
                            max: undefined
                        }
                    ]
                };
            }
            if (Array.isArray(options)) {
                return {
                    name,
                    not: false,
                    values: options.map((option)=>resolveValue(option))
                };
            }
            return {
                name,
                not: false,
                values: [
                    resolveValue(options)
                ]
            };
        });
    }
    return normalizeScreens(Object.entries(screens !== null && screens !== void 0 ? screens : {}), false);
}
function isScreenSortable(screen) {
    if (screen.values.length !== 1) {
        return {
            result: false,
            reason: "multiple-values"
        };
    } else if (screen.values[0].raw !== undefined) {
        return {
            result: false,
            reason: "raw-values"
        };
    } else if (screen.values[0].min !== undefined && screen.values[0].max !== undefined) {
        return {
            result: false,
            reason: "min-and-max"
        };
    }
    return {
        result: true,
        reason: null
    };
}
function compareScreens(type, a, z) {
    let aScreen = toScreen(a, type);
    let zScreen = toScreen(z, type);
    let aSorting = isScreenSortable(aScreen);
    let bSorting = isScreenSortable(zScreen);
    // These cases should never happen and indicate a bug in Tailwind CSS itself
    if (aSorting.reason === "multiple-values" || bSorting.reason === "multiple-values") {
        throw new Error("Attempted to sort a screen with multiple values. This should never happen. Please open a bug report.");
    } else if (aSorting.reason === "raw-values" || bSorting.reason === "raw-values") {
        throw new Error("Attempted to sort a screen with raw values. This should never happen. Please open a bug report.");
    } else if (aSorting.reason === "min-and-max" || bSorting.reason === "min-and-max") {
        throw new Error("Attempted to sort a screen with both min and max values. This should never happen. Please open a bug report.");
    }
    // Let the sorting begin
    let { min: aMin , max: aMax  } = aScreen.values[0];
    let { min: zMin , max: zMax  } = zScreen.values[0];
    // Negating screens flip their behavior. Basically `not min-width` is `max-width`
    if (a.not) [aMin, aMax] = [
        aMax,
        aMin
    ];
    if (z.not) [zMin, zMax] = [
        zMax,
        zMin
    ];
    aMin = aMin === undefined ? aMin : parseFloat(aMin);
    aMax = aMax === undefined ? aMax : parseFloat(aMax);
    zMin = zMin === undefined ? zMin : parseFloat(zMin);
    zMax = zMax === undefined ? zMax : parseFloat(zMax);
    let [aValue, zValue] = type === "min" ? [
        aMin,
        zMin
    ] : [
        zMax,
        aMax
    ];
    return aValue - zValue;
}
function toScreen(value, type) {
    if (typeof value === "object") {
        return value;
    }
    return {
        name: "arbitrary-screen",
        values: [
            {
                [type]: value
            }
        ]
    };
}
function resolveValue({ "min-width": _minWidth , min =_minWidth , max , raw  } = {}) {
    return {
        min,
        max,
        raw
    };
}