fix(postcss-merge-longhand): preserve fallback for color() function (#1397)

* fix(postcss-merge-longhand): preserve fallback for color() function

Fix #1396

* fix(postcss-merge-longhand): add more color functions to regex

Author: ludofischer

packages/postcss-merge-longhand/src/lib/decl/borders.js

@@ -20,6 +20,8 @@ const { isValidWsc } = require('../validateWsc.js');
 
 const wsc = ['width', 'style', 'color'];
 const defaults = ['medium', 'none', 'currentcolor'];
+const colorMightRequireFallback =
+  /(hsla|rgba|color|hwb|lab|lch|oklab|oklch)\(/i;
 
 /**
  * @param {...string} parts
@@ -832,9 +834,11 @@ function merge(rule) {
     );
 
     if (duplicates.length) {
-      if (/hsla\(|rgba\(/i.test(getColorValue(lastNode))) {
+      if (colorMightRequireFallback.test(getColorValue(lastNode))) {
         const preserve = duplicates
-          .filter((node) => !/hsla\(|rgba\(/i.test(getColorValue(node)))
+          .filter(
+            (node) => !colorMightRequireFallback.test(getColorValue(node))
+          )
           .pop();
 
         duplicates = duplicates.filter((node) => node !== preserve);

packages/postcss-merge-longhand/test/borders.js

@@ -706,6 +706,12 @@ test(
   )
 );
 
+test(
+  'should not merge fallback colours with color function',
+  passthroughCSS(
+    'h1{ border-color:rgb(37,45,49);border-color:color(display-p3 0.1451 0.1765 0.1922 / 1)}'
+  )
+);
 test(
   'should not merge fallback colours with shorthand property',
   processCSS(