Add autoprefixer support for ie10

[otbe]

Hi @threepointone,

we are targeting IE10&11 in our current project. I assume your autoprefixer fork supports flexbox only for IE 11 upwards.

To be more specific: the current flex standard uses justify-content: space-between but the old draft implemented in IE10 uses -ms-flex-pack: justify.

Current result in IE10 / Desired result in IE11:

-ms-flex-pack: space-between;

Desired result in IE10:

-ms-flex-pack: justify;

Any chances to get this in or to workaround this issue?

See this issue for more information:
postcss/autoprefixer#165 (comment)

Thanks 👍

[threepointone]

this should be fixable, give me a day or so. I'll try to think of a workaround too.

[threepointone]

given

{ justifyContent: 'space-between' }

is this the expected css?

.css-1178gq1,[data-css-1178gq1] {
  justify-content:space-between;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  -webkit-box-pack:justify;
}

[otbe]

I think this is correct for IE10 but IE11 will pick up -ms-flex-pack too and needs another value (space-between) instead. This seems to be a IE10/IE11 bug.

[threepointone]

From the looks of it, ie11 doesn't require prefixes?

[otbe]

Yes this is correct, but if there is -ms-flex-pack (maybe as the last entry) IE11 will pick up this instead. That's our observation. Will verify it this evening. :)

[otbe]

Okay it is the other way around. Something went wrong in IE10

Glamor style is

style({
  display: 'flex',
  justifyContent: 'space-between',
  width: '100%',
  height: '46px',
  padding: '0.625em',
  boxSizing: 'border-box',
  backgroundColor: 'rgba(255,255,255, 0.97)',
  boxShadow: '0px 0px 20px 0px transparent',
  transition: 'box-shadow .5s ease-in-out'
})

Result in IE10 (doesnt work)

Result in IE11 (works)

I think justify-content: 'space-between' should be translated to -ms-flex-pack: 'justify' for IE10 (see mentioned autoprefixer issue).

[threepointone]

could you have a try with 2.20.3 and let me know?

[threepointone]

oh wait I think I understand you now. IE11 will pick up ms flex pack along with justify-content. hmm.

[threepointone]

This is turning out to be rather messy. The problem here is that I need to maintain the ability to generate all the css on the server side, which means this might still break when server rendered. I'm open to ideas. What do other folks in production do for this scenario? some media query hack to wrap the value?

[threepointone]

I've had to revert again to the previous behavior because it was causing problems. My best idea right now is to hand code exceptions per browser inside css hacks. I'll think about this and get back to this issue.

[threepointone]

recommended workaround is to whack out the plugins, and add your own prefixer with required behavior. likely that this issue won't be fixed in glamor itself for now.