How to include components when rendering on the server?

[unix]

Qquestion description:

If I'm using a third-party component with a global style, All third-party components are bundle into chunks.

Example:

1. I have a component library styled-jsx-lib-app (demo)

const BaseCssComponent = () => {
  return (
    <div>
      <style global jsx>{`
        html {
          font-size: 30px;
        }
      `}</style>
    </div>
  )
}

2. After running next dev, you can see that the global style is directly rendered:

3. When I publish the library to NPM and use it in another project: styled-jsx-user-app:

import { BaseCssComponent } from 'styled-jsx-lib-app'

const Home = () => (
  <div>
    hello, I am using library `styled-jsx-lib-app`.
    <BaseCssComponent />
  </div>
)

4. This third-party library will always be in the chunk:

I Want:
I want to include this base style component when rendering on the server, what should I do now?

Some of the solutions I've tried:

1. Publish .css file to npm, and import in the _app.js of next.js. This works, but I still want to publish a component if possible.

2. Use flush from styled-jsx/server in _document.jsx. Not work, flush always return [].

[unix]

I think I solved the problem.
Update results, may be helpful to others.
(🙏 can anyone help me close this discussion?)

styled-jsx cannot collect styles from node_modules, even if these style components are generated with styled-jsx.

As a solution, you can export the flush of styled-jsx/server manually in the library, only in this way, we cat get styleSheetRegistry instance.

Example:

In your component library:

import flush from 'styled-jsx/server'

const BaseCssComponent = () => {
  return (
    <div>
      <style global jsx>{`
        html {
          font-size: 30px;
        }
      `}</style>
    </div>
  )
}

BaseCssComponent.flush = flush
export default BaseCssComponent
// or export { ... flush }

// in next.js

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const styles = BaseCssComponent.flush()

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {styles}
        </>
      )
    }
  }

  ...
}

[rafaelalmeidatk]

I am not sure this is the reason, but is styled-jsx a peerDependency in your component library? Generally when building component libraries you always add the styling tools (SC, emotion, styled-jsx, etc.) as a peerDependency, because your project pick up the version the project that installs your library is using, avoiding this problem of having to reexport methods from your own library and duplicating things in the app

[unix]

styled-jsx is involved in packaging, and they are in the final bundle. (I mean it, because I need to publish a general package)

Anyway, I'm glad the problem has been solved, and thanks for your reply. 🎉

[rafaelalmeidatk]

Ah if you need it in the bundle then yeah it makes sense to not be a peerDependency, I'm glad you solved it.