fix: CP nonce should work on cssinjs (#41482)

components/config-provider/__tests__/icon.test.tsx → components/config-provider/__tests__/nonce.test.tsx

@@ -1,8 +1,10 @@
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import { SmileOutlined } from '@ant-design/icons';
 import IconContext from '@ant-design/icons/lib/components/Context';
 import React from 'react';
-import { render } from '../../../tests/utils';
 import ConfigProvider from '..';
+import { render } from '../../../tests/utils';
+import Button from '../../button';
 
 describe('ConfigProvider.Icon', () => {
   beforeEach(() => {
@@ -62,4 +64,21 @@ describe('ConfigProvider.Icon', () => {
     expect(styleNode?.nonce).toEqual('light');
     expect(container.querySelector('#csp')?.innerHTML).toEqual('light');
   });
+
+  it('cssinjs should support nonce', () => {
+    render(
+      <StyleProvider cache={createCache()}>
+        <ConfigProvider csp={{ nonce: 'bamboo' }}>
+          <Button />
+        </ConfigProvider>
+      </StyleProvider>,
+    );
+
+    const styleList = Array.from(document.querySelectorAll('style'));
+
+    expect(styleList.length).toBeTruthy();
+    styleList.forEach((style) => {
+      expect(style.nonce).toEqual('bamboo');
+    });
+  });
 });

components/config-provider/index.tsx

@@ -206,7 +206,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const shouldWrapSSR = iconPrefixCls !== parentContext.iconPrefixCls;
   const csp = customCsp || parentContext.csp;
 
-  const wrapSSR = useStyle(iconPrefixCls);
+  const wrapSSR = useStyle(iconPrefixCls, csp);
 
   const mergedTheme = useTheme(theme, parentContext.theme);
 

components/config-provider/style/index.ts

@@ -1,12 +1,20 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
+import type { CSPConfig } from '..';
 import { resetIcon } from '../../style';
 import { useToken } from '../../theme/internal';
 
-const useStyle = (iconPrefixCls: string) => {
+const useStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
   const [theme, token] = useToken();
+
   // Generate style for icons
   return useStyleRegister(
-    { theme, token, hashId: '', path: ['ant-design-icons', iconPrefixCls] },
+    {
+      theme,
+      token,
+      hashId: '',
+      path: ['ant-design-icons', iconPrefixCls],
+      nonce: () => csp?.nonce!,
+    },
     () => [
       {
         [`.${iconPrefixCls}`]: {

components/theme/util/genComponentStyleHook.ts

@@ -2,11 +2,11 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
-import { genCommonStyle, genLinkStyle } from '../../style';
 import { ConfigContext } from '../../config-provider/context';
+import { genCommonStyle, genLinkStyle } from '../../style';
+import type { ComponentTokenMap, GlobalToken } from '../interface';
 import type { UseComponentStyleResult } from '../internal';
 import { mergeToken, statisticToken, useToken } from '../internal';
-import type { ComponentTokenMap, GlobalToken } from '../interface';
 
 export type OverrideTokenWithoutDerivative = ComponentTokenMap;
 export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
@@ -44,11 +44,19 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
 ) {
   return (prefixCls: string): UseComponentStyleResult => {
     const [theme, token, hashId] = useToken();
-    const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
+    const { getPrefixCls, iconPrefixCls, csp } = useContext(ConfigContext);
     const rootPrefixCls = getPrefixCls();
 
+    // Shared config
+    const sharedConfig: Omit<Parameters<typeof useStyleRegister>[0], 'path'> = {
+      theme,
+      token,
+      hashId,
+      nonce: () => csp?.nonce!,
+    };
+
     // Generate style for all a tags in antd component.
-    useStyleRegister({ theme, token, hashId, path: ['Shared', rootPrefixCls] }, () => [
+    useStyleRegister({ ...sharedConfig, path: ['Shared', rootPrefixCls] }, () => [
       {
         // Link
         '&': genLinkStyle(token),
@@ -56,40 +64,37 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
     ]);
 
     return [
-      useStyleRegister(
-        { theme, token, hashId, path: [component, prefixCls, iconPrefixCls] },
-        () => {
-          const { token: proxyToken, flush } = statisticToken(token);
+      useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
+        const { token: proxyToken, flush } = statisticToken(token);
 
-          const defaultComponentToken =
-            typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
-          const mergedComponentToken = { ...defaultComponentToken, ...token[component] };
+        const defaultComponentToken =
+          typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
+        const mergedComponentToken = { ...defaultComponentToken, ...token[component] };
 
-          const componentCls = `.${prefixCls}`;
-          const mergedToken = mergeToken<
-            TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
-          >(
-            proxyToken,
-            {
-              componentCls,
-              prefixCls,
-              iconCls: `.${iconPrefixCls}`,
-              antCls: `.${rootPrefixCls}`,
-            },
-            mergedComponentToken,
-          );
-
-          const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
-            hashId,
+        const componentCls = `.${prefixCls}`;
+        const mergedToken = mergeToken<
+          TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
+        >(
+          proxyToken,
+          {
+            componentCls,
             prefixCls,
-            rootPrefixCls,
-            iconPrefixCls,
-            overrideComponentToken: token[component],
-          });
-          flush(component, mergedComponentToken);
-          return [genCommonStyle(token, prefixCls), styleInterpolation];
-        },
-      ),
+            iconCls: `.${iconPrefixCls}`,
+            antCls: `.${rootPrefixCls}`,
+          },
+          mergedComponentToken,
+        );
+
+        const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
+          hashId,
+          prefixCls,
+          rootPrefixCls,
+          iconPrefixCls,
+          overrideComponentToken: token[component],
+        });
+        flush(component, mergedComponentToken);
+        return [genCommonStyle(token, prefixCls), styleInterpolation];
+      }),
       hashId,
     ];
   };

package.json

@@ -108,7 +108,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.5.6",
+    "@ant-design/cssinjs": "^1.7.1",
     "@ant-design/icons": "^5.0.0",
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",