Properties merging and the !important keyword

[SomMeri]

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

[SomMeri]

Somewhat related note: following works fine:

@variable: scale(2,4) !important;

.transform {
  transform+_: rotate(90deg);
  transform+_: @variable;
  transform+_: scale(3,3) !important;
}

result:

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

[seven-phases-max]

Currently reviewing the merging code and stepped into this:

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

I would not. I do not see any reason for the values having !important to form a separate property. This just does not make any sense actually, i.e. notice that in your expected result the non-important properties would not have any styling effect at all (thus this way it's basically equal to removing these non-important properties from the output CSS completely and this is not what we expect form the "merge" feature).

So my expectation for the result of the example would be simply:

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

After all, if I do write a dumb code I expect the dumb result - no guesswork please, e.g.:

.transition {
    color+_: red;
    color+_: !important;
    // -> color+_: red !important; 
}

---

But the issue with duplicated !important stays the same of course.