Support null as a value for CSS object (#229)

mui · Sep 11, 2024 · f442f7a · f442f7a
1 parent e1c587d
commit f442f7a
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts
@@ -153,10 +153,13 @@ function iterateAndReplaceFunctions(
   includeThemeArg = false,
 ) {
   const css = styleObj as StyleObj;
+  if (!css) {
+    return;
+  }
   Object.keys(css).forEach((key) => {
     const value = css[key];
 
-    if (typeof value === 'object') {
+    if (value && typeof value === 'object') {
       if (!Array.isArray(value)) {
         iterateAndReplaceFunctions(
           value,

diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js
@@ -52,3 +52,27 @@ process.env.NODE_ENV !== 'production'
   : void 0;
 
 process.env.NODE_ENV !== 'production' ? (App.muiName = 'App') : void 0;
+
+const OutlinedInputInput = styled(InputBaseInput, {
+  name: 'MuiOutlinedInput',
+  slot: 'Input',
+  overridesResolver: inputBaseInputOverridesResolver,
+})(({ theme }) => ({
+  padding: '16.5px 14px',
+  ...(!theme.vars && {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+      caretColor: theme.palette.mode === 'light' ? null : '#fff',
+      borderRadius: 'inherit',
+    },
+  }),
+}));
+
+const Component2 = styled.div(({ theme }) =>
+  theme.palette.mode === 'light'
+    ? null
+    : {
+        backgroundColor: theme.palette.primary.main,
+      },
+);
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css
@@ -29,3 +29,9 @@
 .s1emg10t .s13xim6i {
   display: none;
 }
+.o1l8bn4d {
+  padding: 16.5px 14px;
+}
+.o1l8bn4d:-webkit-autofill {
+  border-radius: inherit;
+}
diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js
@@ -1,3 +1,7 @@
+import { styled as _styled5 } from '@pigment-css/react';
+import _theme3 from '@pigment-css/react/theme';
+import { styled as _styled4 } from '@pigment-css/react';
+import _theme2 from '@pigment-css/react/theme';
 import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react';
 import _theme from '@pigment-css/react/theme';
 import PropTypes from 'prop-types';
@@ -27,3 +31,14 @@ process.env.NODE_ENV !== 'production'
     })
   : void 0;
 process.env.NODE_ENV !== 'production' ? (App.muiName = 'App') : void 0;
+const _exp7 = /*#__PURE__*/ () => InputBaseInput;
+const OutlinedInputInput = /*#__PURE__*/ _styled4(_exp7(), {
+  name: 'MuiOutlinedInput',
+  slot: 'Input',
+  overridesResolver: inputBaseInputOverridesResolver,
+})({
+  classes: ['o1l8bn4d'],
+});
+const Component2 = /*#__PURE__*/ _styled5('div')({
+  classes: ['c14kh110'],
+});
diff --git a/packages/pigment-css-react/tests/styled/styled.test.tsx b/packages/pigment-css-react/tests/styled/styled.test.tsx
@@ -3,6 +3,7 @@ import { runTransformation, expect } from '../testUtils';
 
 const theme = {
   palette: {
+    mode: 'light',
     primary: {
       main: 'red',
     },