How to change auto-prefixer to behave like Styled Components or Emotion?

[etc-tiago]

Motivation

Browsers process styles in different ways, and like StyledComponents or Emotion already do, apply styles for the browser to process the style as expected.

Details

Currently the style

css({
boxShadow: '10px 44px 5px 0px rgba(0,0,0,0.75)'
})

is transformed into the class

._yf6uil._yf6uil {
    box-shadow: 10px 44px 5px 0px rgba(0,0,0,0.75);
}

and it could add browser compatibility

._yf6uil._yf6uil {
    -webkit-box-shadow: 10px 44px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 44px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 44px 5px 0px rgba(0,0,0,0.75);
}

Are there any plans to add this feature in the future?

[kripod]

Thank you for the question!

Styled Components and Emotion both rely upon Stylis for auto-prefixing CSS properties. As otion has a strict constraint on bundle size, tiny-css-prefixer is used by default. In my experience, it does a great job to retain compatibility with IE 11 and up.

However, if you would like to use the prefixing mechanism of more popular CSS-in-JS libraries, please see how Stylis can be used for prefixing in the Gatsby plugin docs.