Fixes #344 - merging background-size into shorthand.

* Adds properties.backgroundSizeMerging to control the behaviour.

diff --git a/History.md b/History.md
index 69c386b..0114b1b 100644 (file)
--- a/History.md
+++ b/History.md
@@ -11,6 +11,7 @@
 * Renames `noAggressiveMerging` option into `aggressiveMerging`.
 * Renames `noRebase` option into `rebase`.
 * Speeds up advanced processing by shortening optimize loop.
+* Fixed issue [#344](https://github.com/GoalSmashers/clean-css/issues/344) - merging background-size into shorthand.
 * Fixed issue [#360](https://github.com/GoalSmashers/clean-css/issues/360) - adds 7 extra CSS colors.
 
 [2.2.16 / 2014-09-16](https://github.com/jakubpawlowicz/clean-css/compare/v2.2.15...v2.2.16)

diff --git a/README.md b/README.md
index 875bebb..f58ed75 100644 (file)
--- a/README.md
+++ b/README.md
@@ -226,6 +226,7 @@ with the following options available:
 * `'[+-]colors.opacity'` - - turn on (+) / off (-) `rgba()` / `hsla()` declarations removal
 * `'[+-]properties.iePrefixHack'` - turn on / off IE prefix hack removal
 * `'[+-]properties.ieSuffixHack'` - turn on / off IE suffix hack removal
+* `'[+-]properties.backgroundSizeMerging'` - turn on / off background-size merging into shorthand
 * `'[+-]properties.merging'` - turn on / off property merging based on understandability
 * `'[+-]selectors.ie7Hack'` - turn on / off IE7 selector hack removal (`*+html...`)
 * `'[+-]units.rem'` - turn on / off treating `rem` as a proper unit

diff --git a/lib/properties/override-compactor.js b/lib/properties/override-compactor.js
index e5b321e..5a6f2c5 100644 (file)
--- a/lib/properties/override-compactor.js
+++ b/lib/properties/override-compactor.js
@@ -89,6 +89,13 @@ module.exports = (function () {
           matchingComponent = t.components.filter(nameMatchFilter1)[0];
           if (can(matchingComponent.value, token.value)) {
             // The component can override the matching component in the shorthand
+            var disabledForToken = !compatibility.properties.backgroundSizeMerging &&
+              token.prop.indexOf('background-size') > -1;
+
+            if (disabledForToken) {
+              result.push(t);
+              continue;
+            }
 
             if (!compatibility.properties.merging) {
               // in compatibility mode check if shorthand in not less understandable than merged-in value

diff --git a/lib/utils/compatibility.js b/lib/utils/compatibility.js
index b74a13b..4ab79e6 100644 (file)
--- a/lib/utils/compatibility.js
+++ b/lib/utils/compatibility.js
@@ -6,6 +6,7 @@ var DEFAULTS = {
       opacity: true // rgba / hsla
     },
     properties: {
+      backgroundSizeMerging: true, // background-size to shorthand
       iePrefixHack: false, // underscore / asterisk prefix hacks on IE
       ieSuffixHack: false, // \9 suffix hacks on IE
       merging: true // merging properties into one
@@ -23,6 +24,7 @@ var DEFAULTS = {
       opacity: false
     },
     properties: {
+      backgroundSizeMerging: false,
       iePrefixHack: true,
       ieSuffixHack: true,
       merging: false
@@ -40,6 +42,7 @@ var DEFAULTS = {
       opacity: false
     },
     properties: {
+      backgroundSizeMerging: false,
       iePrefixHack: true,
       ieSuffixHack: true,
       merging: false

diff --git a/test/integration-test.js b/test/integration-test.js
index a2b17ff..e8c119d 100644 (file)
--- a/test/integration-test.js
+++ b/test/integration-test.js
@@ -2099,6 +2099,10 @@ title']{display:block}",
       'a{background:url(1.png) 0 0/28px 28px}'
     ]
   }),
+  'background size with -properties.backgroundSizeMerging': cssContext({
+    'standard': 'div{background:url(image.png) no-repeat center;background-size:cover}',
+    'prefix': 'div{-webkit-background:url(image.png) no-repeat center;-webkit-background-size:cover}'
+  }, { compatibility: '-properties.backgroundSizeMerging' }),
   'multiple backgrounds': cssContext({
     'should not produce longer values': 'p{background:no-repeat;background-position:100% 0,0 100%,100% 100%,50% 50%}'
   }),

diff --git a/test/utils/compatibility-test.js b/test/utils/compatibility-test.js
index 8206ad6..e453312 100644 (file)
--- a/test/utils/compatibility-test.js
+++ b/test/utils/compatibility-test.js
@@ -10,6 +10,7 @@ vows.describe(Compatibility)
         assert.isFalse(options.properties.iePrefixHack);
         assert.isFalse(options.properties.ieSuffixHack);
         assert.isFalse(options.selectors.ie7Hack);
+        assert.isTrue(options.properties.backgroundSizeMerging);
         assert.isTrue(options.properties.merging);
         assert.isTrue(options.units.rem);
         assert.isTrue(options.colors.opacity);
@@ -28,6 +29,7 @@ vows.describe(Compatibility)
         assert.isFalse(options.properties.iePrefixHack);
         assert.isFalse(options.properties.ieSuffixHack);
         assert.isFalse(options.selectors.ie7Hack);
+        assert.isTrue(options.properties.backgroundSizeMerging);
         assert.isTrue(options.properties.merging);
         assert.isFalse(options.units.rem);
         assert.isTrue(options.colors.opacity);
@@ -42,6 +44,7 @@ vows.describe(Compatibility)
         assert.isTrue(options.properties.iePrefixHack);
         assert.isTrue(options.properties.ieSuffixHack);
         assert.isFalse(options.selectors.ie7Hack);
+        assert.isFalse(options.properties.backgroundSizeMerging);
         assert.isFalse(options.properties.merging);
         assert.isFalse(options.units.rem);
         assert.isFalse(options.colors.opacity);
@@ -54,6 +57,7 @@ vows.describe(Compatibility)
         assert.isTrue(options.properties.iePrefixHack);
         assert.isTrue(options.properties.ieSuffixHack);
         assert.isTrue(options.selectors.ie7Hack);
+        assert.isFalse(options.properties.backgroundSizeMerging);
         assert.isFalse(options.properties.merging);
         assert.isFalse(options.units.rem);
         assert.isFalse(options.colors.opacity);
@@ -74,6 +78,7 @@ vows.describe(Compatibility)
         assert.isFalse(options.properties.iePrefixHack);
         assert.isTrue(options.properties.ieSuffixHack);
         assert.isFalse(options.selectors.ie7Hack);
+        assert.isFalse(options.properties.backgroundSizeMerging);
         assert.isFalse(options.properties.merging);
         assert.isFalse(options.units.rem);
         assert.isTrue(options.colors.opacity);
@@ -86,6 +91,7 @@ vows.describe(Compatibility)
         assert.isTrue(options.properties.iePrefixHack);
         assert.isFalse(options.properties.ieSuffixHack);
         assert.isFalse(options.selectors.ie7Hack);
+        assert.isTrue(options.properties.backgroundSizeMerging);
         assert.isTrue(options.properties.merging);
         assert.isTrue(options.units.rem);
         assert.isTrue(options.colors.opacity);
@@ -98,6 +104,7 @@ vows.describe(Compatibility)
         assert.isTrue(options.properties.iePrefixHack);
         assert.isFalse(options.properties.ieSuffixHack);
         assert.isFalse(options.selectors.ie7Hack);
+        assert.isTrue(options.properties.backgroundSizeMerging);
         assert.isTrue(options.properties.merging);
         assert.isFalse(options.units.rem);
         assert.isTrue(options.colors.opacity);