[system] Add experimental_sx utility

[mnajdova]

Fixes #28678
Related to #29816

The goal of this new API, is to allow users to use the sx syntax inside the styled() utility primerly.

Why?

• it would allow developers to easily move styles between the sx and the styled() utility without having surprise as to why some styles are different/not working
• it would unlock people who would like to have "one way" of defining styles, not having to choose one based on where it is used.

How?

I would like to start with minimal and most simple implementation, which would be defining the styles and propagating the theme. This should allow developers to use this syntax wherever they want, for example, in the styled() utility, when defining the variants for the component, when defining mixins etc.

Some alternatives proposed: #28678 (comment)

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 1f16e9c

[petermiles]

It'd be nice if we could use the theme within unstable_sx without having to pass it in. Isn't the whole point of sx mapping styles directly to theme values?

[siriwatknp]

Can you try with:

const sx = (styles) => ({ theme }) => styleFunctionSx({ sx: styles, theme });

From what I check in emotion & styled-components, they support nested function.

I prefer this because I don't need to get the theme if we don't need it (mostly we don't need the theme if we want to use sx).

const MyThemeComponent = styled('div')(
  sx({
      color: 'primary.contrastText',
      backgroundColor: 'primary.main',
      padding: 1,
      borderRadius: 1,
    })
);

[mnajdova]

I was trying to create an API not tightly related to the styled(), but maybe this is the only use-case, so yeah, let me update

[mnajdova]

Updated. I've tested it using in the styled() utility and in the variants in side the theme. I can't think of any other use-cases at this moment.

[siriwatknp]

One question, does sx work without ThemeProvider?

[mnajdova]

Yes, it's just that I could not really test that the values are applied :) I will add test for it too, just to ensure it does not throw

[siriwatknp]

🎉🎉🎉

[hbjORbj]

I love this new utility :)