From a065f6e15337e2919b04e0b44fb0d8a0667fff94 Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Wed, 20 May 2015 20:52:18 +0100 Subject: [PATCH] Fixes #577 - disables `background-clip` merging into shorthand. It seems to be only compatible with IE10+ so we'll keep it disabled for now. --- History.md | 1 + README.md | 5 +++-- lib/properties/override-compactor.js | 6 ++++-- lib/utils/compatibility.js | 3 +++ test/integration-test.js | 18 ------------------ test/properties/override-compacting-test.js | 19 ++++++++++++++++++- test/utils/compatibility-test.js | 7 +++++++ 7 files changed, 36 insertions(+), 23 deletions(-) diff --git a/History.md b/History.md index 04421f87..413b0de1 100644 --- a/History.md +++ b/History.md @@ -16,6 +16,7 @@ * Fixed issue [#570](https://github.com/jakubpawlowicz/clean-css/issues/570) - rebasing "no-url()" imports. * Fixed issue [#574](https://github.com/jakubpawlowicz/clean-css/issues/574) - rewriting internal URLs. * Fixed issue [#575](https://github.com/jakubpawlowicz/clean-css/issues/575) - missing directory as a `target`. +* Fixed issue [#577](https://github.com/jakubpawlowicz/clean-css/issues/577) - `background-clip` into shorthand. [3.2.10 / 2015-05-14](https://github.com/jakubpawlowicz/clean-css/compare/v3.2.9...v3.2.10) ================== diff --git a/README.md b/README.md index 910233b8..721a59f6 100644 --- a/README.md +++ b/README.md @@ -145,8 +145,8 @@ The output of `minify` method (or the 2nd argument to passed callback) is a hash * `originalSize` - original content size (after import inlining) * `minifiedSize` - optimized content size * `timeSpent` - time spent on optimizations - * `efficiency` - a ratio of output size to input size (e.g. 25% if content was reduced from 100 bytes to 75 bytes) - + * `efficiency` - a ratio of output size to input size (e.g. 25% if content was reduced from 100 bytes to 75 bytes) + #### How to make sure remote `@import`s are processed correctly? In order to inline remote `@import` statements you need to provide a callback to minify method, e.g.: @@ -306,6 +306,7 @@ with the following options available: * `'[+-]colors.opacity'` - - turn on (+) / off (-) `rgba()` / `hsla()` declarations removal * `'[+-]properties.backgroundSizeMerging'` - turn on / off background-size merging into shorthand +* `'[+-]properties.backgroundClipMerging'` - turn on / off background-clip merging into shorthand * `'[+-]properties.colors'` - turn on / off any color optimizations * `'[+-]properties.iePrefixHack'` - turn on / off IE prefix hack removal * `'[+-]properties.ieSuffixHack'` - turn on / off IE suffix hack removal diff --git a/lib/properties/override-compactor.js b/lib/properties/override-compactor.js index 5811dd3a..8357969a 100644 --- a/lib/properties/override-compactor.js +++ b/lib/properties/override-compactor.js @@ -269,10 +269,12 @@ function compactOverrides(properties, compatibility, validator) { component = left.components.filter(nameMatchFilter(right))[0]; if (everyCombination(mayOverride, component, right, validator)) { - var disabledBackgroundSizeMerging = !compatibility.properties.backgroundSizeMerging && component.name.indexOf('background-size') > -1; + var disabledBackgroundMerging = + !compatibility.properties.backgroundClipMerging && component.name.indexOf('background-clip') > -1 || + !compatibility.properties.backgroundSizeMerging && component.name.indexOf('background-size') > -1; var nonMergeableValue = compactable[right.name].nonMergeableValue === right.value[0][0]; - if (disabledBackgroundSizeMerging || nonMergeableValue) + if (disabledBackgroundMerging || nonMergeableValue) continue; if (!compatibility.properties.merging && wouldBreakCompatibility(left, validator)) diff --git a/lib/utils/compatibility.js b/lib/utils/compatibility.js index c39778b4..331c721e 100644 --- a/lib/utils/compatibility.js +++ b/lib/utils/compatibility.js @@ -7,6 +7,7 @@ var DEFAULTS = { }, properties: { backgroundSizeMerging: false, // background-size to shorthand + backgroundClipMerging: false, // background-clip to shorthand colors: true, // any kind of color transformations, like `#ff00ff` to `#f0f` or `#fff` into `red` iePrefixHack: false, // underscore / asterisk prefix hacks on IE ieSuffixHack: false, // \9 suffix hacks on IE @@ -36,6 +37,7 @@ var DEFAULTS = { }, properties: { backgroundSizeMerging: false, + backgroundClipMerging: false, colors: true, iePrefixHack: true, ieSuffixHack: true, @@ -65,6 +67,7 @@ var DEFAULTS = { }, properties: { backgroundSizeMerging: false, + backgroundClipMerging: false, colors: true, iePrefixHack: true, ieSuffixHack: true, diff --git a/test/integration-test.js b/test/integration-test.js index 2c0f68cb..33032d55 100644 --- a/test/integration-test.js +++ b/test/integration-test.js @@ -2104,10 +2104,6 @@ title']{display:block}", 'inside background shorthand': [ 'div{background:content-box #000}', 'div{background:content-box #000}' - ], - 'into background shorthand': [ - 'div{background:#000;background-clip:content-box}', - 'div{background:padding-box content-box #000}' ] }), 'background-origin': cssContext({ @@ -2120,20 +2116,6 @@ title']{display:block}", 'div{background:content-box border-box #000}' ] }), - 'background-clip & background-origin': cssContext({ - 'into background shorthand with background clip': [ - 'div{background:#000;background-origin:content-box;background-clip:padding-box}', - 'div{background:content-box padding-box #000}' - ], - 'into background shorthand merged with background clip': [ - 'div{background:border-box #000;background-clip:padding-box}', - 'div{background:border-box padding-box #000}' - ], - 'with defaults': [ - 'div{background:#000;background-origin:padding-box;background-clip:border-box}', - 'div{background:#000}' - ] - }), 'background size with +properties.backgroundSizeMerging': cssContext({ 'with background-size property': [ 'a{background:none;background-image:url(1.png);background-size:28px 28px}', diff --git a/test/properties/override-compacting-test.js b/test/properties/override-compacting-test.js index 7159db23..1117ad4d 100644 --- a/test/properties/override-compacting-test.js +++ b/test/properties/override-compacting-test.js @@ -91,10 +91,27 @@ vows.describe(optimize) ]); } }, + 'shorthand then longhand - disabled background clip merging': { + 'topic': 'p{background:__ESCAPED_URL_CLEAN_CSS0__;background-clip:padding-box}', + 'into': function (topic) { + assert.deepEqual(_optimize(topic, { properties: { backgroundClipMerging: false } }), [ + [['background', false , false], ['__ESCAPED_URL_CLEAN_CSS0__']], + [['background-clip', false , false], ['padding-box']] + ]); + } + }, + 'shorthand then longhand - enabled background clip merging': { + 'topic': 'p{background:__ESCAPED_URL_CLEAN_CSS0__;background-clip:padding-box}', + 'into': function (topic) { + assert.deepEqual(_optimize(topic, { properties: { backgroundClipMerging: true } }), [ + [['background', false , false], ['__ESCAPED_URL_CLEAN_CSS0__'], ['padding-box']] + ]); + } + }, 'shorthand then longhand - non mergeable value': { 'topic': 'p{background:__ESCAPED_URL_CLEAN_CSS0__;background-color:none}', 'into': function (topic) { - assert.deepEqual(_optimize(topic, { properties: { backgroundSizeMerging: false } }), [ + assert.deepEqual(_optimize(topic), [ [['background', false , false], ['__ESCAPED_URL_CLEAN_CSS0__']], [['background-color', false , false], ['none']] ]); diff --git a/test/utils/compatibility-test.js b/test/utils/compatibility-test.js index a4b7f9de..46cb894c 100644 --- a/test/utils/compatibility-test.js +++ b/test/utils/compatibility-test.js @@ -12,6 +12,7 @@ vows.describe(Compatibility) assert.isTrue(options.colors.opacity); assert.isTrue(options.properties.colors); assert.isFalse(options.properties.backgroundSizeMerging); + assert.isFalse(options.properties.backgroundClipMerging); assert.isFalse(options.properties.iePrefixHack); assert.isFalse(options.properties.ieSuffixHack); assert.isTrue(options.properties.merging); @@ -45,6 +46,7 @@ vows.describe(Compatibility) 'gets merged options': function(options) { assert.isTrue(options.colors.opacity); assert.isFalse(options.properties.backgroundSizeMerging); + assert.isFalse(options.properties.backgroundClipMerging); assert.isTrue(options.properties.colors); assert.isFalse(options.properties.iePrefixHack); assert.isFalse(options.properties.ieSuffixHack); @@ -72,6 +74,7 @@ vows.describe(Compatibility) 'gets template options': function(options) { assert.isFalse(options.colors.opacity); assert.isFalse(options.properties.backgroundSizeMerging); + assert.isFalse(options.properties.backgroundClipMerging); assert.isTrue(options.properties.colors); assert.isTrue(options.properties.iePrefixHack); assert.isTrue(options.properties.ieSuffixHack); @@ -98,6 +101,7 @@ vows.describe(Compatibility) 'gets template options': function(options) { assert.isFalse(options.colors.opacity); assert.isFalse(options.properties.backgroundSizeMerging); + assert.isFalse(options.properties.backgroundClipMerging); assert.isTrue(options.properties.colors); assert.isTrue(options.properties.iePrefixHack); assert.isTrue(options.properties.ieSuffixHack); @@ -134,6 +138,7 @@ vows.describe(Compatibility) 'gets calculated options': function(options) { assert.isTrue(options.colors.opacity); assert.isFalse(options.properties.backgroundSizeMerging); + assert.isFalse(options.properties.backgroundClipMerging); assert.isTrue(options.properties.colors); assert.isFalse(options.properties.iePrefixHack); assert.isTrue(options.properties.ieSuffixHack); @@ -161,6 +166,7 @@ vows.describe(Compatibility) assert.isTrue(options.colors.opacity); assert.isTrue(options.properties.colors); assert.isFalse(options.properties.backgroundSizeMerging); + assert.isFalse(options.properties.backgroundClipMerging); assert.isTrue(options.properties.iePrefixHack); assert.isFalse(options.properties.ieSuffixHack); assert.isTrue(options.properties.merging); @@ -187,6 +193,7 @@ vows.describe(Compatibility) assert.isTrue(options.colors.opacity); assert.isTrue(options.properties.colors); assert.isFalse(options.properties.backgroundSizeMerging); + assert.isFalse(options.properties.backgroundClipMerging); assert.isTrue(options.properties.iePrefixHack); assert.isFalse(options.properties.ieSuffixHack); assert.isTrue(options.properties.merging); -- 2.34.1