feat: Support csp inject (#212)

* feat: Support csp inject

* test: Add test case

src/Dom/dynamicCSS.ts

@@ -0,0 +1,41 @@
+import canUseDom from './canUseDom';
+
+const MARK_KEY = `rc-util-key` as any;
+
+interface Options {
+  attachTo?: Element;
+  csp?: string;
+}
+
+function getContainer(option: Options) {
+  return option.attachTo || document.body;
+}
+
+export function injectCSS(css: string, option: Options = {}) {
+  if (!canUseDom()) {
+    return null;
+  }
+
+  const styleNode = document.createElement('style');
+  styleNode.nonce = option.csp;
+  styleNode.innerHTML = css;
+
+  getContainer(option).appendChild(styleNode);
+
+  return styleNode;
+}
+
+export function updateCSS(css: string, key: string, option: Options = {}) {
+  const container = getContainer(option);
+  const existNode = [...container.children].find(
+    node => node.tagName === 'STYLE' && node[MARK_KEY] === key,
+  );
+
+  if (existNode) {
+    existNode.parentElement.removeChild(existNode);
+  }
+
+  const newNode = injectCSS(css, option);
+  newNode[MARK_KEY] = key;
+  return newNode;
+}

tests/dynamicCSS.test.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable no-eval */
+import { injectCSS, updateCSS } from '../src/Dom/dynamicCSS';
+
+const TEST_STYLE = '.bamboo { context: "light" }';
+
+describe('dynamicCSS', () => {
+  describe('injectCSS', () => {
+    beforeEach(() => {
+      expect(document.querySelectorAll('style')).toHaveLength(0);
+    });
+
+    afterEach(() => {
+      const styles = document.querySelectorAll('style');
+      styles.forEach(style => {
+        style.parentNode.removeChild(style);
+      });
+    });
+
+    it('basic', () => {
+      const style = injectCSS(TEST_STYLE);
+      expect(document.body.contains(style));
+      expect(document.body.querySelector('style').innerHTML).toEqual(
+        TEST_STYLE,
+      );
+    });
+
+    it('with CSP', () => {
+      const style = injectCSS(TEST_STYLE, { csp: 'light' });
+      expect(document.body.contains(style));
+      expect(document.body.querySelector('style').innerHTML).toEqual(
+        TEST_STYLE,
+      );
+      expect(document.body.querySelector('style').nonce).toEqual('light');
+    });
+  });
+
+  describe('updateCSS', () => {
+    beforeAll(() => {
+      updateCSS(TEST_STYLE, 'unique');
+    });
+
+    afterAll(() => {
+      const styles = document.querySelectorAll('style');
+      styles.forEach(style => {
+        style.parentNode.removeChild(style);
+      });
+    });
+
+    it('replace', () => {
+      const REPLACE_STYLE = '.light { context: "bamboo" }';
+      updateCSS(REPLACE_STYLE, 'unique');
+
+      expect(document.querySelectorAll('style')).toHaveLength(1);
+      expect(document.body.querySelector('style').innerHTML).toEqual(
+        REPLACE_STYLE,
+      );
+    });
+
+    it('replace with CSP', () => {
+      const REPLACE_STYLE = '.bamboo { context: "little" }';
+      updateCSS(REPLACE_STYLE, 'unique', { csp: 'only' });
+
+      expect(document.querySelectorAll('style')).toHaveLength(1);
+      expect(document.body.querySelector('style').innerHTML).toEqual(
+        REPLACE_STYLE,
+      );
+      expect(document.body.querySelector('style').nonce).toEqual('only');
+    });
+  });
+});