UNPKG

@crossed/styled

Version:

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

141 lines (140 loc) 4.19 kB
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 createMethods = (styleOfKey, stylesParent = {}) => { 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