Ignore rule if value is not conditionally defined

[pancaspe87]

Is your feature request related to a problem? Please describe. When using a ternary operator to conditionally apply CSS Compiled will generate either

• a blank CSS variable (if undefined) OR
• a not valid CSS declaration ( if empty string)

This seems to happen only for object syntax

const Component = styled.div({
 background: 'white',
 position: iStickyHeaderEnabled() ? 'sticky' : undefined,
 top: iStickyHeaderEnabled() ? 0 : '',
});

Describe the solution you'd like We should ignore rules if the value is undefined or empty string.

Workaround

1. Use spread operator

const Component = styled.div({
 background: 'white',
 ...(isStickyHeaderEnabled() && { 
  position: 'sticky',
  top: 0,
 })
});

2. use the default value.

position: isStickyHeaderEnabled() ? 'sticky' : 'static',

Need to ensure position is not set somewhere else.

3. use template

styled.div`
   ${isStickyHeaderEnabled() ? 'position: sticky' : ''}
`

However, template literals are not recommended