Forced reflow due to reading and writing css property in a single loop

[martinarvaiaccedo]

Hey!

In the following block: https://github.com/jhildenbiddle/css-vars-ponyfill/blob/master/src/index.js#L304-L320
reads and writes are happening in the same loop which causes as many forced reflows, as many variables it will attach. Even an M2 mac can hang for 32ms, on our supported devices (Smart TVs) the same process causes a 4 second freeze when setting 20-30 variables.

m2 mac

Samsung Tizen 2021 (a quite performant model)

As a quick workaround, I applied the following patch in our project:

css-vars-ponyfill+2.4.9.patch

Samsung Tizen 2021 with the proposed fix: (from 4000ms to 91ms)