feat: extract style node to support Next.js _document.tsx render style tags

src/hooks/useStyleRegister.tsx

@@ -483,3 +483,25 @@ export function extractStyle(cache: Cache) {
 
   return styleText;
 }
+
+export function extractStyleNode(cache: Cache) {
+  const styleKeys = Array.from(cache.cache.keys()).filter((key) =>
+    key.startsWith('style%'),
+  );
+
+  return styleKeys.map((key) => {
+    const [styleStr, tokenKey, styleId]: [string, string, string] =
+      cache.cache.get(key)![1];
+
+    return (
+      <style
+        key={key}
+        {...{
+          [ATTR_TOKEN]: tokenKey,
+          [ATTR_MARK]: styleId,
+        }}
+        dangerouslySetInnerHTML={{ __html: styleStr }}
+      />
+    );
+  });
+}

src/index.ts

@@ -1,6 +1,9 @@
 import useCacheToken from './hooks/useCacheToken';
 import type { CSSInterpolation, CSSObject } from './hooks/useStyleRegister';
-import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
+import useStyleRegister, {
+  extractStyle,
+  extractStyleNode,
+} from './hooks/useStyleRegister';
 import Keyframes from './Keyframes';
 import type { Linter } from './linters';
 import { logicalPropertiesLinter } from './linters';
@@ -19,6 +22,7 @@ export {
   StyleProvider,
   Keyframes,
   extractStyle,
+  extractStyleNode,
 
   // Transformer
   legacyLogicalPropertiesTransformer,

tests/server.spec.tsx

@@ -1,23 +1,23 @@
+import { render } from '@testing-library/react';
 import * as React from 'react';
 import { renderToString } from 'react-dom/server';
-import { render } from '@testing-library/react';
+import type { CSSInterpolation } from '../src';
 import {
+  createCache,
+  extractStyle,
+  extractStyleNode,
+  StyleProvider,
   Theme,
   useCacheToken,
   useStyleRegister,
-  StyleProvider,
-  extractStyle,
-  createCache,
 } from '../src';
-import type { CSSInterpolation } from '../src';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import classNames from 'classnames';
 import {
+  ATTR_MARK,
   CSS_IN_JS_INSTANCE,
   CSS_IN_JS_INSTANCE_ID,
-  ATTR_MARK,
 } from '../src/StyleContext';
-import classNames from 'classnames';
 
 interface DesignToken {
   primaryColor: string;
@@ -156,6 +156,32 @@ describe('SSR', () => {
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
+  it('ssr extract style node', () => {
+    // >>> SSR
+    const cache = createCache();
+
+    const html = renderToString(
+      <StyleProvider cache={cache}>
+        <IdHolder />
+        <Box>
+          <IdHolder />
+        </Box>
+        <IdHolder />
+      </StyleProvider>,
+    );
+
+    const styleNode = extractStyleNode(cache);
+    const styleText = extractStyle(cache);
+
+    const style = renderToString(<>{styleNode}</>);
+
+    expect(html).toEqual(
+      '<div id=":R1:" class="id">:R1:</div><div class="box"><div id=":Ra:" class="id">:Ra:</div></div><div id=":R3:" class="id">:R3:</div>',
+    );
+
+    expect(style).toEqual(styleText);
+  });
+
   it('default hashPriority', () => {
     // >>> SSR
     const cache = createCache();