feat: add extraCssVarPrefixCls option to inject CSS vars for additional prefix classes

src/util/genStyleUtils.ts

@@ -92,10 +92,13 @@ export type CSSVarRegisterProps = {
 
 type GetResetStylesConfig = {
   prefix: ReturnType<UsePrefix>;
-  csp: ReturnType<UseCSP>
+  csp: ReturnType<UseCSP>;
 };
 
-export type GetResetStyles<AliasToken extends TokenType> = (token: AliasToken, config?: GetResetStylesConfig) => CSSInterpolation;
+export type GetResetStyles<AliasToken extends TokenType> = (
+  token: AliasToken,
+  config?: GetResetStylesConfig,
+) => CSSInterpolation;
 
 export type GetCompUnitless<CompTokenMap extends TokenMap, AliasToken extends TokenType> = <
   C extends TokenMapKey<CompTokenMap>,
@@ -160,6 +163,18 @@ function genStyleUtils<
        * @default true
        */
       injectStyle?: boolean;
+      /**
+       * Extra prefixCls to inject CSS variables.
+       * 为额外的 prefixCls 注入 CSS 变量（不注入样式）。
+       *
+       * @example
+       * ```typescript
+       * {
+       *   extraCssVarPrefixCls: ['my-comp-compact', 'my-comp-large']
+       * }
+       * ```
+       */
+      extraCssVarPrefixCls?: string[];
     },
   ) {
     const componentName = Array.isArray(component) ? component[0] : component;
@@ -199,6 +214,10 @@ function genStyleUtils<
       const hashId = useStyle(prefixCls, rootCls);
       const cssVarCls = useCSSVar(rootCls);
 
+      options?.extraCssVarPrefixCls?.forEach((customPrefixCls) => {
+        useCSSVar(customPrefixCls);
+      });
+
       return [hashId, cssVarCls] as const;
     };
   }
@@ -208,7 +227,7 @@ function genStyleUtils<
     getDefaultToken: GetDefaultToken<CompTokenMap, AliasToken, C> | undefined,
     options: {
       unitless?: Partial<Record<ComponentTokenKey<CompTokenMap, AliasToken, C>, boolean>>;
-      ignore?: Partial<Record<keyof AliasToken, boolean>>
+      ignore?: Partial<Record<keyof AliasToken, boolean>>;
       deprecatedTokens?: [
         ComponentTokenKey<CompTokenMap, AliasToken, C>,
         ComponentTokenKey<CompTokenMap, AliasToken, C>,

tests/genStyleUtils.test.tsx

@@ -3,7 +3,12 @@ import { render, renderHook } from '@testing-library/react';
 
 import { genStyleUtils } from '../src';
 import type { CSSVarRegisterProps, SubStyleComponentProps } from '@/util/genStyleUtils';
-import { createCache, StyleProvider } from '@ant-design/cssinjs';
+import { createCache, StyleProvider, useCSSVarRegister } from '@ant-design/cssinjs';
+
+jest.mock('@ant-design/cssinjs', () => ({
+  ...jest.requireActual('@ant-design/cssinjs'),
+  useCSSVarRegister: jest.fn(),
+}));
 
 interface TestCompTokenMap {
   TestComponent: object;
@@ -40,14 +45,15 @@ describe('genStyleUtils', () => {
     // Clear head style
     const head = document.head;
     head.innerHTML = '';
+    jest.clearAllMocks();
   });
 
   describe('genStyleHooks', () => {
     it('should generate style hooks', () => {
       const component = 'TestComponent';
       const styleFn = jest.fn();
       const getDefaultToken = {
-        mockCompToken: 'mock'
+        mockCompToken: 'mock',
       };
       const hooks = genStyleHooks(component, styleFn, getDefaultToken);
 
@@ -59,6 +65,35 @@ describe('genStyleUtils', () => {
       expect(current).toBeInstanceOf(Array);
       expect(current).toHaveLength(2);
     });
+
+    it('should inject CSS vars for extraCssVarPrefixCls', () => {
+      const component = 'TestComponent';
+      const styleFn = jest.fn();
+      const getDefaultToken = jest.fn();
+      const hooks = genStyleHooks(component, styleFn, getDefaultToken, {
+        extraCssVarPrefixCls: ['custom-a', 'custom-b'],
+      });
+
+      renderHook(() => hooks('test-prefix'));
+
+      // useCSSVarRegister should be called 3 times: test-prefix, custom-a, custom-b
+      expect(useCSSVarRegister).toHaveBeenCalledTimes(3);
+      expect(useCSSVarRegister).toHaveBeenNthCalledWith(
+        1,
+        expect.objectContaining({ scope: 'test-prefix' }),
+        expect.any(Function),
+      );
+      expect(useCSSVarRegister).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({ scope: 'custom-a' }),
+        expect.any(Function),
+      );
+      expect(useCSSVarRegister).toHaveBeenNthCalledWith(
+        3,
+        expect.objectContaining({ scope: 'custom-b' }),
+        expect.any(Function),
+      );
+    });
   });
 
   describe('genSubStyleComponent', () => {
@@ -158,16 +193,14 @@ describe('genStyleUtils', () => {
           zeroRuntime: true,
         }),
         usePrefix,
-      }
-      const { genComponentStyleHook: gen } = genStyleUtils<
-        TestCompTokenMap,
-        object,
-        object
-      >(config);
+      };
+      const { genComponentStyleHook: gen } = genStyleUtils<TestCompTokenMap, object, object>(
+        config,
+      );
 
       const styleFn = jest.fn();
       const getDefaultToken = jest.fn();
-      const useStyle = gen('TestComponent', styleFn, getDefaultToken)
+      const useStyle = gen('TestComponent', styleFn, getDefaultToken);
 
       const TestComponent: React.FC<SubStyleComponentProps> = ({ prefixCls, rootCls }) => {
         useStyle(prefixCls, rootCls);
@@ -177,6 +210,6 @@ describe('genStyleUtils', () => {
       const { getByTestId } = render(<TestComponent prefixCls="test-prefix" rootCls="test-root" />);
       expect(getByTestId('test-component')).toHaveTextContent('Test');
       expect(usePrefix).not.toHaveBeenCalled();
-    })
-  })
+    });
+  });
 });