Style attribute client vs server rendering inconsistency

[frenzzy]

Describe the bug

The following JSX:

<button style={{
  'background-color': count() ? "white" : '',
  color: count() ? "black" : null,
  display: count() ? "block" : undefined,
}} />

compiles to the following SSR code:

var _v$ = count() ? "white" : '',
   _v$2 = count() ? "black" : null,
   _v$3 = count() ? "block" : undefined;
 _v$ !== _p$.e && ((_p$.e = _v$)  != null ? _el$.style.setProperty("background-color", _v$) : _el$.style.removeProperty("background-color"));
_v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("color", _v$2)           : _el$.style.removeProperty("color"));
_v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("display", _v$3)         : _el$.style.removeProperty("display"));

and the following CSR code:

_$ssr(
  _tmpl$,
  _$ssrHydrationKey(),
    "background-color:" + (count() ? "white" : "") +
  (";color:"            + (count() ? "black" : _$escape(null, true))) +
  (";display:"          + (count() ? "block" : _$escape(undefined, true))),
  _$escape(count())
);

The problem is that CSR produces the expected HTML:

<button></button>

but SSR produces invalid HTML markup (from a validator’s point of view):

<button style="background-color:;color:null;display:undefined"></button>

Your Example Website or App

https://playground.solidjs.com/anonymous/9942822a-9d64-4687-a2f0-e6944534159f

Steps to Reproduce the Bug or Issue

1. Open the playground link.
2. Select different compile modes and compare the output.

Expected behavior

I expect SSR to avoid rendering styles with null and undefined values, similar to CSR.

It would be ideal if the server side did not render style attributes with values of undefined, null, or ''.

Additionally, it would be helpful if an empty string ('') also caused the removal of the corresponding style attribute on the client side.

Screenshots or Videos

No response

Platform

• OS: any
• Browser: any
• Version: 1.9.0

Additional context

No response