[Slider][material-ui] Convert to support CSS extraction

[mnajdova]

Preview: https://deploy-preview-41201--material-ui.netlify.app/material-ui/react-slider/

[mui-bot]

Netlify deploy preview

https://deploy-preview-41201--material-ui.netlify.app/

@material-ui/core: parsed: +0.19% , gzip: +0.14%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 739f777

[mnajdova]

I had to extract these to separate files, otherwise we were ending up with importing from the styled.js, which resulted with the error:

/Users/marijanajdova/workspace/mui/apps/node_modules/.pnpm/@wyw-in-js+transform@0.5.0_typescript@5.3.3/node_modules/@wyw-in-js/transform/lib/module.js:223
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
      ^

EvalError: _systemDefaultTheme is not defined in/Users/marijanajdova/workspace/mui/packages/mui-system/build/createStyled.js
| /Users/marijanajdova/workspace/mui/packages/mui-material/build/styles/slotShouldForwardProp.js
| /Users/marijanajdova/workspace/mui/packages/mui-material/build/Slider/Slider.js

Once the PR is merged, I will update all imports we have in Material UI, so that we don't have to add additional check in the migration steps.

cc @brijeshb42, @siriwatknp

[siriwatknp]

I found a different fix in https://github.com/mui/material-ui/pull/41378/files#diff-23f194f4651836b6ce3d86b341074002f86e1bfcf3958c665fdf25a18aecfafb but I think we should have both.

[siriwatknp]

👍

[oliviertassinari]

This change introduced a regression somehow, it could be a breaking change too.

Before: https://deploy-preview-41198--material-ui.netlify.app/material-ui/

After: https://deploy-preview-41201--material-ui.netlify.app/material-ui/

Can we prioritize this regression in master? Thanks

[siriwatknp]

This change introduced a regression somehow, it could be a breaking change too.

It is strange that changing the order of the styles in the variant fixes the issue

diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 5b5ed8c9e9..f87f34f51b 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -277,6 +277,30 @@ export const SliderThumb = styled('span', {
     },
   },
   variants: [
+    {
+      props: { size: 'small' },
+      style: {
+        width: 12,
+        height: 12,
+        '&::before': {
+          boxShadow: 'none',
+        },
+      },
+    },
+    {
+      props: { orientation: 'horizontal' },
+      style: {
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+      },
+    },
+    {
+      props: { orientation: 'vertical' },
+      style: {
+        left: '50%',
+        transform: 'translate(-50%, 50%)',
+      },
+    },
     ...Object.keys((theme.vars ?? theme).palette)
       .filter((key) => (theme.vars ?? theme).palette[key].main)
       .map((color) => ({
@@ -305,30 +329,6 @@ export const SliderThumb = styled('span', {
           },
         },
       })),
-    {
-      props: { size: 'small' },
-      style: {
-        width: 12,
-        height: 12,
-        '&::before': {
-          boxShadow: 'none',
-        },
-      },
-    },
-    {
-      props: { orientation: 'horizontal' },
-      style: {
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-      },
-    },
-    {
-      props: { orientation: 'vertical' },
-      style: {
-        left: '50%',
-        transform: 'translate(-50%, 50%)',
-      },
-    },
   ],
 }));

I checked the calculated styles before passing to emotion, it looks normal. There is no problem with /material-ui/react-slider/, the styles are the same.

Anyway, I don't have much time to dig deep to the root cause but I will try to find some time. It looks like an issue related to our doc.

[vimutti77]

This PR may be the cause of this #41753 ?

[ZeeshanTamboli]

This PR may be the cause of this #41753 ?

@vimutti77 Yes, looks related.

[ZeeshanTamboli]

Another regression occurred since Material UI v5.15.14 - #41772. This evaluation fails for nested theme palette fields, when the color here becomes an object rather than a string.

---

Side note: We could consider using reduce() here to avoid two separate loops.