diff --git a/packages/postcss-merge-longhand/src/lib/decl/borders.js b/packages/postcss-merge-longhand/src/lib/decl/borders.js index a14326f99..2a2c0debb 100644 --- a/packages/postcss-merge-longhand/src/lib/decl/borders.js +++ b/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); diff --git a/packages/postcss-merge-longhand/test/borders.js b/packages/postcss-merge-longhand/test/borders.js index 8d902c7e6..af8cf0da3 100644 --- a/packages/postcss-merge-longhand/test/borders.js +++ b/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(