fix(postcss-merge-longhand): don't explode custom properties (#1356)

ludofischer · web-flow · commit 2c699341efb4 · 2022-03-11T11:28:27.000+01:00
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
diff --git 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
@@ -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(
