Fixes #354 - !important overriding in shorthands.

Follow up to #346 for overriding important property by another important one in shorthand declarations.

diff --git a/History.md b/History.md
index dc40874..ea4a762 100644 (file)
--- a/History.md
+++ b/History.md
@@ -9,6 +9,7 @@
 
 * Fixed issue [#359](https://github.com/GoalSmashers/clean-css/issues/359) - handling escaped double backslash.
 * Fixed issue [#356](https://github.com/GoalSmashers/clean-css/issues/356) - preserving *+html hack.
+* Fixed issue [#354](https://github.com/GoalSmashers/clean-css/issues/354) - !important overriding in shorthands.
 
 [2.2.15 / 2014-09-01](https://github.com/jakubpawlowicz/clean-css/compare/v2.2.14...v2.2.15)
 ==================

diff --git a/lib/properties/override-compactor.js b/lib/properties/override-compactor.js
index 7c6186c..8b65f6e 100644 (file)
--- a/lib/properties/override-compactor.js
+++ b/lib/properties/override-compactor.js
@@ -114,6 +114,10 @@ module.exports = (function () {
               result.push(t);
               break;
             }
+            if (t.components[iiii].isImportant && token.components[iiii].isImportant && (validator.isValidFunction(t.components[iiii].value) ^ validator.isValidFunction(token.components[iiii].value))) {
+              result.push(t);
+              break;
+            }
           }
         } else if (t.prop !== token.prop || !can(t.value, token.value)) {
           // in every other case, use the override mechanism

diff --git a/test/unit-test.js b/test/unit-test.js
index 29215cc..c4b44c1 100644 (file)
--- a/test/unit-test.js
+++ b/test/unit-test.js
@@ -1600,6 +1600,8 @@ title']{display:block}",
     ],
     'of two properties in one declaration with both as !important but 2nd less understandable': 'a{color:red!important;display:block;color:rgba(0,255,0,.5)!important}',
     'of two properties in one declaration with both as !important but 2nd more understandable': 'a{color:rgba(0,255,0,.5)!important;display:block;color:red!important}',
+    'of two shorthand properties in one declaration with both as !important but 2nd less understandable': 'a{background:red!important;background:rgba(0,255,0,.5)!important}',
+    'of two shorthand properties in one declaration with both as !important but 2nd more understandable': 'a{background:rgba(0,255,0,.5)!important;background:red!important}',
     'of many properties in one declaration': [
       'a{display:inline-block;color:red;font-weight:bolder;font-weight:700;display:block!important;color:#fff}',
       'a{font-weight:bolder;font-weight:700;display:block!important;color:#fff}'