Fixes #275 - -ms-transform translate/translate3d overriding.

* Fixes similar cases for other prefixes and unprefixed transform.
clean-css · May 31, 2014 · 1082472 · 1082472
1 parent d0d6ec7
commit 1082472
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/History.md b/History.md
@@ -12,6 +12,7 @@
 * Fixed issue [#190](https://github.com/GoalSmashers/clean-css/issues/190) - uses shorthand to override another shorthand.
 * Fixed issue [#247](https://github.com/GoalSmashers/clean-css/issues/247) - removes deprecated `selectorsMergeMode` switch.
 * Refixed issue [#250](https://github.com/GoalSmashers/clean-css/issues/250) - based on new quotation marks removal.
+* Fixed issue [#275](https://github.com/GoalSmashers/clean-css/issues/275) - handling transform properties.
 
 [2.1.8 / 2014-03-28](https://github.com/GoalSmashers/clean-css/compare/v2.1.7...v2.1.8)
 ==================

diff --git a/lib/properties/optimizer.js b/lib/properties/optimizer.js
@@ -171,6 +171,7 @@ module.exports = function Optimizer(compatibility) {
     for (var i = 0, l = tokens.length; i < l; i++) {
       var token = tokens[i];
       var property = token[0];
+      var value = token[1];
       var isImportant = token[2];
       var isIEHack = token[3];
       var _property = (property == '-ms-filter' || property == 'filter') ?
@@ -202,6 +203,10 @@ module.exports = function Optimizer(compatibility) {
           if (compatibility && !wasIEHack && isIEHack)
             break;
 
+          var _info = processableInfo.processable[_property];
+          if (!isIEHack && !wasIEHack && _info && _info.canOverride && !_info.canOverride(tokens[toOverridePosition][1], value))
+            break;
+
           merged.splice(toOverridePosition, 1);
           properties.splice(toOverridePosition, 1);
         }

diff --git a/lib/properties/processable.js b/lib/properties/processable.js
@@ -65,9 +65,9 @@ module.exports = (function () {
         return false;
 
       // (rgba|hsla)
-      if (validator.isValidRgbaColor(val2) || validator.isValidHslColor(val2) || validator.isValidHslaColor(val2))
+      if (validator.isValidRgbaColor(val2) || validator.isValidHslaColor(val2))
         return true;
-      if (validator.isValidRgbaColor(val1) || validator.isValidHslColor(val1) || validator.isValidHslaColor(val1))
+      if (validator.isValidRgbaColor(val1) || validator.isValidHslaColor(val1))
         return false;
 
       // Functions with the same name can override each other; same values can override each other
@@ -589,6 +589,19 @@ module.exports = (function () {
       canOverride: canOverride.unit,
       defaultValue: 'medium',
       shortestValue: '0'
+    },
+    // transform
+    '-moz-transform': {
+      canOverride: canOverride.sameFunctionOrValue
+    },
+    '-ms-transform': {
+      canOverride: canOverride.sameFunctionOrValue
+    },
+    '-webkit-transform': {
+      canOverride: canOverride.sameFunctionOrValue
+    },
+    'transform': {
+      canOverride: canOverride.sameFunctionOrValue
     }
   };
 

diff --git a/test/unit-test.js b/test/unit-test.js
@@ -1390,7 +1390,11 @@ title']{display:block}",
     'filter treated as background': 'p{background:-moz-linear-gradient();background:-webkit-linear-gradient();filter:"progid:DXImageTransform";background:linear-gradient()}',
     'filter treated as background-image': 'p{background-image:-moz-linear-gradient();background-image:-webkit-linear-gradient();filter:"progid:DXImageTransform";background-image:linear-gradient()}',
     '-ms-filter treated as background': 'p{background:-moz-linear-gradient();background:-webkit-linear-gradient();-ms-filter:"progid:DXImageTransform";background:linear-gradient()}',
-    '-ms-filter treated as background-image': 'p{background-image:-moz-linear-gradient();background-image:-webkit-linear-gradient();-ms-filter:"progid:DXImageTransform";background-image:linear-gradient()}'
+    '-ms-filter treated as background-image': 'p{background-image:-moz-linear-gradient();background-image:-webkit-linear-gradient();-ms-filter:"progid:DXImageTransform";background-image:linear-gradient()}',
+    '-ms-transform with different values #1': 'div{-ms-transform:translate(0,0);-ms-transform:translate3d(0,0,0)}',
+    '-ms-transform with different values #2': 'div{-ms-transform:translate(0,0);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}',
+    'transform with different values #1': 'div{transform:translate(0,0);transform:translate3d(0,0,0)}',
+    'transform with different values #2': 'div{transform:translate(0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}'
   }),
   'same selectors': cssContext({
     'of two non-adjacent selectors': '.one{color:red}.two{color:#00f}.one{font-weight:700}',