2022-10-11 19:26:45 +02:00
|
|
|
'use client'
|
2022-09-17 00:12:59 +02:00
|
|
|
|
2022-08-03 18:21:20 +02:00
|
|
|
import React from 'react'
|
|
|
|
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
|
|
|
|
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
|
2022-10-13 11:13:39 +02:00
|
|
|
import { useServerInsertedHTML } from 'next/navigation'
|
2022-08-03 18:21:20 +02:00
|
|
|
import { useState } from 'react'
|
|
|
|
|
|
|
|
export default function RootStyleRegistry({ children }) {
|
|
|
|
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
|
|
|
|
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
|
|
|
|
const styledJsxFlushEffect = () => {
|
|
|
|
const styles = jsxStyleRegistry.styles()
|
|
|
|
jsxStyleRegistry.flush()
|
|
|
|
return <>{styles}</>
|
|
|
|
}
|
|
|
|
const styledComponentsFlushEffect = () => {
|
|
|
|
const styles = styledComponentsStyleSheet.getStyleElement()
|
2022-11-02 14:18:08 +01:00
|
|
|
styledComponentsStyleSheet.instance.clearTag()
|
2022-08-03 18:21:20 +02:00
|
|
|
return <>{styles}</>
|
|
|
|
}
|
|
|
|
|
2022-10-03 15:43:35 +02:00
|
|
|
// Allow multiple useServerInsertedHTML
|
|
|
|
useServerInsertedHTML(() => {
|
2022-08-12 21:06:08 +02:00
|
|
|
return <>{styledJsxFlushEffect()}</>
|
|
|
|
})
|
|
|
|
|
2022-10-03 15:43:35 +02:00
|
|
|
useServerInsertedHTML(() => {
|
2022-08-12 21:06:08 +02:00
|
|
|
return <>{styledComponentsFlushEffect()}</>
|
2022-08-03 18:21:20 +02:00
|
|
|
})
|
|
|
|
|
2022-10-03 15:43:35 +02:00
|
|
|
return (
|
|
|
|
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
|
|
|
|
<StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
|
|
|
|
</StyleSheetManager>
|
|
|
|
)
|
2022-08-03 18:21:20 +02:00
|
|
|
}
|