Merging sprinkles defined in styles and sprinkles from component props.

[mgrog]

Hey everyone! I have the following issue while working with sprinkles API in VE. Let's say I have a Box component to expose sprinkles through props and inject them to the className. And I have a button component with some values defaulted e.g. :

const Button = ({fontSize = "md", ...props}: ButtonProps) => {
  return <Box as="button" fontSize={fontSize} {...props}>{props.children}</Box>
}

THEN I have a very specific button with some unique styles that can't be covered by sprinkles, so it's nicer to define everything in one style e.g. :

// colocated css.ts file
export const specialBtn = style([sprinkles({fontSize: "lg"}), {width: 200}]);

import * as styles from "..."
<Button  className={styles.specialBtn}>Special Button</Button>

One would expect the className to override the default fontSize prop, but in fact both fontSize sprinkles are applied and it's anyone's guess which one will come out on top. I understand this is due to the className from the style being extracted as a string prior to the props being injected, and as such both are present in the final className string.

So...I was wondering if anyone has found a good solution to merging sprinkles strings from styles and Box props? It would be nice to have consistent application of styles in this common use case for me.