[docs] Retain vendor prefixing in rtl example

[ryancogswell]

The prefixer stylis plugin is included by default when not overriding stylisPlugins via CacheProvider. When explicitly specifying stylisPlugins in order to add the rtl plugin, prefixer needs to be included in order to retain the default vendor prefixing behavior.

This came to my attention due to looking into how to turn off the vendor prefixing for a StackOverflow question (https://stackoverflow.com/questions/70656499/material-ui-disable-browser-specific-css-rules-webkit-etc) and then realizing that the rtl instructions currently also cause vendor prefixing to be turned off.

• I have followed (at least) the PR section of the contributing guide.

[ryancogswell]

I suspect that the "4.2 styled-components" section may need a similar change, but I haven't done any testing to see if that example also results in prefixing being turned off.

[oliviertassinari]

Yeah, great point https://github.com/emotion-js/emotion/blob/516fe458058c9ec8218740472b301e935801ebbc/packages/cache/src/index.js#L44

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 249b542

[oliviertassinari]

I see more places in the codebase that should be updated: 1. the demo sandbox, 2. the docs wrapper, 3. the Directions demo. For those that wonder, do we still need this vendor prefix logic? Yes, for props like background-clip.

@Andarist Do you think that stylis would be up to remove some of the prefixes? For instance, flex-shrink, really? I would argue that these flex prefixes harms the DX:

with no gain.

[Andarist]

@Andarist Do you think that stylis would be up to remove some of the prefixes?

In a way, this could be seen as a breaking change. I'm not sure what's Sultan's view on the matter though. I think it's worth creating an issue there and I agree that the current set of prefixed style declarations is overly broad. If this suggestion would be rejected we can also discuss creating a slimmed-down prefixed for Emotion and use that instead (but I would also have to recheck with Mitchell to see what he thinks about it). It would be great if somebody could list what gets currently prefixed and assess how useful each thing is.

[oliviertassinari]

I have pushed another commit, to fix all the instances in our codebase. I have also opened thysultan/stylis#283.

[thysultan]

In a way, this could be seen as a breaking change.

In a way you could avoid a breaking change by exporting a prefixer, that is a 1-1 clone of the current prefixer with the suggested amendments, i.e export prefixer_bleeding_age™ given that the current prefixer is not privileged and is as much a middleware as any other.

[mnajdova]

I suspect that the "4.2 styled-components" section may need a similar change, but I haven't done any testing to see if that example also results in prefixing being turned off.

As far as I could see, the StyleSheetManager has an option for disabling prefixer, if it is not disabled, the prefixer is always added - https://github.com/styled-components/styled-components/blob/80cf751528f5711349dd3c27621022b4c95b4b7f/packages/styled-components/src/utils/stylis.ts#L76

[mnajdova]

The changes looks good. Great finding 👍