@crossed/styled/lib/module/createMethods.js

A universal & performant styling library for React Native, Next.js & React

import { Registry } from "./Registry";
import { isWeb } from "./isWeb";
const cache = /* @__PURE__ */ new Map();
const apply = (style, props, addClassname) => {
  Registry.apply(() => style, {
    isWeb,
    props,
    addClassname,
    cache
  });
};
const cleanClassName = (classNames) => {
  return classNames.reduce((acc, className) => {
    const [property] = className.match(/^([a-z\-:]+)\[/g) || [];
    if (property) {
      acc.forEach((accKey) => {
        const [same] = accKey.match(new RegExp(`^${property.replace("[", "\\[")}`, "g")) || [];
        if (same) {
          acc.delete(accKey);
        }
      });
    }
    acc.add(className);
    return acc;
  }, /* @__PURE__ */ new Set());
};
const styleConverter = (styleOfKey) => {
  if (!styleOfKey) {
    return {};
  }
  return Object.entries(styleOfKey).reduce((acc, [key, value]) => {
    if (key === "paddingHorizontal") {
      acc.paddingLeft = value;
      acc.paddingRight = value;
    } else if (key === "paddingVertical") {
      acc.paddingTop = value;
      acc.paddingBottom = value;
    } else if (key === "padding") {
      acc.paddingTop = value;
      acc.paddingBottom = value;
      acc.paddingLeft = value;
      acc.paddingRight = value;
    } else if (key === "marginHorizontal") {
      acc.marginLeft = value;
      acc.marginRight = value;
    } else if (key === "marginVertical") {
      acc.marginTop = value;
      acc.marginBottom = value;
    } else if (key === "margin") {
      acc.marginTop = value;
      acc.marginBottom = value;
      acc.marginLeft = value;
      acc.marginRight = value;
    } else {
      acc[key] = value;
    }
    return acc;
  }, {});
};
const createMethods = (baseStyle, stylesParent = {}) => {
  var _a, _b, _c, _d;
  const styleOfKey = typeof baseStyle === "function" || !baseStyle ? baseStyle : {
    ...baseStyle,
    base: styleConverter(baseStyle.base),
    [":focus"]: styleConverter(baseStyle[":focus"]),
    [":focus-visible"]: styleConverter(baseStyle[":focus-visible"]),
    [":active"]: styleConverter(baseStyle[":active"]),
    [":hovered"]: styleConverter(baseStyle[":hovered"]),
    web: styleConverter(baseStyle.web),
    media: {
      md: styleConverter((_a = baseStyle.media) == null ? void 0 : _a.md),
      sm: styleConverter((_b = baseStyle.media) == null ? void 0 : _b.sm),
      lg: styleConverter((_c = baseStyle.media) == null ? void 0 : _c.lg),
      xl: styleConverter((_d = baseStyle.media) == null ? void 0 : _d.xl)
    }
  };
  return {
    original: styleOfKey,
    stylesParent,
    style: (props = {}) => {
      const old = cache.get({ style: styleOfKey, props });
      if (old) {
        return old;
      }
      let style = {};
      const parentStyle = (Array.isArray(props.style) ? props.style : [props.style]).reduce((acc, st) => {
        if (!st || st.$$css)
          return acc;
        if (!st.$$css) {
          acc = { ...acc, ...st };
        }
        return acc;
      }, stylesParent);
      apply(styleOfKey, props, ({ body, suffix, wrapper, prefix }) => {
        if (body && !suffix && !wrapper && !prefix) {
          style = {
            ...style,
            ...Object.values(body).reduce((acc, e) => ({ ...acc, ...e }), {})
          };
        }
      });
      const result = {
        style: {
          ...style,
          ...parentStyle
        }
      };
      cache.set({ style: styleOfKey, props }, result);
      return result;
    },
    className: (props = {}) => {
      const old = cache.get({ style: styleOfKey, props });
      if (old) {
        return old;
      }
      const classNames = props.className ? props.className.split(" ") : [];
      const parentStyle = (Array.isArray(props.style) ? props.style : [props.style]).reduce((acc, st) => {
        if (!st)
          return acc;
        if (!st.$$css) {
          acc = { ...acc, ...st };
        } else if (st.$$css) {
          const { $$css, ...otherClassName } = st;
          classNames.push(...Object.keys(otherClassName));
        }
        return acc;
      }, {});
      apply(
        {
          ...styleOfKey,
          base: { ...styleOfKey.base, ...parentStyle }
        },
        props,
        ({ body }) => {
          classNames.push(...Object.keys(body));
        }
      );
      const result = {
        className: Array.from(cleanClassName(classNames).values()).join(" "),
        style: stylesParent
      };
      cache.set({ style: styleOfKey, props }, result);
      return result;
    },
    rnw: (props = {}) => {
      const old = cache.get({ style: styleOfKey, props, stylesParent });
      if (old) {
        return old;
      }
      let style = {};
      const classNames = props.className ? props.className.split(" ") : [];
      apply(styleOfKey, props, ({ body }) => {
        style = {
          ...style,
          ...Object.values(body).reduce((acc, e) => ({ ...acc, ...e }), {})
        };
        classNames.push(...Object.keys(body));
      });
      let styletmp;
      (Array.isArray(props.style) ? props.style : [props.style]).flat(Infinity).forEach((st) => {
        if (!st)
          return;
        if (st.$$css) {
          const { $$css, ...otherClassName } = st;
          classNames.push(...Object.keys(otherClassName));
        } else if (!st.$$css) {
          style = { ...style, ...st };
          styletmp = { ...styletmp, ...st };
        }
      });
      const styletransformWeb = isWeb ? Array.from(cleanClassName(classNames).values()).reduce(
        (acc2, cl) => {
          acc2[cl] = cl;
          return acc2;
        },
        { $$css: true }
      ) : style;
      const result = {
        style: styletmp ? [styletransformWeb, styletmp, stylesParent] : [styletransformWeb, stylesParent]
      };
      cache.set({ style: styleOfKey, props, stylesParent }, result);
      return result;
    }
  };
};
export {
  createMethods
};
//# sourceMappingURL=createMethods.js.map