Remove outdated prefixes

[oliviertassinari]

Stylis includes a prefixer module:

import { prefixer } from 'stylis';

This is very helpful as there are CSS properties that need vendor prefixes. For example, user-select: none; still requires it in browsers that have an important global usage rate.

However, I have noticed a couple of prefixes that I would argue are more harmful than beneficial. Mainly, the flexbox properties. The global need for the prefix seems to be 0.48% (0.01 + 0.14 + 0.05 + 0.01 + 0.02 + 0.03 + 0.01 + 0.1 + 0.11). Do we need to keep it, at this point?

By removing it, we would gain:

1. A better DX when debugging CSS. When this module is used with emotion, you get this kind of output by default

Before

After is so much better:

2. A smaller bundle.

---

Actually, this might simply be the root cause of a different problem: What's the browser support target? Do we have something like this https://github.com/kripod/style-vendorizer#browser-support?

---

• A fun read https://css-tricks.com/is-vendor-prefixing-dead/#aa-prefixing-in-2021
• A related thread Remove autoprefixer in dev mode? styled-components/styled-components#285
• I have reopened Remove outdated prefixes? #283 as I didn't understand why it was closed.

[petr001]

yeah, prefixes are dead, let's have them optional pls

[oliviertassinari]

cc @brijeshb42 adding this in your radar. It fits well under the "improving the style engine of MUI" north start objective of your team (so far 1 person but hopefully we can grow this).

[Andarist]

I think the loose goal of the prefixer here is to prefix as much as possible. Different people might have different needs and all. This prefixed can be manually trimmed down by people - this is what we were already doing in Emotion to avoid prefixing grid. We are also further trimming it down for the upcoming major version of Emotion, see: emotion-js/emotion#3296