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);