You can't use virtual with keyframes

TheBosZ commented 6 years ago

Virtual will murder keyframes.

The following:

@keyframes sk-foldCubeAngle {
    0%, 10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

Gets murdered into something like this:

@keyframes sk-foldCubeAngle{._ne:before 0%,._ne:before  10%{transform:perspective(140px) rotateX(-180deg)}}@keyframes sk-foldCubeAngle{._nf:before 0%,._nf:before  10%{opacity:0}}@keyframes sk-foldCubeAngle{._ng:before 25%,._ng:before  75%{transform:perspective(140px) rotateX(0deg)}}@keyframes sk-foldCubeAngle{._nh:before 25%,._nh:before  75%{opacity:1}}@keyframes sk-foldCubeAngle{._ni:before 90%,._ni:before  100%{transform:perspective(140px) rotateY(180deg)}}@keyframes sk-foldCubeAngle{._nj:before 90%,._nj:before  100%{opacity:0}}._nk:before{transform-origin:100% 100%}._nl{transform:scale(1.1) rotateZ(90deg)}._nm:before{animation-delay:0.3s}._nn{transform:scale(1.1) rotateZ(180deg)}._no:before{animation-delay:0.6s}._np{transform:scale(1.1) rotateZ(270deg)}._nq:before{animation-delay:0.9s}

When it should really just be:

@keyframes sk-foldCubeAngle{0%, 10%{transform:perspective(140px) rotateX(-180deg);opacity:0;}25%, 75%{transform:perspective(140px) rotateX(0deg);opacity:1;}90%, 100%{transform:perspective(140px) rotateY(180deg);opacity:0;}}

TheBosZ commented 6 years ago

I tried to fix it, you can see my progress here: https://github.com/TheBosZ/nano-css/tree/kerr/%23209-virtual-keyframes

I'm just doing a naive testing of the prop to see if it's "keyframes" and if it is, just putting it out. I'm not doing it correctly though.

streamich commented 6 years ago

:tada: This issue has been resolved in version 3.3.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

streamich / nano-css

You can't use virtual with keyframes #209