CSS keyframed gradient animation fails on NextJS production build

Question

EDIT: I found that the issue is that during build, the generated css file has the %, from initial-value removed, so it results in just initial-value:0 which is not correct since i'm using perchantage. Is this a webpack/postcss bug?

I am facing a strange issue with an animated component i build for a NextJS site. The animation works in development, but in production it doesn't progress smoothly but in big "steps". The animation is made of the circumference of a circle that progressively completes to a full circle (it starts empty), and while it completes there are some "checkpoints" where a text in the middle of the circle changes.

Here is part of the css style:

@property --p {
  inherits: false;
  initial-value: 0%;
  syntax: '<percentage>';
}

.circle {
  width: 20px;
  height: 20px;

  /* Spazio vuoto all'interno del cerchio */
  border: 5px solid transparent;

  /* Contorno cerchio */
  box-shadow: 0 0 0 1px #fff;

  /* mask-image: radial-gradient(circle, transparent 0% 50%, black 50%); */
  /* border: 2px solid white; */
  border-radius: 50%;
}

.progressive-circle {
  aspect-ratio: 1;
  border-radius: 50%;
  --p: 0%; /* fallback */
  background: conic-gradient(#f8fafc var(--p), #0000 0);

  /* Rendere vuoto il centro */
  mask-image: radial-gradient(circle, transparent 0% 70%, black 70%);
  position: relative;
  /* animation: continuous-circle var(--anim-duration) linear infinite var(--anim-delay); */
}

@keyframes continuous-circle {
  0% {
    --p: 0%;
    @apply opacity-0;
  }
  1% {
    @apply opacity-100;
  }
  33% {
    --p: 33.33%;
  }
  66% {
    --p: 66.66%;
  }
  98% {
    @apply opacity-100;
  }
  100% {
    --p: 100%;
    @apply opacity-0;
  }
}

I'm using a @property value, to dynamically set the radius in perchantage of the conic-gradient under the .progressive-circle class. Another weird issue is that in chrome, inspecting the build CSS throws an error corresponding to the property declaration, saying invalid property and it appears to be referring to the initial-value value im setting, what could be the cause of this error? do you think this is related to the problem im having in production? thanks

chrome error