Emotion: How to get auto-prefixing with vanilla Emotion?

[clemmy]

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]

Hi! Nice to see you here (thanks for fragments 😉!).

Emotion is not using a "standard" autoprefixer (which works during build) - it ships with its own~ runtime parser ( https://github.com/thysultan/stylis.js ) which comes with autoprefixing and it's enabled for you by default.

[FezVrasta]

This section of the documentation has some information:

https://emotion.sh/docs/@emotion/cache#prefix

[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 😄

[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]

I'll throw up a PR :)