feat: add nonce support to genStyleUtils for CSP compliance

package.json

@@ -57,7 +57,7 @@
     "typescript": "^5.1.6"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^2.1.0",
+    "@ant-design/cssinjs": "^2.1.2",
     "@babel/runtime": "^7.23.2",
     "@rc-component/util": "^1.4.0"
   },

src/util/genStyleUtils.ts

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import type React from 'react';
+import { useMemo } from 'react';
 
 import type { CSSInterpolation, CSSObject, TokenType } from '@ant-design/cssinjs';
 
@@ -251,6 +252,7 @@ function genStyleUtils<
 
     return (rootCls: string | string[]) => {
       const { cssVar, realToken } = useToken();
+      const csp = useCSP();
 
       useCSSVarRegister(
         {
@@ -261,6 +263,7 @@ function genStyleUtils<
           ignore,
           token: realToken,
           scope: rootCls,
+          nonce: () => csp.nonce!,
         },
         () => {
           const defaultToken = getDefaultComponentToken<CompTokenMap, AliasToken, C>(

tests/genStyleUtils.test.tsx

@@ -177,4 +177,53 @@ describe('genStyleUtils', () => {
       expect(usePrefix).not.toHaveBeenCalled();
     });
   });
+
+  describe('nonce support', () => {
+    it('should pass nonce to useCSSVarRegister', () => {
+      const testNonce = 'test-nonce-12345';
+      const config = {
+        usePrefix: jest.fn().mockReturnValue({
+          rootPrefixCls: 'ant',
+          iconPrefixCls: 'anticon',
+        }),
+        useToken: jest.fn().mockReturnValue({
+          theme: {},
+          realToken: { colorPrimary: '#1890ff' },
+          hashId: 'hash',
+          token: { colorPrimary: '#1890ff' },
+          cssVar: {
+            prefix: 'ant',
+            key: 'test-key',
+          },
+        }),
+        useCSP: jest.fn().mockReturnValue({ nonce: testNonce }),
+      };
+
+      const { genStyleHooks: gen } = genStyleUtils<TestCompTokenMap, object, object>(config);
+
+      const useStyle = gen(
+        'TestComponent',
+        () => ({}),
+        () => ({}),
+      );
+
+      const TestComponent: React.FC<{ prefixCls: string }> = ({ prefixCls }) => {
+        useStyle(prefixCls);
+        return <div data-testid="test-component">Test</div>;
+      };
+
+      render(
+        <StyleProvider cache={createCache()}>
+          <TestComponent prefixCls="test-prefix" />
+        </StyleProvider>,
+      );
+
+      // Check that style tags have the nonce attribute
+      const styleTags = document.querySelectorAll('style');
+      const hasNonce = Array.from(styleTags).some(
+        (style) => style.getAttribute('nonce') === testNonce,
+      );
+      expect(hasNonce).toBe(true);
+    });
+  });
 });