Fixes #941 - breaking up vendor prefixed `animation`.

Why:

* Components of vendor prefixed `animation` were incorrectly derived
  from an unprefixed property leading to errors.

diff --git a/History.md b/History.md
index 033014a..7e642a3 100644 (file)
--- a/History.md
+++ b/History.md
@@ -2,6 +2,7 @@
 ==================
 
 * Fixed issue [#940](https://github.com/jakubpawlowicz/clean-css/issues/940) - handling more `font` keywords.
+* Fixed issue [#941](https://github.com/jakubpawlowicz/clean-css/issues/941) - breaking up vendor prefixed `animation`.
 
 [4.1.1 / 2017-05-08](https://github.com/jakubpawlowicz/clean-css/compare/v4.1.0...v4.1.1)
 ==================

diff --git a/lib/optimizer/level-2/break-up.js b/lib/optimizer/level-2/break-up.js
index b6c9610..b48ccf2 100644 (file)
--- a/lib/optimizer/level-2/break-up.js
+++ b/lib/optimizer/level-2/break-up.js
@@ -65,14 +65,14 @@ function _widthFilter(validator) {
 }
 
 function animation(property, compactable, validator) {
-  var duration = _wrapDefault('animation-duration', property, compactable);
-  var timing = _wrapDefault('animation-timing-function', property, compactable);
-  var delay = _wrapDefault('animation-delay', property, compactable);
-  var iteration = _wrapDefault('animation-iteration-count', property, compactable);
-  var direction = _wrapDefault('animation-direction', property, compactable);
-  var fill = _wrapDefault('animation-fill-mode', property, compactable);
-  var play = _wrapDefault('animation-play-state', property, compactable);
-  var name = _wrapDefault('animation-name', property, compactable);
+  var duration = _wrapDefault(property.name + '-duration', property, compactable);
+  var timing = _wrapDefault(property.name + '-timing-function', property, compactable);
+  var delay = _wrapDefault(property.name + '-delay', property, compactable);
+  var iteration = _wrapDefault(property.name + '-iteration-count', property, compactable);
+  var direction = _wrapDefault(property.name + '-direction', property, compactable);
+  var fill = _wrapDefault(property.name + '-fill-mode', property, compactable);
+  var play = _wrapDefault(property.name + '-play-state', property, compactable);
+  var name = _wrapDefault(property.name + '-name', property, compactable);
   var components = [duration, timing, delay, iteration, direction, fill, play, name];
   var values = property.value;
   var value;

diff --git a/test/optimizer/level-2/break-up-test.js b/test/optimizer/level-2/break-up-test.js
index 514f25b..ef86725 100644 (file)
--- a/test/optimizer/level-2/break-up-test.js
+++ b/test/optimizer/level-2/break-up-test.js
@@ -377,6 +377,59 @@ vows.describe(breakUp)
           assert.deepEqual(components[7].value, [['property-value', 'slidein'], ['property-value', ','], ['property-value', 'slideout']]);
         }
       },
+      'vendor prefixed': {
+        'topic': function () {
+          return _breakUp([
+            [
+              'property',
+              ['property-name', '-moz-animation'],
+              ['property-value', '3s'],
+              ['property-value', 'ease-in'],
+              ['property-value', '1s'],
+              ['property-value', '2'],
+              ['property-value', 'reverse'],
+              ['property-value', 'both'],
+              ['property-value', 'paused'],
+              ['property-value', 'slidein']
+            ]
+          ]);
+        },
+        'has 8 components': function (components) {
+          assert.lengthOf(components, 8);
+        },
+        'has animation-duration': function (components) {
+          assert.deepEqual(components[0].name, '-moz-animation-duration');
+          assert.deepEqual(components[0].value, [['property-value', '3s']]);
+        },
+        'has animation-timing-function': function (components) {
+          assert.deepEqual(components[1].name, '-moz-animation-timing-function');
+          assert.deepEqual(components[1].value, [['property-value', 'ease-in']]);
+        },
+        'has animation-delay': function (components) {
+          assert.deepEqual(components[2].name, '-moz-animation-delay');
+          assert.deepEqual(components[2].value, [['property-value', '1s']]);
+        },
+        'has animation-iteration-count': function (components) {
+          assert.deepEqual(components[3].name, '-moz-animation-iteration-count');
+          assert.deepEqual(components[3].value, [['property-value', '2']]);
+        },
+        'has animation-direction': function (components) {
+          assert.deepEqual(components[4].name, '-moz-animation-direction');
+          assert.deepEqual(components[4].value, [['property-value', 'reverse']]);
+        },
+        'has animation-fill-mode': function (components) {
+          assert.deepEqual(components[5].name, '-moz-animation-fill-mode');
+          assert.deepEqual(components[5].value, [['property-value', 'both']]);
+        },
+        'has animation-play-state': function (components) {
+          assert.deepEqual(components[6].name, '-moz-animation-play-state');
+          assert.deepEqual(components[6].value, [['property-value', 'paused']]);
+        },
+        'has animation-name': function (components) {
+          assert.deepEqual(components[7].name, '-moz-animation-name');
+          assert.deepEqual(components[7].value, [['property-value', 'slidein']]);
+        }
+      }
     },
     'background': {
       'inherit': {

diff --git a/test/optimizer/level-2/properties/override-properties-test.js b/test/optimizer/level-2/properties/override-properties-test.js
index 4a356c8..62f062c 100644 (file)
--- a/test/optimizer/level-2/properties/override-properties-test.js
+++ b/test/optimizer/level-2/properties/override-properties-test.js
@@ -165,6 +165,23 @@ vows.describe(optimizeProperties)
           ]
         ]);
       }
+    },
+    'vendor prefixed animation shorthand and longhand': {
+      'topic': function () {
+        return _optimize('.block{-webkit-animation:1s infinite slidein;-webkit-animation-timing-function:ease-in}');
+      },
+      'into': function (properties) {
+        assert.deepEqual(properties, [
+          [
+            'property',
+            ['property-name', '-webkit-animation', [[1, 7, undefined]]],
+            ['property-value', '1s', [[1, 25, undefined]]],
+            ['property-value', 'ease-in', [[1, 79, undefined]]],
+            ['property-value', 'infinite', [[1, 28, undefined]]],
+            ['property-value', 'slidein', [[1, 37, undefined]]]
+          ]
+        ]);
+      }
     }
   })
   .addBatch({