From 2c699341efb42d148f2df9a81211c60191d2265e Mon Sep 17 00:00:00 2001
From: Ludovico Fischer <43557+ludofischer@users.noreply.github.com>
Date: Fri, 11 Mar 2022 11:28:27 +0100
Subject: [PATCH] fix(postcss-merge-longhand): don't explode custom properties
 (#1356)

Fix #1354
Fix #675

- postcss-merge-longhand first 'explodes' longhand declarations to the smallest
unit (for example border-width -> border-top-width).
If the declaration value contains a custom property, it is not possible
to safely explode width/size/color, as the custom property might be equivalent to multiple
space-separated values.

- this plugin lowercases property names as a side-effect of exploding,
so to preserve the old behaviour we lowercase the property that cannot be
exploded

- remove incorrect tests and add tests for new behaviour
---
 .../src/lib/decl/borders.js                   |  4 ++
 .../postcss-merge-longhand/test/borders.js    | 37 ++++++++++---------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/postcss-merge-longhand/src/lib/decl/borders.js b/packages/postcss-merge-longhand/src/lib/decl/borders.js
index 771e99897..6ea2d06c0 100644
--- a/packages/postcss-merge-longhand/src/lib/decl/borders.js
+++ b/packages/postcss-merge-longhand/src/lib/decl/borders.js
@@ -231,6 +231,10 @@ function explode(rule) {
         return false;
       }
 
+      if (isCustomProp(decl)) {
+        decl.prop = decl.prop.toLowerCase();
+        return false;
+      }
       parseTrbl(decl.value).forEach((value, i) => {
         insertCloned(
           /** @type {import('postcss').Rule} */ (decl.parent),
diff --git a/packages/postcss-merge-longhand/test/borders.js b/packages/postcss-merge-longhand/test/borders.js
index ccd77f3a4..968851f3f 100644
--- a/packages/postcss-merge-longhand/test/borders.js
+++ b/packages/postcss-merge-longhand/test/borders.js
@@ -1153,22 +1153,6 @@ test(
   )
 );
 
-test(
-  'Should correctly merge borders with custom properties (#652)',
-  processCSS(
-    'h1{border-width:var(--a);border-style:var(--b);border-color:var(--c)}',
-    'h1{border:var(--a) var(--b) var(--c)}'
-  )
-);
-
-test(
-  'Should correctly merge borders with custom properties (#652) (uppercase)',
-  processCSS(
-    'h1{BORDER-WIDTH:VAR(--A);BORDER-STYLE:VAR(--B);BORDER-COLOR:VAR(--C)}',
-    'h1{border:VAR(--A) VAR(--B) VAR(--C)}'
-  )
-);
-
 test(
   'Should not throw error when a border property value is undefined (#639)',
   processCSS(
@@ -1206,12 +1190,31 @@ test(
 );
 
 test(
-  'should not break border rules mixing custorm and regular properties',
+  'should not break border rules mixing custom and regular properties',
   passthroughCSS(
     'h1{border:var(--v1) solid var(--v2, #abc123);border-right-color:blue}'
   )
 );
 
+test(
+  'should not merge declarations with custom properties #1354',
+  passthroughCSS(
+    'h1{border-width:var(--width); border-style:solid; border-color: hotpink;}'
+  )
+);
+
+test(
+  'should not merge declarations with custom properties #675',
+  passthroughCSS(
+    '.class{border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);}'
+  )
+);
+
+test(
+  'should not merge declarations with custom properties #1044',
+  passthroughCSS('div{border:1px solid;border-color:red var(--grey);}')
+);
+
 test(
   'do not crash',
   processCSS(