fix(styling): fix styling

fix broken types and code for sx, mergeStyles and makeStyles

BREAKING CHANGE: named argument pass for useStyles

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

src/utils/makeStyles.test.ts

@@ -5,6 +5,9 @@ const style1: CSSClasses = {
     margin: '10px',
     padding: '10px',
   },
+  text: {
+    textAlign: 'center',
+  },
 };
 
 const style2: CSSClasses = {
@@ -24,17 +27,18 @@ const expectedStyle: CSSClasses = {
     padding: '50px',
     color: 'red',
   },
-  hello: {
-    backgroundColor: 'red',
-    borderRadius: '5px',
+  text: {
+    textAlign: 'center',
   },
 };
 
 describe('makeStyles tests', () => {
   test('using makeStyles and useStyles with style1 and style2 should return expectedStyle', () => {
     const useStyles = makeStyles(style1);
-    const style = useStyles(style2);
+    const modifiedStyle1 = useStyles({ classes: style2 });
+    const modifiedStyle2 = useStyles();
 
-    expect(style).toEqual(expectedStyle);
+    expect(modifiedStyle1).toEqual(expectedStyle);
+    expect(modifiedStyle2).toEqual(style1);
   });
 });

src/utils/makeStyles.ts

@@ -1,19 +1,31 @@
 import { CSSProperties } from 'react';
+import { sx } from './sx';
 
 export interface CSSClasses {
   [key: string]: CSSProperties;
 }
 
-const mergeStyles = (target: CSSClasses, source: CSSClasses): CSSClasses => {
-  for (const key in source) {
-    target[key] = Object.assign({ ...target[key] }, { ...source[key] });
+interface overrideOptions {
+  classes?: CSSClasses;
+}
+
+const mergeStyles = (originalClasses: CSSClasses, overrideClasses: CSSClasses): CSSClasses => {
+  const newClasses: CSSClasses = {};
+
+  for (const key in originalClasses) {
+    newClasses[key] = sx(originalClasses[key], overrideClasses[key]);
   }
 
-  return target;
+  return newClasses;
 };
 
 export const makeStyles = (classes: CSSClasses) => {
-  return (classes_?: CSSClasses) => {
-    return mergeStyles(classes, classes_ as CSSClasses);
+  return (options?: overrideOptions) => {
+    const overrideClasses = options?.classes;
+    if (!overrideClasses) {
+      return classes;
+    }
+
+    return mergeStyles(classes, overrideClasses);
   };
 };

src/utils/sx.ts

@@ -1,9 +1,14 @@
 import { CSSProperties } from 'react';
 
-export const sx = (...args: CSSProperties[]): CSSProperties => {
+type SXProps = CSSProperties | false | undefined;
+
+export const sx = (...args: SXProps[]): CSSProperties => {
   const initialValue: CSSProperties = {};
 
-  const result = args.reduce((prev: CSSProperties, curr: CSSProperties) => {
+  const result = args.reduce((prev: CSSProperties, curr: SXProps) => {
+    if (!curr) {
+      return prev;
+    }
     return { ...prev, ...curr };
   }, initialValue);