[system] Add support & usage of CSS logical properties

[aaarichter]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

It would be great if MUI / MUI next would support and switch internally to CSS logical properties. This would make the RTL plugin unnecessary, reduce code that handles direction and sync with functionality of modern frameworks (like Chakra-UI)

• browser support: https://caniuse.com/css-logical-props
• MDN overview & guides https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
• W3C draft: https://www.w3.org/TR/css-logical-1/

Examples 🌈

paddingInlineStart: 4

Motivation 🔦

Instead of using an RTL plugin, that has to provide transpiled css properties, it would be great to use CSS properties that change direction based on direction automatically. This is possible with CSS Logical properties in all modern browsers.

[michaldudak]

Good idea. This would be possible when we drop IE support completely (that is, in the next major).

[Semigradsky]

👍 This will make RTL support without rtl plugins (stylis-plugin-rtl/jss-rtl)