solid icon indicating copy to clipboard operation
solid copied to clipboard

classes defined statically in `classList` are missing after reactive overriding

Open MrFoxPro opened this issue 1 year ago • 2 comments

Describe the bug

classList={{
  "b-1px b-solid b-red": true,
  "b-1px b-solid b-blue": <reactive value>,
}}

After changing reactive value,b-1px and b-solid tokens will disappear. This is not critical, because of how CSS works, this kind of expression probably is user's mistake, but behaviour is unexpected. We should better handle this case.

Your Example Website or App

https://playground.solidjs.com/anonymous/ad8fd905-fb6e-45cb-8bdc-95ad0dd309f7

classList probably should not use node.classList.toggle directly, or compare individual tokens

MrFoxPro avatar Oct 18 '24 07:10 MrFoxPro

I belive it will affect performance, so maybe we can have some kind config flag to enable more consistent approach?

MrFoxPro avatar Oct 18 '24 07:10 MrFoxPro

I see.. Not using toggle sort of defeats the point of this optimization and diffing it is tricky. I think you are right though that this is unexpected behavior. I doubt we'd change anything here in 1.0 lifespan. But this will definitely weigh in on how we want to handle classList moving forward.

Thanks for reporting.

ryansolid avatar Oct 21 '24 17:10 ryansolid