A variant of CssBaseline.flush() that return string

[wong2]

Feature request 🚀

• [ ] I will create Pull Request
• [x] It's just a suggestion

I'm trying to use geist-ui with Remix, Remix doc suggested a method to integrate other css frameworks, but when doing this for geist, I run into the problem that CssBaseline.flush() returns a ReactElement instead of string. So my request is can we have a string version of CssBaseline.flush()?

Examples

  let markup = renderToString(<RemixServer context={remixContext} url={request.url} />);

  const styles = CssBaseline.flushToString();
  markup = markup.replace("__STYLES__", styles);

  responseHeaders.set("Content-Type", "text/html");

Programme (Optional)

Others (Optional)

[unix]

This is a very problematic issue that predictably cannot be resolved well in the short term.

Now Geist is using styled-jsx as a style generator, but has encountered many problems, such as compilation of rollup, exporting package content sharing, exporting style content, etc. These issues cannot be solved in the patch version(for Geist), unless Geist finds an alternative style solution instead.

Unfortunately, I can't solve the problem you've raised right now, but I already have plans to find a new dynamic styling solution to replace the styled-jsx, this requires a significant portion of time for refactoring development. (All suggestions for style solution selection are also welcome)

[unix]

I don't have experience with Remix yet, so I'll try to understand the framework and find out if there is a way around it in the next few days. (it may or may not work, not sure yet)

[unix]

@wong2 The good news is that Geist can support Remix server-side rendering by exporting a new API, which you can refer to in this example to create your project. Note that this requires version v2.3.2 or above.

[wong2]

nice!