CSS loading and Critical CSS

We at Quintype have built a react framework which does isomorphic rendering. We also have a component library called Arrow which provides pre-styled customizable react components. For example some rows from here are being used here.

The problem:
On integrating Arrow components in our app, the pages were having quite poor web vitals. One of the reasons being the component CSS wasn’t being inlined during SSR

Solution:
Inline some of the CSS. We don’t know which components would be used above the fold at build time, since that can be customized from the CMS. However we do know this at runtime - the CMS sends it as a config. So we generated seperate CSS files for every library component, created seperate bundles for every row component in our app and changed the SSR logic to inline the styles of the 1st row component.
This isn’t really critical css but it improved our scores - CLS has become close to 0