diff --git a/packages/postcss-merge-longhand/src/__tests__/boxBase.js b/packages/postcss-merge-longhand/src/__tests__/boxBase.js index 87d0e48a3..53af84704 100644 --- a/packages/postcss-merge-longhand/src/__tests__/boxBase.js +++ b/packages/postcss-merge-longhand/src/__tests__/boxBase.js @@ -117,4 +117,28 @@ addTests({ message: 'should not explode box props with custom properties', fixture: 'h1{box-bottom:var(--variable)}', expected: 'h1{box-bottom:var(--variable)}', +}, { + message: 'should not merge box props where one has an unset property', + fixture: 'h1{box-bottom:10px;box-top:unset;box-left:20px}', + expected: 'h1{box-bottom:10px;box-top:unset;box-left:20px}', +}, { + message: 'should not merge box props where one has an initial property', + fixture: 'h1{box-bottom:10px;box-top:initial;box-left:20px}', + expected: 'h1{box-bottom:10px;box-top:initial;box-left:20px}', +}, { + message: 'should not merge box props where one has an inherit property', + fixture: 'h1{box-bottom:10px;box-top:initial;box-left:20px}', + expected: 'h1{box-bottom:10px;box-top:initial;box-left:20px}', +}, { + message: 'should merge box props when they are all unset', + fixture: 'h1{box:unset;box-top:unset;box-left:unset}', + expected: 'h1{box:unset}', +}, { + message: 'should merge box props when they are all initial', + fixture: 'h1{box:unset;box-top:unset;box-left:unset}', + expected: 'h1{box:unset}', +}, { + message: 'should merge box props when they are all inherit', + fixture: 'h1{box:unset;box-top:unset;box-left:unset}', + expected: 'h1{box:unset}', }); diff --git a/packages/postcss-merge-longhand/src/lib/canMerge.js b/packages/postcss-merge-longhand/src/lib/canMerge.js index f651e9da3..437f768b2 100644 --- a/packages/postcss-merge-longhand/src/lib/canMerge.js +++ b/packages/postcss-merge-longhand/src/lib/canMerge.js @@ -4,6 +4,7 @@ const important = node => node.important; const unimportant = node => !node.important; const hasInherit = node => ~node.value.indexOf('inherit'); const hasInitial = node => ~node.value.indexOf('initial'); +const hasUnset = node => ~node.value.indexOf('unset'); export default (props, includeCustomProps = true) => { if (props.some(hasInherit) && !props.every(hasInherit)) { @@ -14,6 +15,10 @@ export default (props, includeCustomProps = true) => { return false; } + if (props.some(hasUnset) && !props.every(hasUnset)) { + return false; + } + if (includeCustomProps && props.some(isCustomProp) && !props.every(isCustomProp)) { return false; }