@nex-ui/system/dist/esm/layers/createLayers.mjs

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

import { isPlainObject } from '@nex-ui/utils';

const layerOrder = [
    'global',
    'css'
];
const createLayers = ({ prefix, cssCascadeLayersDisabled })=>{
    return {
        atRules: `@layer ${layerOrder.map((layer)=>`${prefix}.${layer}`).join(', ')};`,
        wrapWithLayer: (layer, styles)=>{
            if (cssCascadeLayersDisabled === true || !styles || typeof styles === 'number' || typeof styles === 'string' || Array.isArray(styles) && styles.length === 0 || isPlainObject(styles) && Object.keys(styles).length === 0) return styles;
            return {
                [`@layer ${prefix}.${layer}`]: styles
            };
        }
    };
};

export { createLayers };