Docs: CSS-In-JS (<style>) libraries migration guide for concurrent rendering (/app directory)

[zoriya]

What is the improvement or update you wish to see?

I'm currently trying to make a CSS-in-JS library support concurrent rendering, and I can't find documentation on how should it integrate with next. The official upgrade guide of React talks about piping the SSR Stream, but as far as I know, the SSR stream is not exposed in next js.

Is there any context that might help us understand?

Looking at recent pull requests, we can see that you modified the next code to support some CSS-in-JS libraries, but I don't really understand how we can use that. The hook talked about here useServerInsertedHTML does not seem to have documentation. I first thought that this hook gets called after each react render to allow us to add elements to the head for server components (when streaming components). After reading the emotion's issue about next 13 support, I figured this what not the case.

There is a documentation page to use existing css in js libraries (see link below), but none for library maintainers, I believe. How can we add support to next 13 for server components?

Does the docs page already exist? Please link to it.

https://beta.nextjs.org/docs/styling/css-in-js

[leerob]

reactwg/react-18#110

[zoriya]

I know, I linked this discussion in the original post but as I said, next does not offer a way to pipe the SSR stream so there is no way to apply something like this:

class MyWritable extends Writable {
  constructor(writable) {
    super();
    this._writable = writable;
  }
  ...
  _write(chunk, encoding, callback) {
    // This should pick up any new link tags that hasn't been previously
    // written to this stream.
    let rules = generateNewStyleRulesSinceLastCall();
    if (rules) {
      // Write it before the HTML to ensure that the CSS is available and
      // blocks display before the HTML that shows it.
      this._writable.write('<style>' + rules + '</style>');      
    }
    // Finally write whatever React tried to write.
    this._writable.write(chunk, encoding, callback);
  }
  flush() {
    if (typeof this._writable.flush === 'function') {
      this._writable.flush();
    }
  }
}

[leerob]

Closing this one as stale, there's been a number of libraries that have now added support in open-source we can now reference 😄 Those have been linked back in the CSS-in-JS docs.

[zoriya]

I still think this is not solved since only clients components can be styled but if the ssr stream was exposed we could also style servers components.
If you don't think this is valuable this can be kept close tho.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.