zss-engine/dist/esm/utils/override-longhand.js

A CSS-in-JS transpiler engine for building zero-runtime stylesheets at build time.

import { camelToKebabCase } from './helper.js';
import { LONG_TO_SHORT, SHORTHAND_PROPERTIES } from './shorthand.js';
const isNestedGroup = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
export const overrideLonghand = (style) => {
    const props = Object.keys(style);
    const queryStyle = style;
    const propsToRemove = new Set();
    const plainProps = [];
    for (let i = 0; i < props.length; i++) {
        if (!isNestedGroup(queryStyle[props[i]])) {
            plainProps.push({ key: props[i], index: i });
        }
    }
    const shorthandsInStyle = {};
    for (const { key, index } of plainProps) {
        const kebab = camelToKebabCase(key);
        if (SHORTHAND_PROPERTIES[kebab]) {
            shorthandsInStyle[kebab] = index;
        }
    }
    for (const { key, index } of plainProps) {
        const kebab = camelToKebabCase(key);
        if (!SHORTHAND_PROPERTIES[kebab]) {
            const longhands = LONG_TO_SHORT[kebab] || [];
            for (const shorthand of longhands) {
                if (shorthandsInStyle[shorthand] > index) {
                    propsToRemove.add(key);
                    break;
                }
            }
        }
    }
    const finalStyle = {};
    for (const prop of props) {
        if (propsToRemove.has(prop)) {
            continue;
        }
        const value = queryStyle[prop];
        if (isNestedGroup(value)) {
            finalStyle[prop] = overrideLonghand(value);
        }
        else {
            finalStyle[prop] = value;
        }
    }
    return finalStyle;
};