Twin Macro as an ES module import in Framer

[alanontheweb]

Hello @ben-rogerson I thought I would reach out to you since you would know best. Framer is soon releasing NPM support visa JSPM with import maps for ES modules. This feature is in beta, but I have gotten styled components working on it. When I reached out to the Framer team about twin-macro support, this is what they said:

I'm guessing there is no way to get twin-macro to run on the client side. Maybe something like twind would do the trick. But I was wondering if there was a way to develop components built with twin-macro in Storybook and export them via rollup (or other tools) as ES modules in an npm package. Then, instead of importing twin-macro, I would import the minified/compiled/packaged version of the components. Is this even possible or does twin-macro still need to be a dependency with that build step involved?

Thank you

[ben-rogerson]

Hey Alan

Yeah, your guess is correct - twin won't be able to run client side.
I've made a component library example that precompiles components with Rollup but I haven't tested them in Framer before.