[material-ui] Migrate components to support CSS extraction

.github/workflows/ci.yml

@@ -38,6 +38,8 @@ jobs:
           cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
       - run: pnpm install
       - run: pnpm build:ci
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
       - run: pnpm release:changelog
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

apps/pigment-css-next-app/next.config.js

@@ -96,6 +96,13 @@ theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
 
+function innerNoop() {
+  return null;
+}
+function outerNoop() {
+  return innerNoop;
+}
+
 /**
  * @type {PigmentOptions}
  */
@@ -104,6 +111,26 @@ const pigmentOptions = {
   transformLibraries: ['local-ui-lib'],
   sourceMap: true,
   displayName: true,
+  overrideContext: (context) => {
+    if (!context.$RefreshSig$) {
+      context.$RefreshSig$ = outerNoop;
+    }
+    return {
+      ...context,
+      require: (id) => {
+        if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
+          return {
+            __esModule: true,
+            default: () => () => () => null,
+            internal_processStyles: () => {},
+            keyframes: () => '',
+            css: () => '',
+          };
+        }
+        return context.require(id);
+      },
+    };
+  },
 };
 
 /** @type {import('next').NextConfig} */

apps/pigment-css-next-app/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.9",
+    "@pigment-css/react": "^0.0.10",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.9",
+    "@pigment-css/nextjs-plugin": "^0.0.10",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

docs/pages/material-ui/api/filled-input.json

@@ -19,7 +19,7 @@
     },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableUnderline": { "type": { "name": "bool" } },
+    "disableUnderline": { "type": { "name": "bool" }, "default": "false" },
     "endAdornment": { "type": { "name": "node" } },
     "error": { "type": { "name": "bool" } },
     "fullWidth": { "type": { "name": "bool" }, "default": "false" },

docs/pages/material-ui/api/input.json

@@ -19,7 +19,7 @@
     },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableUnderline": { "type": { "name": "bool" } },
+    "disableUnderline": { "type": { "name": "bool" }, "default": "false" },
     "endAdornment": { "type": { "name": "node" } },
     "error": { "type": { "name": "bool" } },
     "fullWidth": { "type": { "name": "bool" }, "default": "false" },

package.json

@@ -111,7 +111,7 @@
     "@mui/utils": "workspace:^",
     "@next/eslint-plugin-next": "^14.2.3",
     "@octokit/rest": "^20.1.0",
-    "@pigment-css/react": "^0.0.9",
+    "@pigment-css/react": "^0.0.10",
     "@playwright/test": "1.43.1",
     "@types/enzyme": "^3.10.18",
     "@types/fs-extra": "^11.0.4",

packages/mui-lab/src/LoadingButton/LoadingButton.js

@@ -4,13 +4,15 @@ import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import { ButtonGroupContext } from '@mui/material/ButtonGroup';
 import CircularProgress from '@mui/material/CircularProgress';
 import resolveProps from '@mui/utils/resolveProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 
+const useThemeProps = createUseThemeProps('MuiLoadingButton');
+
 const useUtilityClasses = (ownerState) => {
   const { loading, loadingPosition, classes } = ownerState;
 
@@ -32,7 +34,7 @@ const useUtilityClasses = (ownerState) => {
   };
 };
 
-// TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
+// TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
 const rootShouldForwardProp = (prop) =>
   prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
 const LoadingButtonRoot = styled(Button, {
@@ -50,44 +52,55 @@ const LoadingButtonRoot = styled(Button, {
       },
     ];
   },
-})(({ ownerState, theme }) => ({
+})(({ theme }) => ({
   [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
     {
       transition: theme.transitions.create(['opacity'], {
         duration: theme.transitions.duration.short,
       }),
       opacity: 0,
     },
-  ...(ownerState.loadingPosition === 'center' && {
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-      duration: theme.transitions.duration.short,
-    }),
-    [`&.${loadingButtonClasses.loading}`]: {
-      color: 'transparent',
-    },
-  }),
-  ...(ownerState.loadingPosition === 'start' &&
-    ownerState.fullWidth && {
-      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
-        {
-          transition: theme.transitions.create(['opacity'], {
-            duration: theme.transitions.duration.short,
-          }),
-          opacity: 0,
-          marginRight: -8,
-        },
-    }),
-  ...(ownerState.loadingPosition === 'end' &&
-    ownerState.fullWidth && {
-      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
-        {
-          transition: theme.transitions.create(['opacity'], {
-            duration: theme.transitions.duration.short,
-          }),
-          opacity: 0,
-          marginLeft: -8,
+  variants: [
+    {
+      props: {
+        loadingPosition: 'center',
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short,
+        }),
+        [`&.${loadingButtonClasses.loading}`]: {
+          color: 'transparent',
         },
-    }),
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+      style: {
+        [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
+          {
+            transition: theme.transitions.create(['opacity'], {
+              duration: theme.transitions.duration.short,
+            }),
+            opacity: 0,
+            marginRight: -8,
+          },
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+      style: {
+        [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
+          {
+            transition: theme.transitions.create(['opacity'], {
+              duration: theme.transitions.duration.short,
+            }),
+            opacity: 0,
+            marginLeft: -8,
+          },
+      },
+    },
+  ],
 }));
 
 const LoadingButtonLoadingIndicator = styled('span', {
@@ -100,41 +113,86 @@ const LoadingButtonLoadingIndicator = styled('span', {
       styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`],
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   position: 'absolute',
   visibility: 'visible',
   display: 'flex',
-  ...(ownerState.loadingPosition === 'start' &&
-    (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-      left: ownerState.size === 'small' ? 10 : 14,
-    }),
-  ...(ownerState.loadingPosition === 'start' &&
-    ownerState.variant === 'text' && {
-      left: 6,
-    }),
-  ...(ownerState.loadingPosition === 'center' && {
-    left: '50%',
-    transform: 'translate(-50%)',
-    color: (theme.vars || theme).palette.action.disabled,
-  }),
-  ...(ownerState.loadingPosition === 'end' &&
-    (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-      right: ownerState.size === 'small' ? 10 : 14,
-    }),
-  ...(ownerState.loadingPosition === 'end' &&
-    ownerState.variant === 'text' && {
-      right: 6,
-    }),
-  ...(ownerState.loadingPosition === 'start' &&
-    ownerState.fullWidth && {
-      position: 'relative',
-      left: -10,
-    }),
-  ...(ownerState.loadingPosition === 'end' &&
-    ownerState.fullWidth && {
-      position: 'relative',
-      right: -10,
-    }),
+  variants: [
+    {
+      props: {
+        loadingPosition: 'start',
+        size: 'small',
+      },
+      style: {
+        left: 10,
+      },
+    },
+    {
+      props: ({ loadingPosition, ownerState }) =>
+        loadingPosition === 'start' && ownerState.size !== 'small',
+      style: {
+        left: 14,
+      },
+    },
+    {
+      props: {
+        variant: 'text',
+        loadingPosition: 'start',
+      },
+      style: {
+        left: 6,
+      },
+    },
+    {
+      props: {
+        loadingPosition: 'center',
+      },
+      style: {
+        left: '50%',
+        transform: 'translate(-50%)',
+        color: (theme.vars || theme).palette.action.disabled,
+      },
+    },
+    {
+      props: {
+        loadingPosition: 'end',
+        size: 'small',
+      },
+      style: {
+        right: 10,
+      },
+    },
+    {
+      props: ({ loadingPosition, ownerState }) =>
+        loadingPosition === 'end' && ownerState.size !== 'small',
+      style: {
+        right: 14,
+      },
+    },
+    {
+      props: {
+        variant: 'text',
+        loadingPosition: 'end',
+      },
+      style: {
+        right: 6,
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+      style: {
+        position: 'relative',
+        left: -10,
+      },
+    },
+    {
+      props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+      style: {
+        position: 'relative',
+        right: -10,
+      },
+    },
+  ],
 }));
 
 const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {

packages/mui-lab/src/zero-styled/index.ts

@@ -0,0 +1,8 @@
+import { useThemeProps } from '@mui/material/styles';
+
+export { styled } from '@mui/material/styles';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name: string) {
+  return useThemeProps;
+}

packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { emphasize } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
+import { styled } from '../zero-styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 

packages/mui-material/src/Button/Button.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';

packages/mui-material/src/Checkbox/Checkbox.js

@@ -117,6 +117,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
     inputProps,
     size = 'medium',
+    disableRipple = false,
     className,
     ...other
   } = props;
@@ -126,6 +127,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
 
   const ownerState = {
     ...props,
+    disableRipple,
     color,
     indeterminate,
     size,