Classnames are stripped in SSG

[colophonemes]

Thanks for a great-looking plugin, this is making me excited to switch my Next sites to Preact.

I'm not sure if this is an issue with your plugin, or something further upstream (maybe @developit knows?), but I can't seem to get server-side styles to render correctly with a third-party library (Material UI in my use-case) that uses className for passing CSS classes. From the docs, I would have expected @preact/compat to fix this out of the box, but it doesn't seem to work.

I suspect that there's an issue with how preact-render-to-string detects styles when using the className prop (which MUI uses internally). Perhaps there's an issue with how preact-render-to-string is configured that makes it fail to parse className props correctly? In any case, this unfortunately means that it seems like it's impossible to use existing third-party libraries that aren't already Preact compatible.

I can get styles to apply correctly if there's any re-render on the component (which is why I suspect preact-render-to-string), but on initial page load none of the HTML elements have classes applied.

Weirdly, if I add a class prop to one of the MUI components, the base styles are applied fine, but any class names I've added to the class prop aren't applied.

I've made a minimal repro here which you can clone: https://github.com/colophonemes/preact-next-mui-test

The site is also running on Vercel here for a live demo: https://next-preact-test.vercel.app/

Thanks in advance for any pointers you're able to give!

[developit]

Hiya - this is a bug in Preact 10.5 - you should be able to use 10.4.8 for now and MUI will work. The fix is landed and there should be a new 10.5.x release this week.

[colophonemes]

Amazing, that's incredibly helpful, thank you! 🙏

[sventschui]

Closing this issue as this is an upstream bug (see https://github.com/preactjs/preact/issues/2781 and https://github.com/preactjs/preact/issues/2582)