[BUG] `transition-colors` and `transition-transform` get flagged as applying the same properties

[nikitarevenco]

Describe the bug transition-colors and transition-transform get flagged as applying the same properties

To Reproduce this code:

      <div className="transition-colors transition-transform" />

Expected behavior The rule should not trigger

Environment (please complete the following information):

• OS: Linux
• Version used: 0.6.8

Additional context transition-transform:

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

transition-colors:

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

So maybe it becomes unhappy because of transition-timing-function and transition-duration being applied at once

[nikitarevenco]

Temporary solution (without disabling rule):

      <div className="transition-colors [transition-property:transform]" />

[kachkaev]

I think that the rule is triggering correctly. It matches the list of property names rather than names and values. If we set, say:

.foo { background: red }
.foo { background: green }

we won’t get both red and green for the background. Only one of the values will ‘win’. In this example it’s green because the rule comes second. The same applies to transition-property: value.

You probably want transition-all or [transition-property:a,b,c] (your custom list).