revert changes

mui · Jan 20, 2022 · 3918ec6 · 3918ec6
1 parent 529a2a7
commit 3918ec6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 35 deletions.
diff --git a/docs/src/pages/customization/theme-components/theme-components.md b/docs/src/pages/customization/theme-components/theme-components.md
@@ -77,8 +77,6 @@ const finalTheme = createTheme({
 
 {{"demo": "pages/customization/theme-components/GlobalThemeOverrideCallback.js"}}
 
-> ⚠️ the callback return type should be an object or an array, we don't support template literals(` `` `) as return type.
-
 ### Using `sx` (experimental) syntax
 
 If you are not familiar `sx`, first check out [the concept](/system/the-sx-prop) and [the difference with the `styled`](/system/styled/#difference-with-the-sx-prop).

diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js
@@ -1,5 +1,4 @@
 import styledEngineStyled from '@mui/styled-engine';
-import MuiError from '@mui/utils/macros/MuiError.macro';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import styleFunctionSx from './styleFunctionSx';
@@ -138,16 +137,8 @@ export default function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              const slotValue = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
-              if (typeof slotStyle === 'function' && typeof slotValue === 'string') {
-                throw new MuiError(
-                  "MUI: The return type of the callback in '%s.styleOverrides.%s' cannot be a string. Change the return type to array or object instead.",
-                  componentName,
-                  slotKey,
-                );
-              } else {
-                resolvedStyleOverrides[slotKey] = slotValue;
-              }
+              resolvedStyleOverrides[slotKey] =
+                typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }

diff --git a/packages/mui-system/src/createStyled.test.js b/packages/mui-system/src/createStyled.test.js
@@ -228,6 +228,28 @@ describe('createStyled', () => {
       });
     });
 
+    it('support template string return from the callback', () => {
+      const finalTheme = createTheme({
+        components: {
+          MuiButton: {
+            styleOverrides: {
+              root: () => `
+                width: 300px;
+              `,
+            },
+          },
+        },
+      });
+      const { container } = render(
+        <ThemeProvider theme={finalTheme}>
+          <Button>Hello</Button>
+        </ThemeProvider>,
+      );
+      expect(container.firstChild).toHaveComputedStyle({
+        width: '300px',
+      });
+    });
+
     it('works with sx', () => {
       const finalTheme = createTheme({
         components: {

diff --git a/packages/mui-utils/macros/MuiError.macro.js b/packages/mui-utils/macros/MuiError.macro.js
@@ -2,27 +2,6 @@ const { createMacro, MacroError } = require('babel-plugin-macros');
 const helperModuleImports = require('@babel/helper-module-imports');
 const fs = require('fs');
 const path = require('path');
-const prettier = require('prettier');
-
-const workspaceRoot = path.resolve(__dirname, '../../../');
-const prettierConfigPath = path.join(workspaceRoot, 'prettier.config.js');
-
-function writePrettifiedFile(filename, data) {
-  if (filename.endsWith('.tsx.preview')) {
-    fs.writeFileSync(filename, data);
-  } else {
-    const prettierConfig = prettier.resolveConfig.sync(filename, {
-      config: prettierConfigPath,
-    });
-    if (prettierConfig === null) {
-      throw new Error(
-        `Could not resolve config for '${filename}' using prettier config path '${prettierConfigPath}'.`,
-      );
-    }
-
-    fs.writeFileSync(filename, prettier.format(data, { ...prettierConfig, filepath: filename }));
-  }
-}
 
 function invertObject(object) {
   const inverted = {};
@@ -214,7 +193,7 @@ function muiError({ references, babel, config, source }) {
   });
 
   if (missingError === 'write' && updatedErrorCodes) {
-    writePrettifiedFile(errorCodesPath, JSON.stringify(invertObject(errorCodesLookup), null, 2));
+    fs.writeFileSync(errorCodesPath, JSON.stringify(invertObject(errorCodesLookup), null, 2));
   }
 
   return { keepImports: false };