fix(styling): improved and fixed makeStyles

improved the mergeStyles function and made changes to the makeStyles accordingly

resolves #20

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

src/components/Email/index.ts

@@ -1 +1 @@
-export * from './Email';
+export { Email, EmailProps } from './Email';

src/components/index.ts

@@ -0,0 +1 @@
+export * from './Email';

src/index.ts

@@ -1,2 +1,2 @@
-export * from './components/Email';
+export * from './components';
 export * from './utils';

src/utils/index.ts

@@ -1 +1,2 @@
-export * from './stylings';
+export { sx } from './stylings';
+export { makeStyles } from './makeStyles';

src/utils/makeStyles.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+
+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] });
+  }
+
+  return target;
+};
+
+export const makeStyles = (classes: CSSClasses) => {
+  return (classes_?: CSSClasses) => {
+    return mergeStyles(classes, classes_ as CSSClasses);
+  };
+};

src/utils/stylings.ts

@@ -1,9 +1,4 @@
 import { CSSProperties } from 'react';
-import { mergeDeep } from './mergeDeep';
-
-export interface CSSClasses {
-  [key: string]: CSSProperties;
-}
 
 export const sx = (...args: CSSProperties[]): CSSProperties => {
   const initialValue: CSSProperties = {};
@@ -14,9 +9,3 @@ export const sx = (...args: CSSProperties[]): CSSProperties => {
 
   return result;
 };
-
-export const makeStyles = (classes: CSSClasses) => {
-  return (classes_: CSSClasses) => {
-    return mergeDeep(classes, classes_);
-  };
-};