Broken CSS keyframe animations when using WebPack's css-loader with UglifyJS plugin -


we're using este.js dev stack in our application uses webpack bundle js & css assets. webpack is configured use webpack.optimize.uglifyjsplugin when building production env , stylus-loader, exact loader configuration production env. follows:

extracttextplugin.extract(   'style-loader',    'css-loader!stylus-loader' ); 

i have 3 styl files:

// app/animations.styl @keyframes arrowbounce   0%     transform translatey(-20px)   50%     transform translatey(-10px)   100%     transform translatey(-20px)  @keyframes fadein   0%     opacity 0   50%     opacity 0   100%     opacity 1  // components/component1.styl @require '../app/animations'  .component1   &.-animated     animation arrowbounce 2.5s infinite  // components/component2.styl @require '../app/animations'  .component2   &.-visible     animation fadein 2s 

after production build, both keyframe animations renamed a (probably css minification css-clean) , can deduce fadein overrides arrowbounce because of same name , higher priority after minification.

files components/component1.styl , components/component2.styl being included in react component file [name].react.js using statements:

import 'components/component1.styl';  import 'components/component2.styl'; 

i'm going nuts. tried many different solutions none worked.

turned out fresh new feature of @ time latest css-loader 0.15.1 didn't work correctly when using multiple separate css files. can turned off of 0.15.2.


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -