Fixes #358 - property merging in compatibility mode.
authorJakub Pawlowicz <contact@jakubpawlowicz.com>
Tue, 16 Sep 2014 07:07:26 +0000 (08:07 +0100)
committerJakub Pawlowicz <contact@jakubpawlowicz.com>
Tue, 16 Sep 2014 07:49:57 +0000 (08:49 +0100)
* More understandable properties can't be merged into less understandable shorthands.
* E.g: div{background:linear-gradient(...) #000;background-color:red;}

History.md
lib/properties/optimizer.js
lib/properties/override-compactor.js
test/unit-test.js

index ea4a762..62941ac 100644 (file)
@@ -8,6 +8,7 @@
 ==================
 
 * Fixed issue [#359](https://github.com/GoalSmashers/clean-css/issues/359) - handling escaped double backslash.
+* Fixed issue [#358](https://github.com/GoalSmashers/clean-css/issues/358) - property merging in compatibility mode.
 * 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.
 
index b68f940..ad380de 100644 (file)
@@ -256,7 +256,7 @@ module.exports = function Optimizer(compatibility, aggressiveMerging, context) {
 
     var tokens = Token.tokenize(input);
 
-    tokens = overrideCompactor.compactOverrides(tokens, processable, Token);
+    tokens = overrideCompactor.compactOverrides(tokens, processable, Token, compatibility);
     tokens = shorthandCompactor.compactShorthands(tokens, false, processable, Token);
     tokens = shorthandCompactor.compactShorthands(tokens, true, processable, Token);
 
index 8b65f6e..3fca0c4 100644 (file)
@@ -9,8 +9,8 @@ module.exports = (function () {
     return val1 === val2;
   };
 
-  var compactOverrides = function (tokens, processable, Token) {
-    var result, can, token, t, i, ii, oldResult, matchingComponent;
+  var compactOverrides = function (tokens, processable, Token, compatibility) {
+    var result, can, token, t, i, ii, iiii, oldResult, matchingComponent;
 
     // Used when searching for a component that matches token
     var nameMatchFilter1 = function (x) {
@@ -90,6 +90,25 @@ module.exports = (function () {
           if (can(matchingComponent.value, token.value)) {
             // The component can override the matching component in the shorthand
 
+            if (compatibility) {
+              // in compatibility mode check if shorthand in not less understandable than merged-in value
+              var wouldBreakCompatibility = false;
+              for (iiii = 0; iiii < t.components.length; iiii++) {
+                var o = processable[t.components[iiii].prop];
+                can = (o && o.canOverride) || sameValue;
+
+                if (!can(o.defaultValue, t.components[iiii].value)) {
+                  wouldBreakCompatibility = true;
+                  break;
+                }
+              }
+
+              if (wouldBreakCompatibility) {
+                result.push(t);
+                continue;
+              }
+            }
+
             if ((!token.isImportant || token.isImportant && matchingComponent.isImportant) && willResultInShorterValue(t, token)) {
               // The overriding component is non-important which means we can simply include it into the shorthand
               // NOTE: stuff that can't really be included, like inherit, is taken care of at the final step, not here
@@ -108,7 +127,7 @@ module.exports = (function () {
           // token is a shorthand and is trying to override another instance of the same shorthand
 
           // Can only override other shorthand when each of its components can override each of the other's components
-          for (var iiii = 0; iiii < t.components.length; iiii++) {
+          for (iiii = 0; iiii < t.components.length; iiii++) {
             can = (processable[t.components[iiii].prop] && processable[t.components[iiii].prop].canOverride) || sameValue;
             if (!can(t.components[iiii].value, token.components[iiii].value)) {
               result.push(t);
index c4b44c1..32a5079 100644 (file)
@@ -2183,6 +2183,13 @@ title']{display:block}",
       'a{background:red}'
     ]
   }),
+  'advanced in ie8 mode': cssContext({
+    'plain component to complex shorthand': 'a{background:linear-gradient(to bottom,#000,#fff 4em) #000;background-color:#fff}',
+    'plain component to shorthand': [
+      'a{background:url(bg.png) #000;background-color:#fff}',
+      'a{background:url(bg.png) #fff}'
+    ]
+  }, { compatibility: 'ie8' }),
   'viewport units': cssContext({
     'shorthand margin with viewport width not changed': 'div{margin:5vw}'
   }),