[system] transform and themeKey do not work together when using style from material-ui/system

[cbravo]

Using the material-ui system function 'style' does not work properly when used with theme and styled-components.

const spacing = style({
  prop: "spacing",
  cssProperty: "margin",
  themeKey: "spacing",
  transform: (value) => {
    // This is never run when theme is provided to a styled-component
    console.log(value);
    return `-${value}px`;
  }
});

• [ x] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

This is addressed in a closed PR (stale) that was never merged c9fdebb

with discussion here: https://github.com/mui-org/material-ui/pull/16439/files#diff-4d07c4a6e8c6006d5f726c3374e11607c23ba62024314e819983e3cfda099768R32-R35

I believe that this piece of the commit should be merged if possible

Current Behavior 😯

The transform function is never ran.

Expected Behavior 🤔

The transform function should run on my css value.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-issue-forked-61g88?file=/src/Demo.js

Sidenote: The latest official material-ui codesandbox is broken when using newest alpha version

Steps:

1. When passing a theme to a styled-component and using the style system like the example

Context 🔦

I want to have the ability to apply a negative margin based on a spacing prop in order to achieve something similar to Mui Grid.

Your Environment 🌎

Tech	Version
Material-UI	v5.?.?
React
Browser
TypeScript
etc.

[oliviertassinari]

@cbravo Thanks for opening this issue, it's an interesting one. I'm doing a digression. We have recently revamped the documentation of the system in #23294. See before vs. after. In this move, we have put a lot of emphasis on the sx as it seemed to be the main driver for the usage of the system. However, I think that your issue is a good reminder that developers are also interested in extending it. I think that it's something we should pay attention to.

This made me think about how stitches as a utility key in the theme. Basically, developers can do:

createMuiTheme({
  sx: {
    spacing: (value) => ({
      margin: -value * 8
    })
  },
});

<Box sx={{ spacing: 2 }} />

@cbravo Is being able to cherry-pick the different style transformations important for you? Meaning, would the above solution be enough or would you rather only add the transformations you need for a specific component?

@mnajdova I wonder if, no matter what, we shouldn't add a page in the documentation around how to compose the style functions 1. to extend the sx prop with new behaviors, 2. to cherry-pick custom transformations.

---

@cbravo Regarding your specific issue, it does sound like a bug and https://github.com/mui-org/material-ui/pull/16439/files#r300456428 seems to solve the issue.

[mnajdova]

We can definitely add advanced section for going into details of how developers can extend these style functions. Will look into this particular issue when I will be working on it 👍

[cbravo]

@oliviertassinari I will describe my exact use case in more detail:

We have a two column layout that we use many repeated times on our website. Copy on the left or right with an image or video component on the other side for example. We were at first using a Grid but grid does not allow for a responsive spacing prop so I was hoping to use this functionality to create a component that would take spacing={{xs:4, md: 8}} as a prop which would net out padding on the grid items and the using the style transform functionality apply the same spacing as negative margin on the outside.

So I think I would still need different style transformations on a component level.

[oliviertassinari]

@cbravo It sounds like you are looking for a Stack component: #18158.

[cbravo]

@oliviertassinari maybe... would the directionality along with the spacing of the stack be responsive? I would like my two-column layout to stack on vertically mobile but be horizontal row-reverse for desktop for example. And the ability to say I want the columns to be 50% 50% or 30% 60% split of the width on desktop. I also want to bake fading in from left or right for either column into my component but that is not really relevant other than to show I am looking to make a custom component for my specific repeating design pattern.

This was the component I was looking to build for my current project and I figured the functionality we are talking about earlier using the style function would help me get there.

[oliviertassinari]

@cbravo Yes and we plan to make all the Grid props responsive too: #6140. The recent changes we have done around @material-ui/styled-engine unlocks this API :)

[oliviertassinari]

@mnajdova The issue is all yours, I don't know what the next step should be, it could be closing, updating the docs, etc.

[cbravo]

I have looked at the upcoming roadmap you guys have... I am SO excited for what you have planned! there are so many good things coming. I am not sure where this leaves me in the mean time... for now unless you plan on merging that little fix I think I will have to find some work arounds until these new things get released. I hope you can take this comment as encouragement and to keep your motivation high!

[mnajdova]

After going trough the comments, I think we should make two things:

• Regarding the actual issue, I think that https://github.com/mui-org/material-ui/pull/16439/files#r300456428 seems to solve the issue, so we should just open a PR for it and merge it... @cbravo would you be interested in opening a PR and covering this with a test? :)

diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js
index 30fa2221f2..d495c74836 100644
--- a/packages/material-ui-system/src/style.js
+++ b/packages/material-ui-system/src/style.js
@@ -19,10 +19,10 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue
     value = themeMapping[propValueFinal] || userValue;
   } else {
     value = getPath(themeMapping, propValueFinal) || userValue;
+  }

-    if (transform) {
-      value = transform(value);
-    }
+  if (transform) {
+    value = transform(value);
   }

   return value;

• For extending the sx utility, I have open this PR - [experimentalStyled] Make sx style fn optional #23714 where we can optionally skip the default sx behavior, and then create our custom one (we can still use the previous styleFunctionSx inside if we want to) - here is a codensadbox that does something similar to what @cbravo needs - https://codesandbox.io/s/confident-bush-346hb?file=/src/App.js

[ZovcIfzm]

Can I take this one up?