diff --git a/packages/postcss-merge-longhand/src/__tests__/borders.js b/packages/postcss-merge-longhand/src/__tests__/borders.js index a98857840..2dfb8c803 100644 --- a/packages/postcss-merge-longhand/src/__tests__/borders.js +++ b/packages/postcss-merge-longhand/src/__tests__/borders.js @@ -400,6 +400,24 @@ test( 'h1{border:var(--variable)}', ); +test( + 'should not explode border with initial properties', + passthroughCSS, + 'h1{border:initial}', +); + +test( + 'should not explode border with inherit properties', + passthroughCSS, + 'h1{border:inherit}', +); + +test( + 'should not explode border with unset properties', + passthroughCSS, + 'h1{border:unset}', +); + trbl.forEach(direction => { test( `should not explode border-${direction} with custom properties`, diff --git a/packages/postcss-merge-longhand/src/__tests__/boxBase.js b/packages/postcss-merge-longhand/src/__tests__/boxBase.js index 104e019c6..fa9363d06 100644 --- a/packages/postcss-merge-longhand/src/__tests__/boxBase.js +++ b/packages/postcss-merge-longhand/src/__tests__/boxBase.js @@ -118,17 +118,33 @@ addTests({ fixture: 'h1{box-bottom:var(--variable)}', expected: 'h1{box-bottom:var(--variable)}', }, { - message: 'should not merge box props where one has an unset property', + message: 'should not merge incomplete 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', + message: 'should not merge incomplete 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', + message: 'should not merge incomplete 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 not merge complete box props where one has an unset property', + fixture: 'h1{box-bottom:10px;box-top:unset;box-left:20px;box-right:20px}', + expected: 'h1{box-bottom:10px;box-top:unset;box-left:20px;box-right:20px}', +}, { + message: 'should not merge complete box props where one has an initial property', + fixture: 'h1{box-bottom:10px;box-top:initial;box-left:20px;box-right:20px}', + expected: 'h1{box-bottom:10px;box-top:initial;box-left:20px;box-right:20px}', +}, { + message: 'should not merge complete box props where one has an inherit property', + fixture: 'h1{box-bottom:10px;box-top:initial;box-left:20px;box-right:20px}', + expected: 'h1{box-bottom:10px;box-top:initial;box-left:20px;box-right:20px}', +}, { + message: 'should not merge box props where there is a mix of reserved properties', + fixture: 'h1{box-bottom:unset;box-top:initial;box-left:inherit;box-right:initial}', + expected: 'h1{box-bottom:unset;box-top:initial;box-left:inherit;box-right:initial}', }, { message: 'should merge box props when they are all unset', fixture: 'h1{box-bottom:unset;box-top:unset;box-left:unset;box-right:unset}', diff --git a/packages/postcss-merge-longhand/src/lib/canExplode.js b/packages/postcss-merge-longhand/src/lib/canExplode.js index a55c53002..e902ce346 100644 --- a/packages/postcss-merge-longhand/src/lib/canExplode.js +++ b/packages/postcss-merge-longhand/src/lib/canExplode.js @@ -1,12 +1,9 @@ import isCustomProp from './isCustomProp'; -const isInherit = node => ~node.value.indexOf('inherit'); -const isInitial = node => ~node.value.indexOf('initial'); - export default (prop, includeCustomProps = true) => { if (includeCustomProps && isCustomProp(prop)) { return false; } - return !isInherit(prop) && !isInitial(prop); + return !["inherit", "initial", "unset"].includes(prop.value); }; diff --git a/packages/postcss-merge-longhand/src/lib/canMerge.js b/packages/postcss-merge-longhand/src/lib/canMerge.js index 437f768b2..691572341 100644 --- a/packages/postcss-merge-longhand/src/lib/canMerge.js +++ b/packages/postcss-merge-longhand/src/lib/canMerge.js @@ -2,9 +2,10 @@ import isCustomProp from './isCustomProp'; 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'); + +const hasInherit = node => node.value.includes('inherit'); +const hasInitial = node => node.value.includes('initial'); +const hasUnset = node => node.value.includes('unset'); export default (props, includeCustomProps = true) => { if (props.some(hasInherit) && !props.every(hasInherit)) {