34 lines
921 B
TypeScript
34 lines
921 B
TypeScript
import { dash, omit } from 'radash';
|
|
|
|
export type Theme = { breakpoints: string[] };
|
|
|
|
function min(breakpoint: string, style: string) {
|
|
return `@media (min-width: ${breakpoint})
|
|
{
|
|
${style}
|
|
}`;
|
|
}
|
|
|
|
export function getStyles<T>(props: Record<string, T | T[]>, theme: Theme) {
|
|
const cleanProps = omit(props, ['children', 'id', 'key', 'className']);
|
|
|
|
return (Object.keys(cleanProps) as Array<keyof typeof props>).map((name) => {
|
|
const styleValues = cleanProps[name];
|
|
if (Array.isArray(styleValues)) {
|
|
const [firstStyle, ...values] = styleValues;
|
|
|
|
return theme.breakpoints
|
|
.map((breakpoint, i) => {
|
|
if (!values[i]) return undefined;
|
|
const style = `${dash(name)}:${values[i]}`;
|
|
|
|
return min(breakpoint, style);
|
|
})
|
|
.concat([`${dash(name)}:${firstStyle};`])
|
|
.join(' ');
|
|
}
|
|
|
|
return `${dash(name)}:${styleValues};`;
|
|
});
|
|
}
|