Consuming keyframes() with interpolation breaks with a specific Babel target/preset configuration.

[kylorhall-atlassian]

Describe the bug

Using the keyframes() function inside of an interpolated string breaks when Babel transforms this to use the "".concat(…) API prior to Compiled running over it.

Same underlying cause as #1789

To Reproduce

1. Write code per the example below.
2. Distribute cjs or esm code with Babel; es2019 works.

const fade = keyframes({
  '0%': { opacity: 0 },
  '20%': { opacity: 1 },
  '60%': { opacity: 1 },
  '100%': { opacity: 0 },
});
const float = keyframes({
  '0%': { transform: 'translateY(0) scale(1)' },
  '100%': { transform: 'translateY(-120px) scale(1.7)' },
});
const styles = css({
  animation: `${fade} ease-in-out, ${float} ease`,
});
<div css={styles} />

You will get broken code such as:

._y44v1gev{animation:var(--_wb63cw)}

With JS such as:

var fade = null;
var float = null;
React.createElement("div", {
  key: index,
  className: (0, _runtime.ax)(["_y44v1gev…"]),
  style: {
    "--_wb63cw": (0, _runtime.ix)("".concat(fade, " ease-in-out, ").concat(float, " ease"))
  }
});

Expected behavior

Expect code such as:

._y44vik89{animation:k102rpwx ease-in-out,k4txmy4 ease}._154iidpf{top:0}
@keyframes k102rpwx{0%{opacity:0}20%{opacity:1}60%{opacity:1}to{opacity:0}}
@keyframes k4txmy4{0%{transform:translateY(0) scale(1)}to{transform:translateY(-90pt) scale(1.7)}}