Web: repeated scoped variable reads cause excessive style recalculations

[eserdeiro]

What happened?

Hi! I noticed a performance issue when updating ScopedVariables on web with multiple components using useCSSVariable.
I reproduced this with 100 components in the linked demo.

What’s causing it

In getWebStyles.ts, each read applies all scoped variables to a shared measurement element and removes them afterward. Consecutive reads with the same scope repeat those mutations, triggering unnecessary style recalculations.

Local fix and results

I changed this to update only values that differ and remove variables missing from the next scope, including when returning to an unscoped context.

In my app, style recalculations dropped from around **867 to 25 per update ( approximately 97% fewer ), with noticeably better responsiveness.

I’d be glad to put together a PR if this approach makes sense. Thanks!

Steps to Reproduce

1. Clone the reproduction repository:

   git clone https://github.com/eserdeiro/uniwind-web-demo.git
   cd uniwind-web-demo

2. Install dependencies and start the web app:

   npm i
   npm run web

3. Open the app in your browser and move the Letter spacing slider continuously.
4. Record the interaction in the browser’s Performance panel and inspect the repeated Recalculate Style events. The visible slowdown will vary depending on your hardware.

Snack or Repository Link

https://github.com/eserdeiro/uniwind-web-demo

Uniwind version

1.12.0

React Native Version

0.86.0

Platforms

Web

Expo

Yes

Additional information 〰

• I've searched for similar issues in this repository and found none

[Brentlok]

Hey!

I’d be glad to put together a PR if this approach makes sense. Thanks!

Sure, I'm looking forward to it, feel free to open one