How is Chakra-UI able to preload CSS?

[lbozzo]

Hi to everyone!
I have used styled-components and @emotion/core myself in a few "fun" projects (with NextJS). However, I noticed and amazing feature from Charka-UI. Whenever a page loads, even in the First Meaningful Page, the components seem to already have the CSS. How is this even possible?. I have switched the ThemeProvider from Chakra with the styled-components and the emotion-theming providers and the page still loads beautifully. I don't understand how this can be achieved.
I ask because with plain styled-components, the page first loads the text, images and all the primitives without any styles, and then loads the styles, which gives a sort of 'tilt' and it is a weird user experience. I would like to know how Chakra-UI fixes this bad user experience.

Update:
I'm so sorry. Just after posting this question I found an example from NextJS on how to enhance the website and get the desired behaviour.

[ljosberinn]

Chakra is using emotion which calculates the styling at the time of execution, which is why you never can see a FOUC.