Fixes an edge case in shorthand merging.

There was an issue with understandability when merging two shorthand
properties if one is a component of another.

diff --git a/lib/properties/compactable.js b/lib/properties/compactable.js
index 09b1477..dce0238 100644 (file)
--- a/lib/properties/compactable.js
+++ b/lib/properties/compactable.js
@@ -196,6 +196,7 @@ var compactable = {
 var addFourValueShorthand = function (prop, components, options) {
   options = options || {};
   compactable[prop] = {
+    canOverride: options.canOverride,
     components: components,
     breakUp: options.breakUp || breakUp.fourValues,
     defaultValue: options.defaultValue || '0',

diff --git a/lib/properties/override-compactor.js b/lib/properties/override-compactor.js
index ff7fb30..311a3b8 100644 (file)
--- a/lib/properties/override-compactor.js
+++ b/lib/properties/override-compactor.js
@@ -230,6 +230,11 @@ function compactOverrides(properties, compatibility, validator) {
         if (!left.important && right.important)
           continue;
 
+        component = left.components.filter(nameMatchFilter(right))[0];
+        mayOverride = compactable[right.name].canOverride || canOverride.sameValue;
+        if (!mayOverride(component, right, validator))
+          continue;
+
         if (left.important && !right.important) {
           right.unused = true;
           continue;

diff --git a/test/properties/override-compacting-test.js b/test/properties/override-compacting-test.js
index d935225..6c9f8bb 100644 (file)
--- a/test/properties/override-compacting-test.js
+++ b/test/properties/override-compacting-test.js
@@ -218,6 +218,15 @@ vows.describe(optimize)
           [['border', true , false], ['1px'], ['dotted'], ['red']]
         ]);
       }
+    },
+    'border - hex and rgb colors': {
+      'topic': 'a{border:1px solid #000;border-color:rgba(255,0,0,.5)}',
+      'into': function (topic) {
+        assert.deepEqual(_optimize(topic), [
+          [['border', false, false], ['1px'], ['solid'], ['#000']],
+          [['border-color', false, false], ['rgba(255,0,0,.5)']]
+        ]);
+      }
     }
   })
   .addBatch({