We need to add reduceIdents: true option to minified build, to prevent merging animations from separated stylesheets into one.
http://cssnano.co/optimisations/reduceidents/
cc @oleq
This became an issue because CSS files are processed individually by cssnano (css-loader reads .css imports and then passes them to PostCSS). Long story short, cssnano optimizes imports ignorant of the big picture, always using the same defaults, which then collide when merged into an output CSS.
So if FooView imports foo.css containing some @keyframes foo {} and BarView imports bar.css containing @keyframes bar {}, cssnano converts them both to
/* from foo.css */
@keyframes a {}
/* from bar.css */
@keyframes a {}
to save bytes because it is not aware of the collision.
Most helpful comment
This became an issue because CSS files are processed individually by cssnano (css-loader reads
.cssimports and then passes them to PostCSS). Long story short, cssnano optimizes imports ignorant of the big picture, always using the same defaults, which then collide when merged into an output CSS.So if
FooViewimportsfoo.csscontaining some@keyframes foo {}andBarViewimportsbar.csscontaining@keyframes bar {}, cssnano converts them both toto save bytes because it is not aware of the collision.