BUG: Don't mutate live DOM nodes when exporting SVG.

Author: epatters

packages/frontend/package.json

@@ -39,7 +39,6 @@
         "@viz-js/viz": "^3.7.0",
         "catcolab-api": "link:../backend/pkg",
         "catlog-wasm": "link:../catlog-wasm/pkg",
-        "computed-style-to-inline-style": "^4.0.0",
         "echarts": "^5.5.1",
         "echarts-solid": "^0.2.0",
         "firebase": "^10.14.0",

packages/frontend/pnpm-lock.yaml

@@ -1,15 +1,13 @@
-import computedStyleToInlineStyle from "computed-style-to-inline-style";
 import download from "js-file-download";
 
 /** Export an `<svg>` element with inlined CSS styles.
 
 Returns the source of an SVG document.
  */
 export function exportSVG(svg: SVGSVGElement): string {
-    computedStyleToInlineStyle(svg, { recursive: true });
-
     const serializer = new XMLSerializer();
-    let source = serializer.serializeToString(svg);
+    const node = computedStyleToInlineStyle(svg);
+    let source = serializer.serializeToString(node);
 
     // Add XML namespaces.
     if (!source.match(/^<svg[^>]*?\sxmlns=(['"`])https?\:\/\/www\.w3\.org\/2000\/svg\1/)) {
@@ -31,3 +29,31 @@ export function downloadSVG(svg: SVGSVGElement, filename: string) {
     const source = exportSVG(svg);
     return download(source, filename, "image/svg+xml");
 }
+
+/** Convert an HTML or SVG element's style from computed to inline.
+
+Adapted from <https://github.com/lukehorvat/computed-style-to-inline-style>
+but fixed to avoid mutating the original DOM node: see issue 4 on that repo.
+ */
+export function computedStyleToInlineStyle(element: StylableElement): Node {
+    const cloned = element.cloneNode(true);
+    recurseComputedStyleToInlineStyle(element, cloned as StylableElement);
+    return cloned;
+}
+
+function recurseComputedStyleToInlineStyle(element: StylableElement, cloned: StylableElement) {
+    for (let i = 0; i < element.children.length; i++) {
+        recurseComputedStyleToInlineStyle(
+            element.children[i] as StylableElement,
+            cloned.children[i] as StylableElement,
+        );
+    }
+
+    const computedStyle = getComputedStyle(element);
+    for (const property of computedStyle) {
+        // biome-ignore lint/suspicious/noExplicitAny: types are busted?
+        cloned.style[property as any] = computedStyle.getPropertyValue(property);
+    }
+}
+
+type StylableElement = HTMLElement | SVGElement;