Macro system does not support calling a function which calls `styled` about macaron HOT 6 CLOSED

@ncknuna This should be fixed in release 1.1.3. The issue was that macaron tries to extract every call of styled functions, but it was unable to do so because of a variable reference that it couldn't resolve. In this case you want to opt out of macaron's extraction since you know you will only call it inside macaron$ and it will be extracted later. So you can add a leading comment to the function calls with macaron-ignore like

const Component = /* macaron-ignore */ styled("button", {});

/* macaron-ignore */ globalStyle(selector, styles)

macaron will skip extracting these functions and will directly extract where you've called macaron$. Just add these comments inside sampleFn and it should work

from macaron.

Another thing, you can't return a styled component from macaron$() because the return value needs to be serialised and component declarations are functions and can't be serialised.

from macaron.

Thanks for the quick fix! 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.

from macaron.

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

from macaron.

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

from macaron.

Started disccusion here: #26

Closing this as completed

from macaron.