CompileError: Begins at CSS selector undefined

user_14326852 0
Viewed 851

I am trying to host my React project using Vercel. But I encountered an issue and this is the first time I have seen this issue! The project is hosted in Github and the error I get is:

Failed to compile.
Cannot read property 'type' of undefined
CompileError: Begins at CSS selector undefined

enter image description here

Edit:
After some debugging, I found that the issue is with this piece of code:

Item.css:

@keyframes item__overlay_hide {
from {
    transform: rotate3d(0, 0, 0, 0turn);
    opacity: 1;
  }
  to {
    transform: rotate3d(2, -1, -1, -0.2turn);
    background-color: rgb(50, 155, 50);
    opacity: 0;
  }
}

@keyframes item__overlay_show {
  from {
    transform: rotate3d(2, -1, -1, -0.2turn);
    background-color: rgb(50, 155, 50);
    opacity: 0;
  }
  to {
    transform: rotate3d(0);
    opacity: 1;
  }
}

Any help is greatly appreciated !
Thanks !

vercel css
1 Answers

For anyone who is stumbling to this issue:
I just replaced the turn to deg:
From:

@keyframes item__overlay_hide {
from {
    transform: rotate3d(0, 0, 0, 0turn);
    opacity: 1;
  }
  to {
    transform: rotate3d(2, -1, -1, -0.2turn);
    background-color: rgb(50, 155, 50);
    opacity: 0;
  }
}

@keyframes item__overlay_show {
  from {
    transform: rotate3d(2, -1, -1, -0.2turn);
    background-color: rgb(50, 155, 50);
    opacity: 0;
  }
  to {
    transform: rotate3d(0);
    opacity: 1;
  }
}

to:

@keyframes item__overlay_hide {
 from {
    transform: rotate3d(0, 0, 0, 0deg);
    opacity: 1;
  }
  to {
    transform: rotate3d(2, -1, -1, -72deg);
    background-color: rgb(50, 155, 50);
    opacity: 0;
  }
}

@keyframes item__overlay_show {
  from {
    transform: rotate3d(2, -1, -1, -72deg);
    background-color: rgb(50, 155, 50);
    opacity: 0;
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
    opacity: 1;
  }
}
user_143268520
Related