From 2e35b4ee05acfca11c88c8defb5603645763c540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 19 Mar 2021 16:23:25 +0800
Subject: [PATCH] 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                     | 23 ++++----
 .../config-provider/__tests__/icon.test.js    | 53 +++++++++++++++++++
 components/config-provider/index.tsx          |  4 +-
 package.json                                  |  4 +-
 4 files changed, 68 insertions(+), 16 deletions(-)
 create mode 100644 components/config-provider/__tests__/icon.test.js

diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 38fdd95f1c..4a9e941702 100644
--- a/components/_util/wave.tsx
+++ b/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);
diff --git a/components/config-provider/__tests__/icon.test.js b/components/config-provider/__tests__/icon.test.js
new file mode 100644
index 0000000000..5cc87f5ad4
--- /dev/null
+++ b/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.exist