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).