I'm noticing that I'm not getting any vendor prefixes in IE11 for CSS Grid properties. I believe Styled Components is using autoprefixer under the hood and I think there are some configuration options that can be used with regard to Grid properties and how autoprefixer processes them specifically, but I'm not totally sure how to pull that off. Prefixing seems to "just happen" with no obvious way to configure it. Any ideas?

October 8, 2019 at 11:56am

Jon K. Wheeler@jonkwheeler

11:56am

S-C doesn't handle the prefixing. They use a package that does that for them automatically. You'd have to file an issue with that package. https://github.com/thysultan/stylis.js

January 30, 2020 at 11:54pm

Paul Matthew Jaworski@pjaws

11:54pm

Maybe they should start using a different package. There's been an issue to support IE 11 for over a year in that project and still nothing. I guess they're just gonna wait until IE 11 support isn't needed to close the issue.

Nick Ribal@elektronik

1:34am

Actually, now that [email protected] is released, vendor prefixing is finally configurable. You can customize it to your liking: https://styled-components.com/docs/api#stylesheetmanager

Paul Matthew Jaworski@pjaws

1:42am

That sounds nice, but after looking at the docs, it looks like all I can do with that is disable vendor prefixing or add a stylist plugin that hasn't been maintained in two years.

January 31, 2020 at 12:54pm

Nick Ribal@elektronik

12:54pm

Well maybe you can pick up that maintenance burden? As an alternative, you can check out Emotion, which has a 99% overlap in API with styled-components. Perhaps it does support IE? Though I doubt it, cause both SC and Emotion use Stylis + plugins under the hood.

Personally, over the last 5 years I've refused to work for anyone who still supports IE because I value my sanity.

April 15, 2020 at 7:37pm

Paul Matthew Jaworski@pjaws

7:37pm

That's cute to say, but when 5% of your site's visitors are using IE11, you kind of have to support it or lose money.

September 29, 2020 at 10:43pm

Joel BEAUDON@jojocaster

10:43pm

Not quite an universal solution, but if anyone uses styled-system along with styled-components, I've got a workaround.

Here's my Col component which I use as a grid-column:

export const Col = styled.div<SpaceProps & FlexboxProps & GridProps & DisplayProps>
  ${system({
    gridColumn: {
      //@ts-ignore - msGridColumn isn't part of CSS.Properties for some reason
      properties: ['gridColumn', 'msGridColumn'],
      scale: 'breakpoints',
      transform: value => `${value}`,
    },
    gridRow: {
      //@ts-ignore - msGridRow isn't part of CSS.Properties for some reason
      properties: ['gridRow', 'msGridRow'],
      scale: 'breakpoints',
      transform: value => `${value}`,
    },
  })}

This will add the prefixes for our beloved IE11. Obviously this is a fairly simple example, and there's only so much we can do with prefixes. But with "simple" grids, that'll do the trick (and I'm sure we can do more with the transform attribute).

PS: I'm using a set of breakpoints as a scale so I can pass an object to my component, and handle columns via media queries.

June 22, 2021 at 10:18am

笑傲书生-lonelyBoy@xxy

10:18am

but, stylisPlugins can't find a Grid NPM package