Latest version applies scroll compensation twice

[nulladdict]

Hi, thanks for the library!

Something broke for us while updating to the latest version, and now scroll compensation is applied twice.

Here's the playground link with a reproduction: https://stackblitz.com/edit/react-ts-ijvk6l?file=App.tsx
Here's the direct link to the demo: https://react-ts-ijvk6l.stackblitz.io

Expected behaviour is that green and blue areas would be the same size, but actual behaviour is that the blue area is smaller by the scrollbar width (well, the second compensation).

I dug around a bit, and noticed that the effect inside styleHookSingleton is actually called twice (the demo is not in StrictMode); once — with the correct styles (padding-right: 0;), second time — with padding-right: 15px;, accounting for the compensation margin it just set).

The issue is likely caused by this commit (theKashey/react-style-singleton@581f522), introducing [styles] dependency, which causes the double firing. I can confirm, that editing the file in the devtools and removing the dependency, fixes the behaviour. But I am not sure if that's actually the root cause of the issue and that it's not breaking something else.

Workaround for the time being is just setting padding: 0; !important on the body, which overrides the double compensation.

[theKashey]

Tracked at theKashey/react-remove-scroll-bar#32
Will do my best to deliver the fix as soon as possible.

[theKashey]

v2.5.4 has been released with the fix.

[theKashey]

https://react-ts-g2ondm.stackblitz.io/ seems to work fine when opened in a new tab. Inside stackblitz editor is does not work