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

Question

We're using este.js dev stack in our application which uses webpack to bundle JS & CSS assets. Webpack is configured to use webpack.optimize.UglifyJsPlugin when building for production env and stylus-loader, well the exact loader configuration for production env. is as follows:

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

I then 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 the production build, both keyframe animations are renamed to a (probably some CSS minification by css-clean) and as you can deduce fadeIn overrides arrowBounce because of the same name and higher priority after minification.

Files components/component1.styl and components/component2.styl are being included in their React component file [name].react.js using statements:

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

I'm going nuts. Tried many different solutions but none really worked.

Answer 1

原来它是fresh new feature当时最新的css-loader 0.15.1但是在使用多个单独的CSS文件时它没有正常工作。从0.15.2开始，它可以是turned off。