Fixes #433 - merging `!important` properties in shorthands.

This happens when a property is not mergeable under normal conditions,
which is 'background-size' only, as it's behind a compatibility flag, e.g.

```css
a {
  background:#fff !important;
  background-size:10px 10px!important;
}
```

was leading to the latter property being lost.

diff --git a/History.md b/History.md
index 6c83a5f..62f9258 100644 (file)
--- a/History.md
+++ b/History.md
@@ -12,6 +12,7 @@
 ==================
 
 * Fixed issue [#414](https://github.com/GoalSmashers/clean-css/issues/414) - source maps position fallback.
+* Fixed issue [#433](https://github.com/GoalSmashers/clean-css/issues/433) - meging `!important` in shorthands.
 
 [3.0.4 / 2015-01-11](https://github.com/jakubpawlowicz/clean-css/compare/v3.0.3...v3.0.4)
 ==================

diff --git a/lib/properties/override-compactor.js b/lib/properties/override-compactor.js
index 5a6f2c5..aaa2c12 100644 (file)
--- a/lib/properties/override-compactor.js
+++ b/lib/properties/override-compactor.js
@@ -66,6 +66,13 @@ module.exports = (function () {
           continue;
         }
 
+        // If an important component tries to override an important shorthand and it is not yet merged
+        // just make sure it is not lost
+        if (iii > ii && t.isImportant && token.isImportant && t.prop != token.prop && t.isComponentOf(token)) {
+          result.push(t);
+          continue;
+        }
+
         // A nonimportant token can never override an important one
         if (t.isImportant && !token.isImportant) {
           result.push(t);

diff --git a/test/integration-test.js b/test/integration-test.js
index 4ff1be1..a850c2d 100644 (file)
--- a/test/integration-test.js
+++ b/test/integration-test.js
@@ -1986,6 +1986,14 @@ title']{display:block}",
       'div{background-color:#111!important;background-image:url(aaa)!important;background-repeat:repeat!important;background-position:0 0!important;background-attachment:scroll!important;background-size:auto!important}',
       'div{background:url(aaa)#111!important}'
     ],
+    'shorthand important background overriding': [
+      'a{background:url(a.jpg) !important; background-color:#fff !important}',
+      'a{background:url(a.jpg)#fff!important}'
+    ],
+    'shorthand important background overriding by non-mergeable property': [
+      'a{background:url(a.jpg) !important; background-color:#fff !important; background-size:10px 10px !important}',
+      'a{background:url(a.jpg)#fff!important;background-size:10px 10px!important}'
+    ],
     'shorthand border-width': [
       '.t{border-top-width:7px;border-bottom-width:7px;border-left-width:4px;border-right-width:4px}',
       '.t{border-width:7px 4px}'
@@ -2271,6 +2279,10 @@ title']{display:block}",
     'with background-size property': [
       'a{background:none;background-image:url(1.png);background-size:28px 28px}',
       'a{background:url(1.png)0 0/28px 28px}'
+    ],
+    'important overriding': [
+      'a{background:url(a.jpg) !important; background-color:#fff !important; background-size:10px 10px !important}',
+      'a{background:url(a.jpg)0 0/10px 10px #fff!important}'
     ]
   }, { compatibility: '+properties.backgroundSizeMerging' }),
   'multiple backgrounds': cssContext({