Bad order of border-color rules when using var with multiple border-color statements.

[MariusKarthaus]

Environment

clean-css@4.2.3
node @ v14.14.0
os linux

Input CSS

:root{
    --border-opacity: 1;
}
.mytest {
  border-color: #3182ce;
  border-color: rgba(49, 130, 206, var(--border-opacity));
  border-top-color: transparent;
}

Actual output CSS

:root {
  --border-opacity: 1;
}
.mytest {
  border-color: transparent #3182ce #3182ce;
  border-color: rgba(49, 130, 206, var(--border-opacity));
}

Expected output CSS

:root {
  --border-opacity: 1;
}
.mytest {
  border-color: rgba(49, 130, 206, var(--border-opacity));
  border-color: transparent #3182ce #3182ce;
}

The issue is arose when using tailwind's @apply border-blue-600 which pulls in the two border-color rules, and then wanting to hide parts of the border.

[jakubpawlowicz]

Hey @MariusKarthaus - I believe the correct output should be

:root{
    --border-opacity: 1;
}
.mytest {
  border-color: #3182ce;
  border-color: rgba(49, 130, 206, var(--border-opacity));
  border-top-color: transparent;
}

which is the same as input.

The reason are

• border-color: #3182ce; can't be moved after border-color: rgba(49, 130, 206, var(--border-opacity)); as the latter is an override which is handled by browsers understanding rgba() and variables
• we can't pull border-top-color: transparent; into both border-colors as it'd result in a longer content

But your bug fix is still valid - clean-css is wrong getting rid of the border-top-color. Let me fix it.