Implement suggestions of @mnajdova

mui · May 8, 2022 · bd80530 · bd80530
1 parent ecd1b9f
commit bd80530
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 113 deletions.
diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
@@ -322,6 +322,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     variant,
   };
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const { root: classes_root, ...classes } = useUtilityClasses(ownerState);
 
   const startIcon = startIconProp && (
@@ -336,7 +337,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     </ButtonEndIcon>
   );
 
-  const { cx } = useCx();
+  const cx = useCx();
 
   return (
     <ButtonRoot

diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -338,7 +338,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const { cx } = useCx();
+  const cx = useCx();
 
   return (
     <ButtonBaseRoot

diff --git a/packages/mui-styled-engine-sc/src/cx.d.ts b/packages/mui-styled-engine-sc/src/cx.d.ts
@@ -3,6 +3,4 @@ import type { CxArg } from './tools/classnames';
 export type { CxArg };
 export declare type Cx = (...classNames: CxArg[]) => string;
 
-export declare function useCx(): {
-  cx: Cx;
-};
+export declare function useCx(): Cx;
diff --git a/packages/mui-styled-engine-sc/src/cx.js b/packages/mui-styled-engine-sc/src/cx.js
@@ -4,5 +4,5 @@ import { classnames } from './tools/classnames';
 const cx = (...args) => classnames(args);
 
 export function useCx() {
-  return { cx };
+  return cx;
 }
diff --git a/packages/mui-styled-engine-sc/src/tools/classnames.d.ts b/packages/mui-styled-engine-sc/src/tools/classnames.d.ts
@@ -1,3 +1,8 @@
+
+/** Copy pasted from
+ * https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L9-L15
+ * (we use void instead of undefined because calling cx with no argument shouldn't be correct typewise)
+ * */
 export declare type CxArg =
   | undefined
   | null

diff --git a/packages/mui-styled-engine-sc/src/tools/classnames.js b/packages/mui-styled-engine-sc/src/tools/classnames.js
@@ -25,16 +25,6 @@ export const classnames = (args) => {
         if (Array.isArray(arg)) {
           toAdd = classnames(arg);
         } else {
-          if (
-            process.env.NODE_ENV !== 'production' &&
-            arg.styles !== undefined &&
-            arg.name !== undefined
-          ) {
-            console.error(
-              'You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' +
-                '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.',
-            );
-          }
           toAdd = '';
           for (const k in arg) {
             if (arg[k] && k) {

diff --git a/packages/mui-styled-engine/src/cx.d.ts b/packages/mui-styled-engine/src/cx.d.ts
@@ -3,6 +3,4 @@ import type { CxArg } from './tools/classnames';
 export type { CxArg };
 export declare type Cx = (...classNames: CxArg[]) => string;
 
-export declare function useCx(): {
-  cx: Cx;
-};
+export declare function useCx(): Cx;
diff --git a/packages/mui-styled-engine/src/cx.js b/packages/mui-styled-engine/src/cx.js
@@ -33,31 +33,11 @@ const { createCx } = (() => {
       insertStyles(cache, serialized, false);
       const className = `${cache.key}-${serialized.name}`;
 
-      scope: {
-        const arg = args[0];
-
-        if (!matchCSSObject(arg)) {
-          break scope;
-        }
-
-        increaseSpecificityToTakePrecedenceOverMediaQueries.saveClassNameCSSObjectMapping(
-          cache,
-          className,
-          arg,
-        );
-      }
-
       return className;
     };
 
-    const cx = (...args) => {
-      const className = classnames(args);
-
-      const feat27FixedClassnames =
-        increaseSpecificityToTakePrecedenceOverMediaQueries.fixClassName(cache, className, css);
-
-      return merge(cache.registered, css, feat27FixedClassnames);
-    };
+    const cx = (...args) => 
+       merge(cache.registered, css, classnames(args));
 
     return { cx };
   }
@@ -74,76 +54,5 @@ export function useCx() {
     [cache],
   );
 
-  return { cx };
-}
-
-// https://github.com/garronej/tss-react/issues/27
-const increaseSpecificityToTakePrecedenceOverMediaQueries = (() => {
-  const cssObjectMapByCache = new WeakMap();
-
-  return {
-    saveClassNameCSSObjectMapping: (cache, className, cssObject) => {
-      let cssObjectMap = cssObjectMapByCache.get(cache);
-
-      if (cssObjectMap === undefined) {
-        cssObjectMap = new Map();
-        cssObjectMapByCache.set(cache, cssObjectMap);
-      }
-
-      cssObjectMap.set(className, cssObject);
-    },
-    fixClassName: (() => {
-      function fix(classNameCSSObjects) {
-        let isThereAnyMediaQueriesInPreviousClasses = false;
-
-        return classNameCSSObjects.map(([className, cssObject]) => {
-          if (cssObject === undefined) {
-            return className;
-          }
-
-          let out;
-
-          if (!isThereAnyMediaQueriesInPreviousClasses) {
-            out = className;
-
-            for (const key in cssObject) {
-              if (key.startsWith('@media')) {
-                isThereAnyMediaQueriesInPreviousClasses = true;
-                break;
-              }
-            }
-          } else {
-            out = {
-              '&&': cssObject,
-            };
-          }
-
-          return out;
-        });
-      }
-
-      return (cache, className, css) => {
-        const cssObjectMap = cssObjectMapByCache.get(cache);
-
-        return classnames(
-          fix(
-            className.split(' ').map((className) => [className, cssObjectMap?.get(className)]),
-          ).map((classNameOrCSSObject) =>
-            typeof classNameOrCSSObject === 'string'
-              ? classNameOrCSSObject
-              : css(classNameOrCSSObject),
-          ),
-        );
-      };
-    })(),
-  };
-})();
-
-function matchCSSObject(arg) {
-  return (
-    arg instanceof Object &&
-    !('styles' in arg) &&
-    !('length' in arg) &&
-    !('__emotion_styles' in arg)
-  );
+  return cx;
 }