Please clarify what's the recommended way for typing custom utils. If I want 'm' and 'p' utils and component properties to accept new space tokens + standard values like 'auto'. But I certainly don't want them to accept any arbitrary numbers and strings.
export const css = createCss({
tokens: {
space: {
0: '0',
5: '5px',
10: '10px',
15: '15px',
20: '20px',
25: '25px',
30: '30px',
35: '35px',
40: '40px',
45: '45px',
50: '50px',
},
},
screens: {
sm: (rule) => `@media (min-width: ${sm}) { ${rule} }`,
md: (rule) => `@media (min-width: ${md}) { ${rule} }`,
lg: (rule) => `@media (min-width: ${lg}) { ${rule} }`,
xl: (rule) => `@media (min-width: ${xl}) { ${rule} }`,
},
utils: {
m: (utilCss) => (value: ---> ??? <---, pseudo?: string) =>
utilCss.compose(
utilCss.marginLeft(value, pseudo),
utilCss.marginRight(value, pseudo),
utilCss.marginTop(value, pseudo),
utilCss.marginBottom(value, pseudo),
),
p: (utilCss) => (value: ---> ??? <---, pseudo?: string) =>
utilCss.compose(
utilCss.paddingLeft(value, pseudo),
utilCss.paddingRight(value, pseudo),
utilCss.paddingTop(value, pseudo),
utilCss.paddingBottom(value, pseudo),
),
}
}
type ViewProps = {
children: React.ReactNode
m: ---> ??? <---
p: ---> ??? <---
}
export function View(props: ViewProps) {
const { children, m, p } = props
const classes = css.compose(
css.m(m),
css.p(p),
);
return <div className={classes}>{children}</div>
}