From c22cf6dd57b4bd15cae8d0da160abc85704ddaa2 Mon Sep 17 00:00:00 2001
From: Gustav Bylund <maistho@gmail.com>
Date: Thu, 24 Sep 2020 14:08:36 +0200
Subject: [PATCH] fix(postcss-merge-longhand): allow mixing custom properties
 with regular values when merging

This resolves an issue where merging properties would break the css

Example of the issue
```css
/* This declaration should not be changed */
h1{border:var(--v1) solid var(--v2, #abc123);border-right-color:blue}

/* Before this commit it would be, into this */
h1{border-right-color:var(--v2,#abc123);border-right:var(--v1) solid #00f;border-style:solid;border-width:var(--v1)}
```
---
 .../src/__tests__/borders.js                  |  8 +++++++
 .../src/lib/decl/borders.js                   | 24 ++++---------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/postcss-merge-longhand/src/__tests__/borders.js b/packages/postcss-merge-longhand/src/__tests__/borders.js
index 13591b47a..699ed557f 100644
--- a/packages/postcss-merge-longhand/src/__tests__/borders.js
+++ b/packages/postcss-merge-longhand/src/__tests__/borders.js
@@ -1229,3 +1229,11 @@ test(
 );
 
 test('should handle empty border', processCSS('h1{border:;}', 'h1{border:;}'));
+
+test(
+  'should handle mixed custom property and regular declarations',
+  processCSS(
+    'h1{border:var(--v1) solid var(--v2, #abc123);border-right-color:blue}',
+    'h1{border:var(--v1) solid var(--v2, #abc123);border-right-color:blue}'
+  )
+);
diff --git a/packages/postcss-merge-longhand/src/lib/decl/borders.js b/packages/postcss-merge-longhand/src/lib/decl/borders.js
index f5cf63960..e9b131d85 100644
--- a/packages/postcss-merge-longhand/src/lib/decl/borders.js
+++ b/packages/postcss-merge-longhand/src/lib/decl/borders.js
@@ -54,10 +54,6 @@ function getLevel(prop) {
 
 const isValueCustomProp = (value) => value && !!~value.search(/var\s*\(\s*--/i);
 
-function canMergeValues(values) {
-  return !values.some(isValueCustomProp) || values.every(isValueCustomProp);
-}
-
 function getColorValue(decl) {
   if (decl.prop.substr(-5) === 'color') {
     return decl.value;
@@ -253,10 +249,6 @@ function merge(rule) {
 
     const values = rules.map(({ value }) => value);
 
-    if (!canMergeValues(values)) {
-      return;
-    }
-
     const parsed = values.map((value) => parseWsc(value));
 
     if (!parsed.every(isValidWsc)) {
@@ -266,14 +258,10 @@ function merge(rule) {
     wsc.forEach((d, i) => {
       const value = parsed.map((v) => v[i] || defaults[i]);
 
-      if (canMergeValues(value)) {
-        insertCloned(lastNode.parent, lastNode, {
-          prop: borderProperty(d),
-          value: minifyTrbl(value),
-        });
-      } else {
-        insertCloned(lastNode.parent, lastNode);
-      }
+      insertCloned(lastNode.parent, lastNode, {
+        prop: borderProperty(d),
+        value: minifyTrbl(value),
+      });
     });
 
     rules.forEach(remove);
@@ -294,10 +282,6 @@ function merge(rule) {
       [values[0][i], values[1][i], values[2][i]].join(' ')
     );
 
-    if (!canMergeValues(mapped)) {
-      return;
-    }
-
     const [width, style, color] = rules;
     const reduced = getDistinctShorthands(mapped);