anandthakker / doiuse

:bomb: Lint CSS for browser support against caniuse database.
MIT License
1.25k stars 51 forks source link

False positive on transition: grid and transition: grid-* #197

Open yassh opened 3 weeks ago

yassh commented 3 weeks ago

Unlike the Can I use database, doiuse warns against the usage of transition: grid and transition: grid-* like this:

main.css:2:1: CSS Grid animation not supported by: Edge (129,130), Chrome (129,130), Chrome for Android (129) (css-grid-animation)
main.css:3:1: CSS Grid animation not supported by: Edge (129,130), Chrome (129,130), Chrome for Android (129) (css-grid-animation)
main.css:4:1: CSS Grid animation not supported by: Edge (129,130), Chrome (129,130), Chrome for Android (129) (css-grid-animation)
main.css:5:1: CSS Grid animation not supported by: Edge (129,130), Chrome (129,130), Chrome for Android (129) (css-grid-animation)
main.css:7:1: CSS Grid animation not supported by: Edge (129,130), Chrome (129,130), Chrome for Android (129) (css-grid-animation)
main.css:8:1: CSS Grid animation not supported by: Edge (129,130), Chrome (129,130), Chrome for Android (129) (css-grid-animation)
main.css:9:1: CSS Grid animation not supported by: Edge (129,130), Chrome (129,130), Chrome for Android (129) (css-grid-animation)

main.css:

.test {
  transition: grid 1s;
  transition: grid-template 1s;
  transition: grid-template-rows 1s;
  transition: grid-template-columns 1s;

  transition: grid-template-areas 1s;
  transition: grid-auto-rows 1s;
  transition: grid-auto-columns 1s;
}
clshortfuse commented 3 weeks ago

I don't see the problem. Animation of grid is done with transition property. If anything it's missing the animation: rule as well.

grid is a shorthand for the other properties.

yassh commented 3 weeks ago

I found that this issue was caused by errors in the caniuse database.

I submitted a pull request to fix the errors, and it was merged: https://github.com/Fyrd/caniuse/pull/7196