refactor: use rc-util for csp (#29804)

* refactor: use rc-util for csp

* update icons version

* add csp support

* update deps

components/_util/wave.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 import { supportRef, composeRef } from 'rc-util/lib/ref';
 import raf from './raf';
 import { ConfigConsumer, ConfigConsumerProps, CSPConfig, ConfigContext } from '../config-provider';
@@ -77,7 +78,6 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     const attributeName = this.getAttributeName();
     node.setAttribute(attributeName, 'true');
     // Not white or transparent or grey
-    styleForPseudo = styleForPseudo || document.createElement('style');
     if (
       waveColor &&
       waveColor !== '#ffffff' &&
@@ -86,21 +86,18 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
       !/rgba\((?:\d*, ){3}0\)/.test(waveColor) && // any transparent rgba color
       waveColor !== 'transparent'
     ) {
-      // Add nonce if CSP exist
-      if (this.csp && this.csp.nonce) {
-        styleForPseudo.nonce = this.csp.nonce;
-      }
-
       extraNode.style.borderColor = waveColor;
-      styleForPseudo.innerHTML = `
+
+      styleForPseudo = updateCSS(
+        `
       [${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls(
-        '',
-      )}-click-animating-node {
+          '',
+        )}-click-animating-node {
         --antd-wave-shadow-color: ${waveColor};
-      }`;
-      if (!node.ownerDocument.body.contains(styleForPseudo)) {
-        node.ownerDocument.body.appendChild(styleForPseudo);
-      }
+      }`,
+        'antd-wave',
+        { csp: this.csp },
+      );
     }
     if (insertExtraNode) {
       node.appendChild(extraNode);

components/config-provider/__tests__/icon.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { SmileOutlined } from '@ant-design/icons';
+import IconContext from '@ant-design/icons/lib/components/Context';
+import ConfigProvider from '..';
+
+describe('ConfigProvider.Icon', () => {
+  beforeEach(() => {
+    // eslint-disable-next-line jest/no-standalone-expect
+    expect(document.querySelectorAll('style')).toHaveLength(0);
+  });
+
+  afterEach(() => {
+    document.querySelectorAll('style').forEach(style => {
+      style.parentNode.removeChild(style);
+    });
+  });
+
+  it('basic', () => {
+    const wrapper = mount(
+      <ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
+        <SmileOutlined />
+      </ConfigProvider>,
+    );
+
+    const styleNode = document.querySelector('style');
+
+    expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
+    expect(styleNode.nonce).toEqual('light');
+  });
+
+  it('nest', () => {
+    const Checker = () => {
+      const { csp } = React.useContext(IconContext);
+      return <div id="csp">{csp.nonce}</div>;
+    };
+
+    const wrapper = mount(
+      <ConfigProvider iconPrefixCls="bamboo" csp={{ nonce: 'light' }}>
+        <ConfigProvider>
+          <SmileOutlined />
+          <Checker />
+        </ConfigProvider>
+      </ConfigProvider>,
+    );
+
+    const styleNode = document.querySelector('style');
+
+    expect(wrapper.exists('.bamboo-smile')).toBeTruthy();
+    expect(styleNode.nonce).toEqual('light');
+    expect(wrapper.find('#csp').text()).toEqual('light');
+  });
+});

components/config-provider/index.tsx

@@ -187,7 +187,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
     },
   );
 
-  const memoIconContextValue = React.useMemo(() => ({ prefixCls: iconPrefixCls }), [iconPrefixCls]);
+  const memoIconContextValue = React.useMemo(() => ({ prefixCls: iconPrefixCls, csp }), [
+    iconPrefixCls,
+  ]);
 
   let childNode = children;
   // Additional Form provider

package.json

@@ -110,7 +110,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
-    "@ant-design/icons": "^4.5.0",
+    "@ant-design/icons": "^4.6.2",
     "@ant-design/react-slick": "~0.28.1",
     "@babel/runtime": "^7.12.5",
     "array-tree-filter": "^2.1.0",
@@ -148,7 +148,7 @@
     "rc-tree-select": "~4.3.0",
     "rc-trigger": "^5.2.1",
     "rc-upload": "~4.2.0-alpha.0",
-    "rc-util": "^5.8.1",
+    "rc-util": "^5.9.4",
     "scroll-into-view-if-needed": "^2.2.25",
     "warning": "^4.0.3"
   },