core/react: Support hydration for `makeStaticStyles`

[layershifter]

Based on #43.

---

makeStyles() supports hydration process, but makeStaticStyles does not (while it should!). Missing hydration process results in doubled styles definitions:

rehydrateRendererCache() should support styles from makeStaticStyles and rehydrate them properly: https://github.com/microsoft/griffel/blob/d19ad33a0118db33c980d784e2bb850d9ef17070/packages/core/src/renderer/rehydrateRendererCache.ts#L20

Static styles might go to a separate style bucket to avoid collisions with classes generated by makeStyles.

Repro

https://codesandbox.io/s/next-griffel-ssr-forked-2zok5q

[Yukioru]

It might help to solve the problem.

Made some edits to the example. The problems of hydrate and duplicates are solved there. This is only relevant for use with SSR.

Repro example: https://codesandbox.io/s/next-griffel-ssr-forked-ytuies

What has been changed:

1. I put the RendererProvider into a separate component and use it in two places

   • In _document and in _app:

       <GriffelRendererProvider renderer={renderer}>
         ...
       </GriffelRendererProvider>
     

     I had to duplicate in _document, because the styles will work properly during the SSR.

2. Added a condition for server-only injection of global styles (Because _app is called both on the server and on the client)

   if (typeof window === "undefined") {
     injectGlobalStyles();
   }
   

   Using SSR - there is no need to re-inject the styles because the hydrate will work.

Everything is working now, I guess, as planned.

P.s. Perhaps there is a more elegant way to do the same thing. 👀