[bug] Falsy properties are not discarded

[Looky1173]

const Title = styled("h1")`
  font-weight: bold;
  color: dodgerblue;
  background-color: ${(props) => (props.background ? "lightblue" : null)};
`;

When the background property is null or false, background-color is not stripped from the generated CSS.

CodeSandbox demontrating the issue

[Looky1173]

The culprit seems to be the following line: } else if (val != undefined) { in parse.js. Since "" != undefined" evaluates to true, falsy CSS property values could leak into the DOM. The fix is delightfully simple:

- } else if (val != undefined) {
+ } else if (val) {

It even saves some bytes! I will submit a PR once I have made sure that all the tests pass. 😀

[cristianbote]

Thanks for digging into the issue 🙏

As for that fix, I would assume that of the value is zero that will not go through. I might be wrong though. looking forward to your findings.

[Looky1173]

Oops, you're right! I will try to come up with another solution…

[Looky1173]

@cristianbote I've got it: #492!