Material-ui: [system] Support sx on all primitive elements by introducing a jsx pragma

[mnajdova]

Summary 💡

It would be great if we can support the sx props on the primitives with jsx pragma. That would basically help us to replace

<Box
  component="img"
  sx={{
    display: "block",
    mr: { sm: 3 },
    mx: { xs: "auto", sm: 0 },
    mb: { xs: 1, sm: 0 },
    width: { xs: "4rem", sm: "6rem" },
    height: { xs: "4rem", sm: "6rem" },
    borderRadius: "50%"
  }}
  src="https://material-ui.com/static/logo_raw.svg"
/>

with

<img
  sx={{
    display: "block",
    mr: { sm: 3 },
    mx: { xs: "auto", sm: 0 },
    mb: { xs: 1, sm: 0 },
    width: { xs: "4rem", sm: "6rem" },
    height: { xs: "4rem", sm: "6rem" },
    borderRadius: "50%"
  }}
  src="https://material-ui.com/static/logo_raw.svg"
/>

For instance https://xstyled.dev/docs/emotion/#use-css-prop or https://theme-ui.com/sx-prop. It seems that we could only support it with emotion, which is OK-ish as it's the default engine 🙃.

Motivation 🔦

This would help us to move away from templates that would use the Box component everywhere. On the other hand, we plan to support the sx prop on all core components, so it may not be that bad, but still, I think this is something that will bring us in the right direction.

Raised in #23053

[yuchi]

There’s no need for a pragma, you can release a Babel macro in a similar fashion to Styled Components’.

[hc-codersatlas]

How would Pragma work with the new automatic runtime? Has that been considered?

[mathieuhasum]

Looking forward to this feature!
As @yuchi mentioned, the Babel macro also seems to be a possible alternative.
Some reference I found for the implementation of the css prop in styled-components:
https://medium.com/styled-components/css-prop-support-for-create-react-app-37e8c5d96861
https://styled-components.com/docs/tooling#babel-macro

[yuchi]

Please note that Styled's Babel Macro is a "bad macro", what I mean is that it's actually a Babel Plugin which is triggered file-wide at macro import (they release both the plug-in and the macro).
In this regard it is not an hygienic macro, it doesn't have a trigger reference: every occurrence of a css prop (by name! not by hygienic reference!) gets transpired.