Fixes #582 - overriding with prefixed values.

When overriding a longhand property with a vendor-prefixed shorthand
make sure not to loose the former, e.g.

```css
a {
  background-color: red;
  display: block;
  background: -ms-linear-gradient(...);
}
```

diff --git a/History.md b/History.md
index 91b25e3..b6ad824 100644 (file)
--- a/History.md
+++ b/History.md
@@ -19,6 +19,7 @@
 * Fixed issue [#575](https://github.com/jakubpawlowicz/clean-css/issues/575) - missing directory as a `target`.
 * Fixed issue [#577](https://github.com/jakubpawlowicz/clean-css/issues/577) - `background-clip` into shorthand.
 * Fixed issue [#579](https://github.com/jakubpawlowicz/clean-css/issues/579) - `background-origin` into shorthand.
+* Fixed issue [#582](https://github.com/jakubpawlowicz/clean-css/issues/582) - overriding with prefixed values.
 * Fixed issue [#583](https://github.com/jakubpawlowicz/clean-css/issues/583) - URL quoting for SVG data.
 
 [3.2.10 / 2015-05-14](https://github.com/jakubpawlowicz/clean-css/compare/v3.2.9...v3.2.10)

diff --git a/lib/properties/override-compactor.js b/lib/properties/override-compactor.js
index bd0de50..8f5c869 100644 (file)
--- a/lib/properties/override-compactor.js
+++ b/lib/properties/override-compactor.js
@@ -5,6 +5,7 @@ var shallowClone = require('./clone').shallow;
 var hasInherit = require('./has-inherit');
 var restoreShorthands = require('./restore-shorthands');
 var everyCombination = require('./every-combination');
+var sameVendorPrefixesIn = require('./vendor-prefixes').same;
 
 var stringifyProperty = require('../stringifier/one-time').property;
 
@@ -250,6 +251,9 @@ function compactOverrides(properties, compatibility, validator) {
         if (!right.important && left.important)
           continue;
 
+        if (!sameVendorPrefixesIn([left], right.components))
+          continue;
+
         component = right.components.filter(nameMatchFilter(left))[0];
         mayOverride = (compactable[left.name] && compactable[left.name].canOverride) || canOverride.sameValue;
         if (everyCombination(mayOverride, left, component, validator)) {

diff --git a/lib/properties/vendor-prefixes.js b/lib/properties/vendor-prefixes.js
new file mode 100644 (file)
index 0000000..511fd60
--- /dev/null
+++ b/lib/properties/vendor-prefixes.js
@@ -0,0 +1,26 @@
+var VENDOR_PREFIX_PATTERN = /$\-moz\-|\-ms\-|\-o\-|\-webkit\-/;
+
+function prefixesIn(tokens) {
+  var prefixes = [];
+
+  for (var i = 0, l = tokens.length; i < l; i++) {
+    var token = tokens[i];
+
+    for (var j = 0, m = token.value.length; j < m; j++) {
+      var match = VENDOR_PREFIX_PATTERN.exec(token.value[j][0]);
+
+      if (match && prefixes.indexOf(match[0]) == -1)
+        prefixes.push(match[0]);
+    }
+  }
+
+  return prefixes;
+}
+
+function same(left, right) {
+  return prefixesIn(left).sort().join(',') == prefixesIn(right).sort().join(',');
+}
+
+module.exports = {
+  same: same
+};

diff --git a/test/properties/override-compacting-test.js b/test/properties/override-compacting-test.js
index 052aaf5..f916daf 100644 (file)
--- a/test/properties/override-compacting-test.js
+++ b/test/properties/override-compacting-test.js
@@ -57,6 +57,32 @@ vows.describe(optimize)
         ]);
       }
     },
+    'longhand then shorthand - with vendor prefixed function': {
+      'topic': 'p{background-color:red;background:-ms-linear-gradient(top,red,#000)}',
+      'into': function (topic) {
+        assert.deepEqual(_optimize(topic), [
+          [['background-color', false, false], ['red']],
+          [['background', false, false], ['-ms-linear-gradient(top,red,#000)']],
+        ]);
+      }
+    },
+    'longhand then shorthand - with same vendor prefixed function': {
+      'topic': 'p{background-image:-ms-linear-gradient(bottom,black,white);background:-ms-linear-gradient(top,red,#000)}',
+      'into': function (topic) {
+        assert.deepEqual(_optimize(topic), [
+          [['background', false, false], ['-ms-linear-gradient(top,red,#000)']],
+        ]);
+      }
+    },
+    'longhand then shorthand - with different vendor prefixed function': {
+      'topic': 'p{background-image:linear-gradient(bottom,black,white);background:-ms-linear-gradient(top,red,#000)}',
+      'into': function (topic) {
+        assert.deepEqual(_optimize(topic), [
+          [['background-image', false, false], ['linear-gradient(bottom,black,white)']],
+          [['background', false, false], ['-ms-linear-gradient(top,red,#000)']],
+        ]);
+      }
+    },
     'shorthand then longhand': {
       'topic': 'p{background:__ESCAPED_URL_CLEAN_CSS0__ repeat;background-repeat:no-repeat}',
       'into': function (topic) {