@nex-ui/system/dist/cjs/css.cjs

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

'use strict';

var utils$1 = require('@nex-ui/utils');
var utils = require('./utils.cjs');

const isCustomSelector = (key)=>{
    return key.startsWith('_');
};
const createCssFn = ({ normalize, getCustomizedSelector })=>{
    const css = (interpolation)=>{
        if (!interpolation) {
            return '';
        }
        // TODO: unused
        const componentSelector = interpolation;
        if (componentSelector.__emotion_styles !== undefined) {
            return componentSelector;
        }
        if (utils$1.isArray(interpolation)) {
            const arrayInterpolation = interpolation;
            return utils$1.map(arrayInterpolation, (v)=>css(v));
        }
        if (utils$1.isPlainObject(interpolation)) {
            const keyframes = interpolation;
            if (keyframes.anim === 1) {
                return keyframes;
            }
            // TODO: unused
            const serializedStyles = interpolation;
            if (serializedStyles.styles !== undefined) {
                return serializedStyles;
            }
            const cssOjbect = interpolation;
            const handlePath = (path)=>{
                return path.filter((v)=>v !== '_DEFAULT').sort((a)=>{
                    const charCode = a.charCodeAt(0);
                    // A-Z
                    if (charCode > 64 && charCode < 91) {
                        return -1;
                    }
                    // a-z
                    return 96 - a.charCodeAt(0);
                }).map((p)=>{
                    // 0 - 9
                    if (p.charCodeAt(0) > 47 && p.charCodeAt(0) < 58) {
                        const part = path.slice(0, path.length - 1);
                        const prevValue = utils$1.get(cssOjbect, part);
                        const index = Number(p);
                        if (!Number.isNaN(index) && utils$1.isArray(prevValue)) {
                            // 处理数组 breakpoints
                            return getCustomizedSelector(`_${index}`) ?? '';
                        }
                    }
                    if (isCustomSelector(p)) {
                        // 处理自定义的 selectors 和 对象 breakpoints
                        return getCustomizedSelector(p) ?? p;
                    }
                    return p;
                });
            };
            const getColorPalette = (path)=>{
                if (path.length === 0) {
                    return cssOjbect['colorPalette'];
                }
                return utils$1.get(cssOjbect, [
                    ...path,
                    'colorPalette'
                ], getColorPalette(path.slice(0, path.length - 1)));
            };
            const result = {};
            utils$1.walkObject(cssOjbect, (propValue, path)=>{
                const prop = path[path.length - 1];
                // FIXME: 暂时解决自定义选择器时 CSSObject 数组. 如果数组中都为基础类型，将会作为 breakpoints 处理
                if (utils$1.isArray(propValue) && utils$1.some(propValue, utils$1.isPlainObject)) {
                    mergeByPath(result, path, css(propValue), (v)=>{
                        if (v === prop) return [];
                    });
                    return;
                }
                const prefix = path.slice(0, path.length - 1);
                if (prop === 'colorPalette') {
                    return;
                }
                const colorPalette = getColorPalette(prefix);
                const [propKey, ...selectors] = handlePath(path);
                const normalized = normalize({
                    propKey,
                    propValue,
                    colorPalette
                });
                mergeByPath(result, selectors, normalized);
            }, {
                predicate: (v)=>utils$1.isArray(v) && utils$1.some(v, utils$1.isPlainObject)
            });
            return result;
        }
        return interpolation;
    };
    return utils.memoizeFn(css);
};
function mergeByPath(target, path, value, customizer) {
    let acc = target;
    utils$1.forEach(path, (k)=>{
        if (!k) return;
        if (!acc[k]) acc[k] = customizer ? customizer(k) : {};
        acc = acc[k];
    });
    utils$1.merge(acc, value);
}

exports.createCssFn = createCssFn;