menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

CSS Grid and prefixing?

October 3, 2019 at 4:50pm

CSS Grid and prefixing?

October 3, 2019 at 4:50pm
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
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
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.
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
like-fill
1
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
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.
like-fill
1

April 15, 2020 at 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
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
but, stylisPlugins can't find a Grid NPM package