enhance: not extract message notification style in SSR (#43808)

* enhance: message not render style in SSR

* enhance: notification not render style in SSR

* docs: not render App if in demo page

.dumi/theme/layouts/GlobalLayout.tsx

@@ -107,6 +107,24 @@ const GlobalLayout: React.FC = () => {
     [isMobile, direction, updateSiteConfig, theme],
   );
 
+  const demoPage = pathname.startsWith('/~demos');
+
+  // ============================ Render ============================
+  let content: React.ReactNode = outlet;
+
+  // Demo page should not contain App component
+  if (!demoPage) {
+    content = (
+      <App>
+        {outlet}
+        <ThemeSwitch
+          value={theme}
+          onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
+        />
+      </App>
+    );
+  }
+
   return (
     <StyleProvider
       cache={styleCache}
@@ -121,15 +139,7 @@ const GlobalLayout: React.FC = () => {
             },
           }}
         >
-          <App>
-            {outlet}
-            {!pathname.startsWith('/~demos') && (
-              <ThemeSwitch
-                value={theme}
-                onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
-              />
-            )}
-          </App>
+          {content}
         </SiteThemeProvider>
       </SiteContext.Provider>
     </StyleProvider>

components/message/__tests__/hooks.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 import message from '..';
 import { fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
@@ -255,4 +256,19 @@ describe('message.hooks', () => {
 
     errorSpy.mockRestore();
   });
+
+  it('not export style in SSR', () => {
+    const cache = createCache();
+
+    const Demo = () => {
+      const [, holder] = message.useMessage();
+
+      return <StyleProvider cache={cache}>{holder}</StyleProvider>;
+    };
+
+    render(<Demo />);
+
+    const styleText = extractStyle(cache, true);
+    expect(styleText).not.toContain('.ant-message');
+  });
 });

components/message/style/index.tsx

@@ -201,4 +201,7 @@ export default genComponentStyleHook(
       token.paddingSM
     }px`,
   }),
+  {
+    clientOnly: true,
+  },
 );

components/notification/__tests__/hooks.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 import notification from '..';
 import { fireEvent, pureRender, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
@@ -154,4 +155,19 @@ describe('notification.hooks', () => {
       errorSpy.mockRestore();
     });
   });
+
+  it('not export style in SSR', () => {
+    const cache = createCache();
+
+    const Demo = () => {
+      const [, holder] = notification.useNotification();
+
+      return <StyleProvider cache={cache}>{holder}</StyleProvider>;
+    };
+
+    render(<Demo />);
+
+    const styleText = extractStyle(cache, true);
+    expect(styleText).not.toContain('.ant-notification');
+  });
 });

components/notification/style/index.tsx

@@ -300,4 +300,7 @@ export default genComponentStyleHook(
     zIndexPopup: token.zIndexPopupBase + 50,
     width: 384,
   }),
+  {
+    clientOnly: true,
+  },
 );

components/theme/util/genComponentStyleHook.ts

@@ -58,6 +58,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
     resetStyle?: boolean;
     // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
     deprecatedTokens?: [ComponentTokenKey<ComponentName>, ComponentTokenKey<ComponentName>][];
+    /**
+     * Only use component style in client side. Ignore in SSR.
+     */
+    clientOnly?: boolean;
   },
 ) {
   return (prefixCls: string): UseComponentStyleResult => {
@@ -71,6 +75,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       token,
       hashId,
       nonce: () => csp?.nonce!,
+      clientOnly: options?.clientOnly,
     };
 
     // Generate style for all a tags in antd component.

package.json

@@ -109,7 +109,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.13.2",
+    "@ant-design/cssinjs": "^1.14.0",
     "@ant-design/icons": "^5.1.0",
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",