Properties merging and the !important keyword

Properties marked as !important are merged in two different ways:

• Properties marked with !important keyword are merged separately from normal properties.
• The !important is treated as another identifier expression in a list.

Example:

.transform {
  transform+_: skew(30deg);
  transform+_: rotate(90deg);
  transform+_: scale(2,4) !important;
  transform+_: scale(3,3) !important;
}

.transition {
  transition+: width 2s;
  transition+: height 2s !important;
  transition+: transform 2s !important;
}

compiles into:

.transform {
  transform: skew(30deg) rotate(90deg);
  transform: scale(2, 4) scale(3, 3) !important;
}
.transition {
  transition: width 2s, height 2s !important, transform 2s !important;
}

I would expect it to compile into:

.transform {
  transform: skew(30deg) rotate(90deg);
  transform: scale(2, 4) scale(3, 3) !important;
}
.transition {
  transition: width 2s;
  transition: height 2s, transform 2s !important;
}

The example mixes +_ and +, because I wanted to use code that make some sense. Both +_ and + work the same way, difference is in used expressions. E.g. the transform in the above example works because scale() resembles a function. The transition does not work, but if I replace 2s by s(), then merge will work correctly:

.wrong-css-correct-merge {
  transition+: width 2s;
  transition+: height s() !important;
  transition+: transform s() !important;
}

compiles into:

.wrong-css-correct-merge {
  transition: width 2s;
  transition: height s(), transform s() !important;
}

No source file, test, or entry point is named. Start by reproducing the two merging cases from the issue in the Less compiler's existing test setup, then trace how !important and property merge expressions are parsed and combined. Done means the transition example emits separate normal and !important declarations while the transform behavior remains correct.