Issue with CSS variables in charts since 1.11.12

[mzizka]

We use html-to-image to export images of charts created with Recharts.

We use CSS variables to define colors. These used to export fine in 1.11.11, but the color does not export correctly since 1.11.12. There are workarounds obviously, but I wonder why this breaking change was introduced?

Expected Behavior

You can reproduce the expected behavior on CodeSandbox here.

This version uses html-to-image 1.11.11. When clicking the "Export chart" button, the resulting file contains the red and blue colors.

Current Behavior

The unexpected behavior can be tested on CodeSandbox here.

This version of the sample is based on html-to-image 1.11.13. The blue and red colors are lost in the resulting file.

Possible Solution

The obvious workaround is to inject the colors explicitly instead of using CSS variables. We are using MUI so this is easy enough. But CSS vars do have some advantages when switching themes.

Environment

• html-to-image: 1.11.13
• OS: MacOS 15.3
• Browser: Chrome 133

[biiibooo]

👋 @mzizka

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[mkpanq]

Same issue here. For now, I've decided to lock on 1.11.11 👀