diff --git a/src/useStyleRegister.tsx b/src/useStyleRegister.tsx
index ef385d3..d581fb9 100644
--- a/src/useStyleRegister.tsx
+++ b/src/useStyleRegister.tsx
@@ -179,6 +179,10 @@ function uniqueHash(path: (string | number)[], styleStr: string) {
return hash(`${path.join('%')}${styleStr}`);
}
+function Empty() {
+ return null;
+}
+
/**
* Register a style to the global style sheet.
*/
@@ -230,12 +234,12 @@ export default function useStyleRegister(
);
return (node: React.ReactElement) => {
- if (isMergedClientSide || !defaultCache) {
- return node;
- }
+ let styleNode: React.ReactElement;
- return (
- <>
+ if (isMergedClientSide || !defaultCache) {
+ styleNode = ;
+ } else {
+ styleNode = (
+ );
+ }
+
+ return (
+ <>
+ {styleNode}
{node}
>
);
diff --git a/tests/server.spec.tsx b/tests/server.spec.tsx
index 8cea319..ee60c4f 100644
--- a/tests/server.spec.tsx
+++ b/tests/server.spec.tsx
@@ -62,14 +62,23 @@ describe('SSR', () => {
},
});
- const Box = () => {
+ const Box = ({ children }: { children?: React.ReactNode }) => {
const [token] = useCacheToken(theme, [baseToken]);
const wrapSSR = useStyleRegister({ theme, token, path: ['.box'] }, () => [
genStyle(token),
]);
- return wrapSSR();
+ return wrapSSR({children}
);
+ };
+
+ const IdHolder = () => {
+ const id = React.useId();
+ return (
+
+ {id}
+
+ );
};
it('should not use cache', () => {
@@ -84,13 +93,19 @@ describe('SSR', () => {
const html = renderToString(
-
+
+
+
+
+
,
);
const style = extractStyle(cache);
- expect(html).toEqual('');
+ expect(html).toEqual(
+ ':R1:
:R3:
',
+ );
expect(style).toEqual(
'',
);
@@ -116,7 +131,11 @@ describe('SSR', () => {
// Force insert style since we hack `canUseDom` to false
mock="client"
>
-
+
+
+
+
+
,
{
hydrate: true,
@@ -133,7 +152,11 @@ describe('SSR', () => {
it('tricky ssr', () => {
const html = renderToString(
-
+
+
+
+
+
,
);
@@ -152,7 +175,11 @@ describe('SSR', () => {
// Force insert style since we hack `canUseDom` to false
mock="client"
>
-
+
+
+
+
+
,
{
hydrate: true,