Errors with conditional rules that don't specify a default

[JakeLane]

Is your feature request related to a problem? Please describe. We currently throw an error when Compiled is not able to handle conditional rules without a default value. https://github.com/atlassian-labs/compiled/blob/371ee8975be8608d0ffece49b1b7f0928c18b8c6/packages/babel-plugin/src/styled/index.tsx#L169

However, there a couple of things to address

1. error is not often clear; the suggested workaround may not apply to the situation For example, given

const Component = styled.div`
    cursor: default;
    ${({ hasValue }) =>
        !hasValue &&
        `
        position: absolute;
        opacity: 0;
        pointer-events: none;
        `}
`;

this will throw the error. Change it to !hasValue ? '' : '' then it will work

2. usability concern. See the following example:

&:hover {
  css-property: ${props => condition && 'value'};
}

To achieve the same result in Compiled we need to do the following

${props => condition && {
  ':hover': {
    cssProperty: 'value'
  }
}}

Describe the solution you'd like

1. Review error handling
2. We can simply support the above syntax easily enough but we should consider the impact of supporting "invalid" syntax. We may want to provide a "preferred" linting pattern to ensure the dev experience isn't impacted.

[madeleineostoja]

Just my $0.02 but I think supporting the first example above, where I assume the whole hover block would be stripped if false, is too magical.

Maybe not throwing for invalid syntax would be good, or just changing it to a warning. Even if you just output invalid css like cssProperty: false the browser would ignore it anyway. Kinda hacky but that’s up to the developer imo

[pancaspe87]

Something else to consider https://github.com/atlassian-labs/compiled/issues/1240