[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-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,

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

@@ -6,14 +6,15 @@ import { Transition } from 'react-transition-group';
 import useTimeout from '@mui/utils/useTimeout';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { duration } from '../styles/createTransitions';
 import { getTransitionProps } from '../transitions/utils';
 import useTheme from '../styles/useTheme';
 import { useForkRef } from '../utils';
 import { getCollapseUtilityClass } from './collapseClasses';
 
+const useThemeProps = createUseThemeProps('MuiCollapse');
+
 const useUtilityClasses = (ownerState) => {
   const { orientation, classes } = ownerState;
 
@@ -44,54 +45,88 @@ const CollapseRoot = styled('div', {
         styles.hidden,
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   height: 0,
   overflow: 'hidden',
   transition: theme.transitions.create('height'),
-  ...(ownerState.orientation === 'horizontal' && {
-    height: 'auto',
-    width: 0,
-    transition: theme.transitions.create('width'),
-  }),
-  ...(ownerState.state === 'entered' && {
-    height: 'auto',
-    overflow: 'visible',
-    ...(ownerState.orientation === 'horizontal' && {
-      width: 'auto',
-    }),
-  }),
-  ...(ownerState.state === 'exited' &&
-    !ownerState.in &&
-    ownerState.collapsedSize === '0px' && {
-      visibility: 'hidden',
-    }),
+  variants: [
+    {
+      props: {
+        orientation: 'horizontal',
+      },
+      style: {
+        height: 'auto',
+        width: 0,
+        transition: theme.transitions.create('width'),
+      },
+    },
+    {
+      props: {
+        state: 'entered',
+      },
+      style: {
+        height: 'auto',
+        overflow: 'visible',
+      },
+    },
+    {
+      props: {
+        state: 'entered',
+        orientation: 'horizontal',
+      },
+      style: {
+        width: 'auto',
+      },
+    },
+    {
+      props: ({ ownerState }) =>
+        ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px',
+      style: {
+        visibility: 'hidden',
+      },
+    },
+  ],
 }));
 
 const CollapseWrapper = styled('div', {
   name: 'MuiCollapse',
   slot: 'Wrapper',
   overridesResolver: (props, styles) => styles.wrapper,
-})(({ ownerState }) => ({
+})({
   // Hack to get children with a negative margin to not falsify the height computation.
   display: 'flex',
   width: '100%',
-  ...(ownerState.orientation === 'horizontal' && {
-    width: 'auto',
-    height: '100%',
-  }),
-}));
+  variants: [
+    {
+      props: {
+        orientation: 'horizontal',
+      },
+      style: {
+        width: 'auto',
+        height: '100%',
+      },
+    },
+  ],
+});
 
 const CollapseWrapperInner = styled('div', {
   name: 'MuiCollapse',
   slot: 'WrapperInner',
   overridesResolver: (props, styles) => styles.wrapperInner,
-})(({ ownerState }) => ({
+})({
   width: '100%',
-  ...(ownerState.orientation === 'horizontal' && {
-    width: 'auto',
-    height: '100%',
-  }),
-}));
+  variants: [
+    {
+      props: {
+        orientation: 'horizontal',
+      },
+      style: {
+        width: 'auto',
+        height: '100%',
+      },
+    },
+  ],
+});
 
 /**
  * The Collapse transition is used by the
@@ -418,6 +453,8 @@ Collapse.propTypes /* remove-proptypes */ = {
   ]),
 };
 
-Collapse.muiSupportAuto = true;
+if (Collapse) {
+  Collapse.muiSupportAuto = true;
+}
 
 export default Collapse;