title: Broken CSS keyframe animations when using WebPack's css-loader with UglifyJS plugin
body: <p>We're using <a href="https://github.com/steida/este" rel="noreferrer">este.js dev stack</a> in our application which uses webpack to bundle JS &amp; CSS assets. Webpack <a href="https://github.com/steida/este/blob/f7e52c696a242bffc96b4f777ad9b03a031a3f54/webpack/makeconfig.js" rel="noreferrer">is configured</a> to use <code>webpack.optimize.UglifyJsPlugin</code> when building for production env and <code>stylus-loader</code>, well the exact loader configuration for production env. is as follows:</p>
  
  <pre><code>ExtractTextPlugin.extract(
    'style-loader', 
    'css-loader!stylus-loader'
  );
  </code></pre>
  
  <p>I then have 3 styl files:</p>
  
  <pre><code>// 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
    &amp;.-animated
      animation arrowBounce 2.5s infinite
  
  // components/component2.styl
  @require '../app/animations'
  
  .component2
    &amp;.-visible
      animation fadeIn 2s
  </code></pre>
  
  <p>After the production build, both keyframe animations are renamed to <code>a</code> (probably some CSS minification by <code>css-clean</code>) and as you can deduce <code>fadeIn</code> overrides <code>arrowBounce</code> because of the same name and higher priority after minification. </p>
  
  <p>Files <code>components/component1.styl</code> and <code>components/component2.styl</code> are being included in their React component file <code>[name].react.js</code> using statements: </p>
  
  <pre><code>import 'components/component1.styl'; 
  import 'components/component2.styl';
  </code></pre>
  
  <p>I'm going nuts. Tried many different solutions but none really worked.</p>