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

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

import { forEach, __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;
    forEach(breakpoints, (value, key)=>{
        if (__DEV__ && !isValidBreakpointValue(value)) {
            console.error(`[Nex UI] system: Expect the breakpoints value to be a string, but what is currently received is %o.`, value);
            return;
        }
        breakpointMap.set(key, value);
        breakpointMap.set(index, value);
        selectorMap.set(key, toMediaKey(value));
        selectorMap.set(index, toMediaKey(value));
        index += 1;
    });
    return {
        getMediaSelectors: ()=>Object.fromEntries(selectorMap.entries())
    };
};

export { createBreakpoints, toMediaKey };