Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
NikitaRevenco opened this issue Oct 4, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@NikitaRevenco
Copy link

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 NikitaRevenco added the bug Something isn't working label Oct 4, 2024
@NikitaRevenco
Copy link
Author

Temporary solution (without disabling rule):

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

@kachkaev
Copy link
Contributor

kachkaev commented Oct 6, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants