search

solidjs / solid-styled-components

A 1kb Styled Components library for Solid
MIT License
286 stars 27 forks source link

What is the proper usage of extractCss in an async context? #32

Open knpwrs opened 2 years ago

knpwrs commented 2 years ago

extractCss is a synchronous (and global) API -- what's the proper usage of this function when rendering asynchronously or streaming?

Over at https://github.com/knpwrs/solid-ssr/blob/main/src/entry.server.tsx#L7-L15= I have code which essentially amounts to:

const renderPromise = renderToStringAsync(() => <App />));
const css = extractCss();
const html = await renderPromise;

Should I expect this to work properly? My concern is that extractCss() appears to work in a global synchronous context, so how can I be sure that I am extracting the css from any particular asynchronous render?

The same question applies for streaming.

Would something like how emotion handles it be appropriate? See here: https://emotion.sh/docs/ssr#api=

Basically, they offer two methods:

  1. Render inline <style> elements as siblings to your components, no css extraction required. It's very easy to imagine how this would work in a streaming context.
  2. Wrapping your app in a cache provider which holds on to an object that you can extract CSS from.