Adding prefix to grid layout

Version

2.1.2

Reproduction

const Container = styled.div`
  display: grid;
`

Expected Behavior

Output:

.sc-sc-gzVnrw {
  display: -ms-grid;
  display: grid;
}

Actual Behavior

Output:

.sc-sc-gzVnrw {
  display: grid;
}

https://github.com/postcss/autoprefixer/issues/603#issuecomment-168979519

[JeroenReumkens]

@kitten @mxstbr I won’t create a new ticket right away, but wanted to check in with you if you think we as Styled Components community could do anything to make sure this will be added to Stylis. It’s a year later, and there is a new issue over at the Stylis repo: https://github.com/thysultan/stylis.js/issues/119

I was thinking that if we’d open an issue at the Styled Components repo as well, we might get some additional attention and find the right people who have the time and knowledge to fix this. I’ve already asked for some directions on how to fix this in the Stylis repo, because I really don’t know where to start in all of the switch cases 😦

I also have a feeling that since Grid is becoming more popular every day, the lack of grid prefixing could one day could become a reason for users not to use Styled Components, which would be a shame I think.

I’ld love to hear your opinion on this.

[Chun-Lin]

autoprefixer 9.7.0 is out, and looks like the performance has been improved. https://github.com/postcss/autoprefixer/releases/tag/9.7.0

Should we consider to switch the prefixer from stylis to autoprefixer? Since autoprefixer does great jobs on CSS Grid.