Move ListNestingStyles to adoptedStyleSheets for CSP compatibility

Author: thibaudcolas

src/components/ListNestingStyles.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import ListNestingStyles from "./ListNestingStyles";
+
+// Mock getListNestingStyles
+jest.mock("draftjs-conductor", () => ({
+  getListNestingStyles: (max: number) => `.depth-${max} { color: red; }`,
+}));
+
+describe("ListNestingStyles", () => {
+  let originalAdoptedStyleSheets: CSSStyleSheet[];
+  let mockSheet: CSSStyleSheet;
+
+  beforeEach(() => {
+    // Save original adoptedStyleSheets
+    originalAdoptedStyleSheets = [...document.adoptedStyleSheets];
+    // Mock adoptedStyleSheets as a mutable array
+    Object.defineProperty(document, "adoptedStyleSheets", {
+      configurable: true,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      get: () => global.adoptedStyleSheets || [],
+      set: (sheets) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        global.adoptedStyleSheets = sheets;
+      },
+    });
+    document.adoptedStyleSheets = [];
+    // Mock CSSStyleSheet
+    mockSheet = {
+      replaceSync: jest.fn(),
+    } as unknown as CSSStyleSheet;
+    window.CSSStyleSheet = jest.fn(() => mockSheet);
+  });
+
+  afterEach(() => {
+    // Restore adoptedStyleSheets
+    Object.defineProperty(document, "adoptedStyleSheets", {
+      configurable: true,
+      value: originalAdoptedStyleSheets,
+      writable: true,
+    });
+    cleanup();
+  });
+
+  it("injects a stylesheet when mounted with max", () => {
+    render(<ListNestingStyles max={3} />);
+    expect(window.CSSStyleSheet).toHaveBeenCalled();
+    expect(mockSheet.replaceSync).toHaveBeenCalledWith(
+      ".depth-3 { color: red; }",
+    );
+    expect(document.adoptedStyleSheets).toContain(mockSheet);
+  });
+
+  it("removes the stylesheet on unmount", () => {
+    const { unmount } = render(<ListNestingStyles max={2} />);
+    expect(document.adoptedStyleSheets).toContain(mockSheet);
+    unmount();
+    expect(document.adoptedStyleSheets).not.toContain(mockSheet);
+  });
+
+  it("does nothing if max is not provided", () => {
+    render(<ListNestingStyles />);
+    expect(window.CSSStyleSheet).not.toHaveBeenCalled();
+    expect(document.adoptedStyleSheets).toHaveLength(0);
+  });
+});

src/components/ListNestingStyles.tsx

@@ -1,15 +1,37 @@
 import { getListNestingStyles } from "draftjs-conductor";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 interface ListNestingStylesProps {
   max?: number;
 }
 
 /**
- * Generates CSS styles for list items, for a given depth.
+ * Injects CSS styles for list items using adoptedStyleSheets API.
  */
 function Styles({ max }: ListNestingStylesProps) {
-  return max ? <style>{getListNestingStyles(max)}</style> : null;
+  const sheetRef = useRef<CSSStyleSheet | null>(null);
+
+  useEffect(() => {
+    if (!max) return;
+    if (!sheetRef.current) {
+      sheetRef.current = new CSSStyleSheet();
+      sheetRef.current.replaceSync(getListNestingStyles(max));
+    }
+
+    if (!document.adoptedStyleSheets.includes(sheetRef.current)) {
+      document.adoptedStyleSheets.push(sheetRef.current);
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      // Remove the sheet when unmounting or max changes
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+        (s) => s !== sheetRef.current,
+      );
+    };
+  }, [max]);
+
+  return null;
 }
 
 const ListNestingStyles = React.memo(Styles);

tests/environment.js

@@ -7,3 +7,15 @@ global.PKG_VERSION = "";
 
 // stats-js relies on canvas, which does not work with jsdom in Jest.
 window.DISABLE_STATSGRAPH = true;
+
+// Shim CSSStyleSheet and replaceSync
+// See https://github.com/jsdom/jsdom/issues/3766
+class CSSStyleSheet {
+  // eslint-disable-next-line class-methods-use-this
+  replaceSync() {
+    // No-op
+  }
+}
+window.CSSStyleSheet = CSSStyleSheet;
+
+document.adoptedStyleSheets = [];