feat(theme): add zeroRuntime support

packages/x/components/theme/context.ts

@@ -35,5 +35,5 @@ export interface DesignTokenProviderProps {
    *);
    * ```
    */
-  // zeroRuntime?: boolean;
+  zeroRuntime?: boolean;
 }

packages/x/components/theme/genStyleUtils.ts

@@ -17,8 +17,8 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge
     };
   },
   useToken: () => {
-    const [theme, realToken, hashId, token, cssVar] = useInternalToken();
-    return { theme, realToken, hashId, token, cssVar };
+    const [theme, realToken, hashId, token, cssVar, zeroRuntime] = useInternalToken();
+    return { theme, realToken, hashId, token, cssVar, zeroRuntime };
   },
   useCSP: () => {
     const { csp } = useXProviderContext();

packages/x/components/theme/useToken.ts

@@ -104,13 +104,15 @@ export function useInternalToken(): [
   hashId: string,
   realToken: GlobalToken,
   cssVar?: DesignTokenProviderProps['cssVar'],
+  zeroRuntime?: boolean,
 ] {
   const {
     token: rootDesignToken,
     hashed,
     theme,
     override,
     cssVar: ctxCssVar,
+    zeroRuntime,
   } = React.useContext(antdTheme._internalContext);
   const cssVar = {
     prefix: ctxCssVar?.prefix ?? 'ant',
@@ -134,7 +136,14 @@ export function useInternalToken(): [
       },
     },
   );
-  return [mergedTheme as Theme<any, any>, realToken, hashed ? hashId : '', token, cssVar];
+  return [
+    mergedTheme as Theme<any, any>,
+    realToken,
+    hashed ? hashId : '',
+    token,
+    cssVar,
+    !!zeroRuntime,
+  ];
 }
 
 export default function useToken() {

packages/x/components/x-provider/__tests__/zeroRuntime.test.tsx

@@ -0,0 +1,80 @@
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
+import React from 'react';
+import { render } from '../../../tests/utils';
+import { Bubble, Sender } from '../../index';
+import XProvider from '../index';
+
+/**
+ * Helper to find style tags that contain actual component styles (layout, visual)
+ * as opposed to CSS variable declarations only.
+ *
+ * CSS variable styles only contain `--ant-*` custom property declarations.
+ * Component styles contain actual CSS properties like `display`, `position`, `padding`, etc.
+ */
+function findComponentStyles(selector: string): HTMLStyleElement | undefined {
+  const styleList = Array.from(document.head.querySelectorAll('style'));
+  return styleList.find((style) => {
+    const html = style.innerHTML;
+    if (!html.includes(selector)) return false;
+    // Strip all CSS variable declarations to check if real properties remain
+    const withoutVars = html.replace(/--[\w-]+:[^;]+;/g, '');
+    // If only variable declarations existed, stripping them leaves no property declarations
+    return /[\w-]+:/.test(withoutVars);
+  });
+}
+
+describe('XProvider.zeroRuntime', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  it('should inject component styles at runtime by default', () => {
+    render(
+      <StyleProvider cache={createCache()}>
+        <XProvider>
+          <Bubble content="test" />
+        </XProvider>
+      </StyleProvider>,
+    );
+
+    expect(findComponentStyles('.ant-bubble')).toBeTruthy();
+  });
+
+  it('should skip component style injection when zeroRuntime is true', () => {
+    render(
+      <StyleProvider cache={createCache()}>
+        <XProvider theme={{ zeroRuntime: true }}>
+          <Bubble content="test" />
+        </XProvider>
+      </StyleProvider>,
+    );
+
+    expect(findComponentStyles('.ant-bubble')).toBeFalsy();
+  });
+
+  it('should skip component style injection for multiple components', () => {
+    render(
+      <StyleProvider cache={createCache()}>
+        <XProvider theme={{ zeroRuntime: true }}>
+          <Bubble content="test" />
+          <Sender />
+        </XProvider>
+      </StyleProvider>,
+    );
+
+    expect(findComponentStyles('.ant-bubble')).toBeFalsy();
+    expect(findComponentStyles('.ant-sender')).toBeFalsy();
+  });
+
+  it('should still render component DOM when zeroRuntime is true', () => {
+    const { container } = render(
+      <StyleProvider cache={createCache()}>
+        <XProvider theme={{ zeroRuntime: true }}>
+          <Bubble content="test" />
+        </XProvider>
+      </StyleProvider>,
+    );
+
+    expect(container.querySelector('.ant-bubble')).toBeTruthy();
+  });
+});