@wix/design-system
Version:
@wix/design-system
37 lines • 1.61 kB
JavaScript
import { versionedNamespace } from './versionedNamespace';
export const NAMESPACE = 'wds';
const kebab = (value) => value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const join = (...classes) => classes.filter(Boolean).join(' ');
const modifierTails = (node, props) => {
const variants = Object.entries(node.variants ?? {})
.map(([name, values]) => {
const value = props[name];
if (!value || !values.includes(value))
return null;
return `--${kebab(name)}-${kebab(value)}`;
})
.filter(Boolean);
const states = (node.states ?? [])
.filter(name => props[name])
.map(name => `--${kebab(name)}`);
return [...variants, ...states];
};
export const createClassNames = (blockName, config = {}, versionedNs = versionedNamespace) => {
const namespaces = versionedNs ? [NAMESPACE, versionedNs] : [NAMESPACE];
const nodeClassNames = (base, node) => (props = {}, ...classes) => {
const tails = ['', ...modifierTails(node, props)];
return join(...namespaces.flatMap(ns => tails.map(tail => `${ns}-${base}${tail}`)), ...classes);
};
const slots = Object.fromEntries(Object.entries(config)
.filter(([name]) => name !== 'root')
.map(([name, node]) => [
name,
nodeClassNames(`${blockName}__${kebab(name)}`, node ?? {}),
]));
return {
...slots,
root: nodeClassNames(blockName, config.root ?? {}),
};
};
export const defineClassNames = (blockName, config = {}) => createClassNames(blockName, config);
//# sourceMappingURL=defineClassNames.js.map