production folder build issue with gulp

I'm trying to figure out why my animation-name style I added in my css is not copying over from my development environment to my production environment.

This is the code that is in my production environment.

@keyframes a {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.site-main__home-links {
    animation: a 2s
}

This is the code in my development environment.

@-webkit-keyframes fadeButtons {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeButtons {
	from { opacity: 0; }
	to { opacity: 1; }
}

.site-main__home-links {
	-webkit-animation: fadeButtons 2s;
	        animation: fadeButtons 2s;
}

Here's a list of my package.json

Because some of what gulp-cssnano does is to reduce long names where it can to space space, so "fadeButtons" got changed to "a". This is normal and part of the minification process - it Is called "mangling" the names. And your code should work just fine after this minification.

You would have to look at the cssnano documentation to see If mangling names (or certain specified names) can be turned off.