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
Post a Comment