webpackwebpack-style-loaderclean-css

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

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.

Solution

  • Turned out it was a fresh new feature of at that time the latest css-loader 0.15.1 but it didn't work correctly when using multiple separate CSS files. It can be turned off now as of 0.15.2.