Mantine example

[ChrisKG32]

Some CSS frameworks are not optimized for SSR, so it's understandable Hydrogen doesn't support them right now; but Mantine is one that has great compatibility and customization to work well with SSR.

In theory, this should be relatively easy to implement, but Shopify Hydrogen doesn't give you an easy path that I've found to inject CSS into the server HTML. The Remix.run example in Mantine has a nice example of how to do this for Remix.

I would love to see an example for how to integrate Mantine into Hydrogen

[juanpprieto]

Hi @ChrisKG32, unfortunately Mantine uses emotion under the hood and emotion is currently not supported. There's a difference between a library supporting SSR and a library supporting SSR, RSC and streaming.

As of today, we have support for the following CSS-in-JS libraries:

• stitches css — example
• vanilla-extract — example coming after then next hydrogen release. More info on this PR

We've started with these two because they are both highly performant thanks to their zero runtime.

We keeping an eye on both styled-components and emotion's progress towards RSC/streaming.

🙏🏼