Conditional ternary CSS rules

[itsdouges]

We've implemented conditional logical expressions in #379. We now need to add support for ternaries.

<div css={[isPrimary ? { color: 'red' } : { color: 'blue' }]} />

<div css={`color $isPrimary ? r b]} />

[alexreardon]

Piling on my support for this one! This a common (and nice) pattern that we leverage across the Atlassian Design System

[kylorhall-atlassian]

This should now work with css(), though does not work with cssMap(…), refer to https://github.com/atlassian-labs/compiled/issues/1750

Tested and this generates as expected:

const fontSizeTrue = css({ color: 'red' });
const fontSizeFalse = css({ color: 'blue' });

<div css={[
  hasTextAncestor ? fontSizeTrue : fontSizeFalse,
}] />

Outputs something like:

const fontSizeTrue = null;
const fontSizeFalse = null;

className: ax([hasTextAncestor ? "_syaz32ev" : "_syazr3uz"])