Сломанная анимация ключевых кадров CSS при использовании css-загрузчика WebPack с плагином UglifyJS

Question

В нашем приложении мы используем стек разработчика este.js, который использует веб-пакет для объединения ресурсов JS и CSS. Webpack настроен на использование webpack.optimize.UglifyJsPlugin при строительстве для производства env и stylus-loader, ну точная конфигурация загрузчика для производства env. как следует:

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

У меня тогда есть 3 стилевых файла:

// 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

После производственной сборки обе ключевые анимации переименовываются в a (возможно, некоторое минимизация CSS css-clean) и как можно вывести fadeIn Переопределение arrowBounce из-за того же имени и более высокого приоритета после минификации.

файлы components/component1.styl а также components/component2.styl включаются в их файл компонента React [name].react.js используя заявления:

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

Я схожу с ума. Перепробовал много разных решений, но ни одно из них не сработало.

Answer 1

Выяснилось, что это была новая новая функция в то время новейшего css-загрузчика 0.15.1, но она не работала правильно при использовании нескольких отдельных файлов CSS. Теперь его можно отключить с 0.15.2.