@suid/css/renderMediaQuery.js

CSS render in JS.

function renderMediaQuery(comparator, width, units = "px") {
    let selector;
    if (comparator === "up") {
        selector = `(min-width:${width}${units})`;
    }
    else if (comparator === "down") {
        selector = `(max-width:${width}${units})`;
    }
    else if (comparator === "between") {
        const [maxW, minW] = width;
        selector = `(max-width:${maxW}${units}) and (min-width:${minW}${units})`;
    }
    else {
        throw new Error(`Invalid comparator: ${comparator}`);
    }
    return `@media ${selector}`;
}
export default renderMediaQuery;