css-variants
Version:
A lightweight, flexible API for managing CSS class variants.
92 lines • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ssv = void 0;
const merge_props_1 = require("./utils/merge-props");
/**
* Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.
*
* @param config - Configuration object for creating style variants
* @returns A function that accepts variant props and returns composed styles for each slot
*
* @example
* ```ts
* const buttonStyles = csv({
* slots: ['root', 'icon'],
* base: {
* root: { padding: '8px' },
* icon: { size: '16px' }
* },
* variants: {
* size: {
* small: {
* root: { padding: '4px' },
* icon: { size: '12px' }
* },
* large: {
* root: { padding: '12px' },
* icon: { size: '20px' }
* }
* }
* }
* });
*
* // Usage
* const styles = buttonStyles({ size: 'small' });
* // => { root: { padding: '4px' }, icon: { size: '12px' } }
* ```
*/
const ssv = (config) => {
const { slots, base, variants, compoundVariants, defaultVariants } = config;
if (!variants) {
return (props) => {
const result = {};
for (const slot of slots) {
result[slot] = { ...base?.[slot], ...props?.styles?.[slot] };
}
return result;
};
}
return (props) => {
const { styles, ...rest } = props ?? {};
const mergedProps = defaultVariants ? (0, merge_props_1.mergeProps)(defaultVariants, rest) : rest;
const result = {};
for (const slot of slots) {
result[slot] = { ...base?.[slot] };
}
for (const key in mergedProps) {
const slotStyle = variants[key]?.[mergedProps[key]];
if (slotStyle) {
for (const slot in slotStyle) {
result[slot] = { ...result[slot], ...slotStyle[slot] };
}
}
}
if (compoundVariants) {
for (const { styles: slotStyle, ...compoundVariant } of compoundVariants) {
let matches = true;
for (const key in compoundVariant) {
const value = compoundVariant[key];
const propValue = mergedProps[key];
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
matches = false;
break;
}
}
if (matches) {
for (const slot in slotStyle) {
result[slot] = { ...result[slot], ...slotStyle[slot] };
}
}
}
}
if (styles) {
for (const slot in styles) {
result[slot] = { ...result[slot], ...styles[slot] };
}
}
return result;
};
};
exports.ssv = ssv;
exports.default = exports.ssv;
//# sourceMappingURL=ssv.js.map