Simplifying macaron helper function #26

[This is a continuation of the conversation from https://github.com//issues/24 per request from @Mokshit06 ]

I forked and modified the previous stackblitz and now it works: https://stackblitz.com/edit/macaron-css-macaron-tj3yss?file=src/App.tsx

The main concern I have now is that it's a bit verbose, needing to be wrapped by both macaron$ and sampleFn:

const MyComponent = getStyledPrimativeComponent(
 'div',
 macaron$(() =>
 sampleFn({
 fontSize: 24,
 backgroundColor: 'green',
 '& .inner': {
 backgroundColor: 'blue',
 },
 })
 )
);

Can you think of any way to make this a bit more elegant? Also happy to take this to a discussion now that the original issue was fixed, and close this one.

@Mokshit06 replied:
I have a few ideas on how this can be made less verbose. Lets move this to a discussion

Vanilla-extract also has a concept of function serialisers that it uses to serialise recipes etc, which allow them to be returned from macaron$. Maybe styled can also be made into a serialisable function, so you can just return it directly