@nex-ui/system/dist/esm/breakpoints.mjs

A lightweight and performant styling library based on Emotion, focusing on component architecture and developer experience.

import { __DEV__ } from '@nex-ui/utils';
import { isValidBreakpointValue } from './utils.mjs';

const toMediaKey = (value)=>`@media (min-width:${value})`;
const createBreakpoints = (breakpoints)=>{
    const breakpointMap = new Map();
    const selectorMap = new Map();
    let index = 0;
    for(const breakpointKey in breakpoints){
        // istanbul ignore if
        if (!Object.hasOwn(breakpoints, breakpointKey)) continue;
        const breakpointValue = breakpoints[breakpointKey];
        if (!isValidBreakpointValue(breakpointValue)) {
            if (__DEV__) {
                console.error(`[Nex UI] system: Expect the breakpoint value to be a string, but what is currently received is %o.`, breakpointValue);
            }
            continue;
        }
        breakpointMap.set(breakpointKey, breakpointValue);
        breakpointMap.set(index, breakpointValue);
        selectorMap.set(breakpointKey, toMediaKey(breakpointValue));
        selectorMap.set(index, toMediaKey(breakpointValue));
        index += 1;
    }
    return {
        getMediaSelectors: ()=>Object.fromEntries(selectorMap.entries())
    };
};

export { createBreakpoints, toMediaKey };