Simplifying macaron helper function

[ncknuna]

[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