Unhandled exception when parsing CSS

[feds01]

Describe the bug

The following error is thrown when trying to compile a project:

Input CSS: {
    
  width: 100%;
  display: block;
  padding: 2em 0;
  text-align: center;

  svg {
    animation: rotate 2s linear infinite;
    z-index: 2;
    margin: auto;
    width: 50px;
    height: 50px;
  }

  circle {
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }
;
  }

Exception: creator is not a function

[JakeLane]

Hi @feds01 , I just tried that CSS and was unable to reproduce it. Could you please provide some extra context including the versions of compiled you're using and the source of the file you're testing? Cheers

[feds01]

@JakeLane I was trying to upgrade a project to use webpack 5 with @compiled/react": "0.10.1. Then I had an error on this component:

import { styled } from '@compiled/react';

const Div = styled.div`
  width: 100%;
  display: block;
  padding: 2em 0;
  text-align: center;
  svg {
    animation: rotate 2s linear infinite;
    z-index: 2;
    margin: auto;
    width: 50px;
    height: 50px;
  }
  circle {
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }
`;