Different style object handling between regular rendering and SSR
Describe the bug
When the regular "live, reactive" renderer is used, style prop object properties that evaluate to undefined do not end up in the DOM styling attribute.
When using SSR, they do. It results in for example style="--someProperty: undefined". A literal "undefined" string.
This discrepancy hampers reusing the same components between regular apps and SSR.
Excuse me for the lack of a Stackblitz example, I feel this description is clear enough.
Your Example Website or App
Could not properly set up standalone SSR. Behavior surfaced when using SSR though Astro.
Steps to Reproduce the Bug or Issue
- Create a trivial component that renders an intrinsic element (eg
<div/>) with a style object,style={{'--someProperty': undefined}}. - Render this component in a regular SPA environment, observe what ends up in the DOM under its' rendered element's
styleattribute. - Render this same component with SSR, observe what ends up in the DOM under its' rendered element's
styleattribute.
Expected behavior
I expect the behavior to be consistent. And preferably lean towards the side of not including undefined properties. This is a useful pattern. Manually adding only defined keys diminishes the declarative developer experience when writing components.
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: all
- Version: solid 1.5.4
Additional context
No response
I've actually found that they both produce undefined for CSS variables which is interesting. Atleast in Chrome. I guess with CSS vars the browser doesn't assume it knows what valid values are. For normal CSS properties yeah in the client it does remove them and on the server it serializes "undefined" so at minimal probably worth adding a style helper for SSR. Which suggests this should wait until the next minor.