Support for older browser styles with tools like PostCSS/ Browserlist

[lanelps]

I'm wanting to know how I can use a style like align-items: end; and have it transpiled to align-items: flex-end; to support older versions of Safari for instance. I've read that because emotion works at run time we can't use a tool like postCSS, which is a build tool, to transpile unsupported css styles in older browsers.

I'm also using the styled component syntax from emotion, and so expecting to be able to write my component styles like so...

const Container = styled.div`
  position: relative:
  width: 100%;
  
  display: flex;
  align-items: end;
`;

To output like this...

.css-om6eg1-Container {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: end;
  align-items: flex-end;
}

And just to mention, I am using Gatsby.js so perhaps there's a Gatsby plugin for what I'm looking for instead?

[Andarist]

You'd have to implement it here: https://github.com/thysultan/stylis/blob/a2fdca83a2377230a66f8d9c5d477bc87c10c188/src/Prefixer.js

[kassenov]

@Andarist would you mind sharing details on how to use the prefixer?

I am working on enabling support for Webview with Chrome 52. It doesn't support quite a bit of options of flexbox. Maybe there is another way that I can also use.