How to get auto-prefixing with vanilla Emotion?

Description:

I’ve re-read multiple times all the different areas of the documentation that refers to vanilla Emotion usage:

https://emotion.sh/docs/introduction#framework-agnostic https://medium.com/@tkh44/emotion-ad1c45c6d28b https://emotion.sh/docs/install https://emotion.sh/docs/emotion

but I’m confused about what exactly Emotion is doing with the css-decorated template literals and how I can get them to be auto-prefixed. In my build pipeline, I have the autoprefixer plugin set up with PostCSS for the CSS loader, but from what I can see, Emotion does not omit any CSS.

I think it would be nice to:

1. Describe the architecture about what emotion is doing on a high-level
2. Walk through a solution for adding vendor prefixes with vanilla emotion

[Andarist]

Hm, it could be possibly mentioned better on that page - but it’s not as simple as moving it to that section as it doesn’t quite describe features of emotion, but rather when “bare” emotion can be used over @emotion/core (for React). Also, that quoted statement isn’t incorrect - it doesn’t describe differences from “bare” emotion but rather from “style” prop.

If you have any suggestions on how this could be improved, maybe you could prepare a PR that could help future readers?

[clemmy]

Ah, thank you for the quick responses! So if I understand correctly, vanilla emotion should support auto-prefixing out of the box? 😃 We should totally be selling this feature!

My main misconception comes from: https://emotion.sh/docs/introduction#react where it says

CSS prop support - Similar to the style prop but adds support for nested selectors, media queries, and auto-prefixing.

Perhaps we should move the auto-prefixing support to the Framework Agnostic section 😄