Roots Discourse

Cssnano renames css keyframes

Hello guys,

I have a little problem with the assets compiled for production. Webpack (cssNano I guess) change the name of my animation keyframes. Eg:
from:

@keyframes maskBrick100
0%
	height: 100%

100%
	height: 88%

to:

@keyframes Lb {
0% {
    height: 100%
}
to {
    height: 88%
}

}

it’s a big problem because when js assign class to div, not work.
Anyone have idea to how fix this or disable this?

Thank you.

Keyframes can take a custom identifier or a string as a name; the latter is enclosed in quotes. A better fix is to use the string identifier for keyframes: e.g.:

@keyframes 'cd-fade-in' {...}
...
animation: 'cd-fade-in'...

The names are preserved in the compiled css without changing the optimization parameters in cssnano.

https://www.w3.org/TR/css-animations-1/#typedef-keyframes-name