Keyframes cannot be declared in template literals

[miloofcroton]

Describe the bug Keyframes cannot be declared in template literals (ie css'' or keyframes''), although they can referenced in template literals.

To Reproduce Steps to reproduce the behavior:

This fails:

const myRotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

But this succeeds:

const myRotate = keyframes({
  from: {
    transform: 'rotate(0deg)',
  },
  to: {
    transform: 'rotate(360deg)',
  }
})

For this reference:

const Keyframe = () => (
  <div css={`
      animation: ${myRotate} 2s linear infinite;
  `}>
    TEST
  </div>
)

Error info:

SyntaxError: This AssignmentExpression was unable to have its styles extracted — try to define them statically using Compiled APIs instead. (This is an error on an internal node. Probably an internal error.)
    at Array.forEach (<anonymous>)
    at Array.reduce (<anonymous>)

Expected behavior I expect to be able to write keyframes using template literals as explained in the documentation: https://compiledcssinjs.com/docs/api-keyframes

Screenshots

Error screenshot:

Dependencies:

    "@compiled/react": "^0.17.1",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"

Desktop (please complete the following information):

• OS: MacOS
• Browser: Firefox v125

Additional context I'm using the babel plugin "@compiled/babel-plugin" with the /** @jsxImportSource @compiled/react */ at the top of every file.

I'm new to the library, so there is always the chance that I'm doing something wrong.

[miloofcroton]

Looks like I'm having an almost identical issue with declaring css tagged template literals outside of the components, so it's not specifically an issue with the keyframes function. Is this some sort of clash between Compiled, Next, and/or Babel?

I'm able to remove the css, making it a simple template literal, and the code compiles correctly. However, I'm not able to do the same thing with removing the keyframe tag and have that template literal work. So, I guess they appear to be the same, but the workaround would have to be slightly different.

[miloofcroton]

Ok, I figured out a solution: I was using only the babel config option. When I undid the babel config changes and instead used the webpack config changes, everything was resolved. I am now able to use css and keyframe tagged template literals. Maybe this edge case should be mentioned in docs?