classes defined statically in `classList` are missing after reactive overriding
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
I belive it will affect performance, so maybe we can have some kind config flag to enable more consistent approach?
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.