@morfeo/css | accept functions in createUseClasses function

[mauroerta]

The idea is to change the interface of createUseClasses into:

import { Style } from "@morfeo/web";


type ClassStyle = Style | {
  [K in keyof Style]: (props: Record<string, unknown>) => Style[K]
}

export function createUseClasses<Keys extends string>(
  styles: Record<Keys, ClassStyle>,
): () => Record<Keys, string> {
  // ...
}

This way it will be possible to use it in this way:

const useClasses = createUseClasses({
   button: {
     p: 'm',
     bg: (props) => props.background
   }
})

const Button = ({ background }) => {
  const classes = useClasses({ background });
  return <button className={classes.button} />
}

In this case, the resulting code will (probably) become:

const getClasses = (props) => ({
   button: `p-m bg-${getClassName((props) => props.background)(props)}`)
})

const Button = ({ variant }) => {
  const classes = getClasses({ background });
  return <button className={classes.button} />
}

And the generated CSS has to provide all the possible styles instead of the specific one:

.p-m {
   padding: 1.5rem;
}

.bg-primary {
   /* the generated css */
}

/* all the possible variants of the button */

.bg-success {
   /* the generated css */
}

.bg-error {
   /* the generated css */
}

[mauroerta]

Any other proposal is, of course, welcome