Refactor canMerge in postcss-merge-longhand

cssnano · Oct 16, 2018 · 5b21145 · 5b21145
1 parent 857075c
commit 5b21145
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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"].every(keyword => prop.value.includes(keyword));
 };
diff --git 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)) {