production folder build issue with gulp

Question

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

score 1 · Accepted Answer · answered Apr 06 '18 at 15:10

1

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.

answered Apr 06 '18 at 15:10

Mark

143,421
24
428
436

This was the issue, looked it up and it was recommended to add this property cssnano({ reduceIdents: false }) which worked. Thanks for your help. – demond611 Apr 06 '18 at 17:14

production folder build issue with gulp

1 Answers1