Do not include prefixer stylis plugin by default

[srmagura]

The problem

Automatically adding vendor prefixes for CSS properties like flex results in

• Less readable CSS when using the browser dev tools
• Theoretically, slightly worse performance since Emotion must insert more CSS rules

In 2022, many of the things that used to require vendor prefixes are now fully standardized and work in all evergreen browsers. I cannot think of a single standard CSS property that requires vendor prefixes to work in certain browsers. I'm not saying there are literally 0 properties for which automatic vendor prefixes would be useful — I'm saying these properties are obscure enough that the vast majority of people aren't using them anyway.

Proposed solution

The Emotion cache does not include the prefixer plugin by default. You can still opt in to using it by passing it to createCache.

Alternative solutions

In Emotion 11, you can opt out of using prefixer by passing stylisPlugins: [] to createCache.

[Andarist]

Ye, this is definitely something I'd like to do in Emotion 12 but I'm also unsure when that will actually happen. Perhaps when we implement better support for React 18 streaming APIs then we could start thinking about a new major.

[ivan-kleshnin]

I cannot think of a single standard CSS property that requires vendor prefixes to work in certain browsers

E.g. justify-content: right or justify-content: end still doesn't work in Android.
I have to use justify-content: flex-end.

[aeharding]

In Emotion 11, you can opt out of using prefixer by passing stylisPlugins: [] to createCache.

Does anyone know how to do this? I want to turn off all vendor prefixing.

[Andarist]

Resolved in #3296

[aarongarciah]

@aeharding you need to use CacheProvider alongside createCache from @emotion/cache package. More info in the docs: https://emotion.sh/docs/cache-provider