@dash-ui/compound
Version:
A utility for creating compound styles with dash-ui
74 lines (60 loc) • 1.94 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
/**
* A factory function that creates a compound styles utility
*
* @param styles
*/
function compound(styles) {
/**
* A function for creating compound/multi-variant styles
*
* @param styleMap
* @param options
*/
return function compoundStyles(styleMap, options = emptyObj) {
const cache = {};
const mapKeys = Object.keys(styleMap);
function atomicCss(compoundMap) {
const key = JSON.stringify(compoundMap);
const cached = cache[key];
if (cached) return cached;
const output = // @ts-expect-error
typeof styleMap.default === "function" ? [// @ts-expect-error
styleMap.default.css()] : [];
for (let i = 0; i < mapKeys.length; i++) {
var _key;
const key = mapKeys[i];
if (key === "default") continue;
const value = compoundMap[key];
if (value === void 0 || value === null) continue;
output.push((_key = styleMap[key]) === null || _key === void 0 ? void 0 : _key.css(value));
}
return cache[key] = output;
}
function css(compoundMap) {
return "".concat(...atomicCss(compoundMap));
}
function compoundStyle(compoundMap = {}, compoundOptions = emptyObj) {
var _compoundOptions$atom;
if ((_compoundOptions$atom = compoundOptions.atomic) !== null && _compoundOptions$atom !== void 0 ? _compoundOptions$atom : options.atomic) {
const css = atomicCss(compoundMap);
let classes = "";
for (let i = 0; i < css.length; i++) {
classes += styles.cls(css[i]) + (i === css.length - 1 ? "" : " ");
}
return classes;
}
return styles.cls(css(compoundMap));
}
return Object.assign(compoundStyle, {
css,
atomicCss,
styles: styleMap
});
};
}
const emptyObj = {};
var _default = compound;
exports.default = _default;