feat: add client mark

ant-design · Jul 25, 2023 · 1945a0e · 1945a0e
1 parent 55d5716
commit 1945a0e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/src/hooks/useStyleRegister/index.tsx b/src/hooks/useStyleRegister/index.tsx
@@ -366,10 +366,11 @@ export default function useStyleRegister(
     hashId?: string;
     layer?: string;
     nonce?: string | (() => string);
+    clientOnly?: boolean;
   },
   styleFn: () => CSSInterpolation,
 ) {
-  const { token, path, hashId, layer, nonce } = info;
+  const { token, path, hashId, layer, nonce, clientOnly } = info;
   const {
     autoClear,
     mock,
@@ -397,6 +398,7 @@ export default function useStyleRegister(
       tokenKey: string,
       styleId: string,
       effectStyle: Record<string, string>,
+      clientOnly: boolean | undefined,
     ]
   >(
     'style',
@@ -409,7 +411,7 @@ export default function useStyleRegister(
       if (existPath(cachePath)) {
         const [inlineCacheStyleStr, styleHash] = getStyleAndHash(cachePath);
         if (inlineCacheStyleStr) {
-          return [inlineCacheStyleStr, tokenKey, styleHash, {}];
+          return [inlineCacheStyleStr, tokenKey, styleHash, {}, clientOnly];
         }
       }
 
@@ -427,7 +429,7 @@ export default function useStyleRegister(
       const styleStr = normalizeStyle(parsedStyle);
       const styleId = uniqueHash(fullPath, styleStr);
 
-      return [styleStr, tokenKey, styleId, effectStyle];
+      return [styleStr, tokenKey, styleId, effectStyle, clientOnly];
     },
 
     // Remove cache if no need
@@ -548,13 +550,19 @@ export function extractStyle(cache: Cache, plain = false) {
   styleKeys.forEach((key) => {
     const cachePath = key.slice(matchPrefix.length).replace(/%/g, '|');
 
-    const [styleStr, tokenKey, styleId, effectStyle]: [
+    const [styleStr, tokenKey, styleId, effectStyle, clientOnly]: [
       string,
       string,
       string,
       Record<string, string>,
+      boolean,
     ] = cache.cache.get(key)![1];
 
+    // Skip client only style
+    if (clientOnly) {
+      return;
+    }
+
     // ====================== Style ======================
     styleText += toStyleStr(styleStr, tokenKey, styleId);
 

diff --git a/tests/server.spec.tsx b/tests/server.spec.tsx
@@ -180,6 +180,34 @@ describe('SSR', () => {
     getStyleAndHash.mockRestore();
   });
 
+  it('not extract clientOnly style', () => {
+    const Client = ({ children }: { children?: React.ReactNode }) => {
+      const [token] = useCacheToken<DerivativeToken>(theme, [baseToken]);
+
+      const wrapSSR = useStyleRegister(
+        { theme, token, path: ['.client'], clientOnly: true },
+        () => ({
+          '.client': {
+            backgroundColor: token.primaryColor,
+          },
+        }),
+      );
+
+      return wrapSSR(<div className="box">{children}</div>);
+    };
+
+    const cache = createCache();
+
+    renderToString(
+      <StyleProvider cache={cache}>
+        <Client />
+      </StyleProvider>,
+    );
+
+    const plainStyle = extractStyle(cache, true);
+    expect(plainStyle).not.toContain('client');
+  });
+
   it('default hashPriority', () => {
     // >>> SSR
     const cache = createCache();