Updating style attribute with object doesn't remove previous css properties

[waynebaylor]

When re-rendering an element with a style object the given css properties are applied/updated, but other existing css properties aren't cleared.

For example I expected this paragraph of text to end up with just the color: goldenrod css property. However it really ends up with both font-weight: bold and color: goldenrod because the existing font-weight style attribute isn't cleared.

function* App(this: Context) {
  for (const { style } of this) {
    yield (
      <p style={style}>
        Nullam tellus ipsum, bibendum vel ligula sit amet, finibus ullamcorper
        ante.
      </p>
    );
  }
}

renderer.render(
  <App style="font-weight:bold;" />, document.getElementById("app")
);

renderer.render(
  <App style={{ color: "goldenrod" }} />, document.getElementById("app")
);

For the style attribute I feel like it would be better to clear out the existing value when it's updated.

[Brian Kim]

Oops! This is fixed in a beta, sorry for the lack of response. I’ve been busy with work stuff 😭.

[Brian Kim]

Fixed in 0.4.0. This is a similar issue to #204. Starting in 0.4, DOM props will be tracked, and missing/changed props will be removed/updated accordingly.