Enable conditional styling for the css prop

[Mad-Kat]

This was noticed in #240

With our SWC plugin it should be possible to allow dynamic css properties to a certain extend.

So with this PR this works:

const show = Math.random() > 0.5;
<div
  css={css`
    ${() =>
      show &&
      css`
        padding: 20px;
      `}
  `}
/>

and also css variables:

const show = Math.random() > 0.5;
<div
  css={css`
    padding: ${() => show && '20px'};
  `}
/>

Whereas dynamic css props with their own properties still don't work:

<div
  css={css<{$show: boolean}>` // this won't work
    ${({$show}) =>
      show &&
      css`
        padding: 20px;
      `}
  `}
/>

and also css props that use mixins that define their own props aren't allowed either:

const myMixin = css<{$show: boolean}>`
  ${({$show}) =>
    show &&
    css`
      padding: 20px;
    `}
`;
<div
  css={css`
    ${myMixin} // this won't work
  `}
/>

[changeset-bot]

🦋 Changeset detected

Latest commit: 4cc9b58

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
next-yak	Patch
yak-swc	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging #242 will not alter performance

_{Comparing enable-dynamic-css-prop (4cc9b58) with main (5ce7f16)}

Summary

✅ 2 untouched benchmarks