@mincho-js/css
Version:
Natural CSS in the Typescript
100 lines (99 loc) • 2.9 kB
JavaScript
;
function mapValues(input, fn) {
const result = {};
for (const key in input) {
result[key] = fn(input[key], key);
}
return result;
}
function transformVariantSelection(variants) {
if (Array.isArray(variants)) {
return variants.reduce((acc, variant) => {
if (typeof variant === "string") {
acc[variant] = true;
} else {
Object.assign(
acc,
variant
);
}
return acc;
}, {});
}
return variants ?? {};
}
function transformToggleVariants(toggleVariants) {
const variants = {};
for (const variantsName in toggleVariants) {
const variantsStyle = toggleVariants[variantsName];
variants[variantsName] = {
true: variantsStyle
};
}
return variants;
}
const shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
for (const key of Object.keys(compoundCheck)) {
if (compoundCheck[key] !== (selections[key] ?? defaultVariants[key])) {
return false;
}
}
return true;
};
const createRuntimeFn = (config) => {
const runtimeFn = (options) => {
let className = config.defaultClassName;
const selections = {
...config.defaultVariants,
...transformVariantSelection(
options
)
};
for (const variantName in selections) {
const variantSelection = selections[variantName] ?? config.defaultVariants[variantName];
if (variantSelection != null) {
let selection = variantSelection;
if (typeof selection === "boolean") {
selection = selection === true ? "true" : "false";
}
const selectionClassName = config.variantClassNames[variantName]?.[selection];
if (selectionClassName) {
className += " " + selectionClassName;
}
}
}
for (const [compoundCheck, compoundClassName] of config.compoundVariants) {
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
className += " " + compoundClassName;
}
}
return className;
};
runtimeFn.props = (props) => {
const result = {};
for (const [propName, propValue] of Object.entries(props)) {
const varName = config.propVars[propName];
if (varName !== void 0) {
result[varName] = propValue;
}
}
return result;
};
runtimeFn.variants = () => Object.keys(config.variantClassNames);
runtimeFn.classNames = {
get base() {
return config.defaultClassName.split(" ")[0];
},
get variants() {
return mapValues(
config.variantClassNames,
(classNames) => mapValues(classNames, (className) => className.split(" ")[0])
);
}
};
return runtimeFn;
};
exports.createRuntimeFn = createRuntimeFn;
exports.mapValues = mapValues;
exports.transformToggleVariants = transformToggleVariants;
exports.transformVariantSelection = transformVariantSelection;