fix: resolve CSS custom properties (var()) in SVG descendants

src/clone-node.ts

@@ -80,7 +80,23 @@ async function cloneChildren<T extends HTMLElement>(
   clonedNode: T,
   options: Options,
 ): Promise<T> {
-  if (isSVGElement(clonedNode)) {
+  if (isSVGElement(nativeNode)) {
+    // SVG was deep-cloned for performance, but CSS custom properties (var())
+    // defined in external stylesheets won't be available in the exported image.
+    // We resolve them by copying getComputedStyle() values — which resolves
+    // var() to their actual computed values — onto each cloned descendant.
+    const nativeDescendants = Array.from(
+      nativeNode.querySelectorAll<HTMLElement>('*'),
+    )
+    const clonedDescendants = Array.from(
+      clonedNode.querySelectorAll<HTMLElement>('*'),
+    )
+    nativeDescendants.forEach((native, i) => {
+      const cloned = clonedDescendants[i]
+      if (cloned) {
+        cloneCSSStyle(native, cloned, options)
+      }
+    })
     return clonedNode
   }
 

test/resources/svg-css-var/node.html

@@ -0,0 +1,9 @@
+<svg
+  id="svg-css-var-test"
+  width="100"
+  height="100"
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect class="var-rect" x="10" y="10" width="80" height="80" />
+</svg>

test/resources/svg-css-var/style.css

@@ -0,0 +1,12 @@
+#dom-node {
+  width: 100px;
+  overflow: hidden;
+}
+
+:root {
+  --rect-fill: rgb(0, 128, 0);
+}
+
+.var-rect {
+  fill: var(--rect-fill);
+}

test/spec/svg.spec.ts

@@ -57,4 +57,29 @@ describe('work with svg element', () => {
       .then(done)
       .catch(done)
   })
+
+  it('should resolve CSS custom properties (var()) in SVG descendants', (done) => {
+    // Regression test for: SVG deep-clone skips cloneCSSStyle for descendants,
+    // leaving CSS var() unresolved in exported image.
+    // Fix in clone-node.ts: walk native/cloned descendant pairs, call cloneCSSStyle.
+    // The CSS defines: :root { --rect-fill: rgb(0, 128, 0); } and .var-rect { fill: var(--rect-fill); }
+    // Without the fix: the cloned rect has no inline style (deep-clone skips descendants).
+    // With the fix: the cloned rect has fill: rgb(0, 128, 0) as an inline style.
+    bootstrap('svg-css-var/node.html', 'svg-css-var/style.css')
+      .then(toSvg)
+      .then(getSvgDocument)
+      .then((doc) => {
+        const rect = doc.querySelector('.var-rect') as SVGRectElement | null
+        expect(rect).not.toBeNull()
+        // After the fix, cloneCSSStyle copies computed styles onto the cloned rect.
+        // The inline style must contain a resolved fill color (not a var() reference).
+        const inlineStyle = rect?.getAttribute('style') ?? ''
+        expect(inlineStyle).not.toContain('var(')
+        // Positive assertion: the fill property must be present and resolved to rgb(0, 128, 0).
+        // This fails without the fix (style would be empty since descendants are skipped).
+        expect(inlineStyle).toMatch(/fill\s*:\s*rgb\(\s*0\s*,\s*128\s*,\s*0\s*\)/)
+      })
+      .then(done)
+      .catch(done)
+  })
 })