Update the theme merge function to accept and overide the font-family

Hanzala-Ahmed · Mar 18, 2022 · 53279a9 · 53279a9
1 parent 8ba451d
commit 53279a9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 49 deletions.
diff --git a/packages/material-tailwind-html/utils/withMT.js b/packages/material-tailwind-html/utils/withMT.js
@@ -14,7 +14,7 @@ const { alert } = require("../theme/components/alert");
 
 const materialTailwindConfig = {
   darkMode: "class",
-  content: [],
+  content: ["hello"],
   theme: {
     colors,
     fontFamily: typography,
@@ -28,37 +28,23 @@ const materialTailwindConfig = {
   ]
 };
 
-function arrayMerge(destinationArray, sourceArray) {
-  return destinationArray.concat(sourceArray).reduce((acc, cur) => {
-    if (acc.includes(cur)) return acc;
-    return [...acc, cur];
-  }, []);
-}
-
 /**
  * Merge @material-tailwind and Tailwind CSS configurations
  * @param {object} tailwindConfig - Tailwind config object
  * @return {object} new config object
  */
 function withTM(tailwindConfig) {
-  let purge;
-  if (Array.isArray(tailwindConfig.purge)) {
-    purge = {
-      content: tailwindConfig.purge
-    };
-  } else {
-    purge = tailwindConfig.purge;
-  }
+  const themeFont = materialTailwindConfig.theme.fontFamily;
 
-  console.log(materialTailwindConfig);
+  if (tailwindConfig.theme.fontFamily) {
+    const { sans, serif, body } = tailwindConfig.theme.fontFamily;
+
+    themeFont.sans = sans || themeFont.sans;
+    themeFont.serif = serif || themeFont.serif;
+    themeFont.body = body || themeFont.body;
+  }
 
-  return merge(
-    materialTailwindConfig,
-    { ...tailwindConfig, purge },
-    {
-      arrayMerge
-    }
-  );
+  return merge(materialTailwindConfig, { ...tailwindConfig });
 }
 
 module.exports = withTM;
diff --git a/packages/material-tailwind-react/src/utils/withMT.js b/packages/material-tailwind-react/src/utils/withMT.js
@@ -21,35 +21,23 @@ const materialTailwindConfig = {
   plugins: [],
 };
 
-function arrayMerge(destinationArray, sourceArray) {
-  return destinationArray.concat(sourceArray).reduce((acc, cur) => {
-    if (acc.includes(cur)) return acc;
-    return [...acc, cur];
-  }, []);
-}
-
 /**
  * Merge @material-tailwind and Tailwind CSS configurations
  * @param {object} tailwindConfig - Tailwind config object
  * @return {object} new config object
  */
 function withTM(tailwindConfig) {
-  let purge;
-  if (Array.isArray(tailwindConfig.purge)) {
-    purge = {
-      content: tailwindConfig.purge,
-    };
-  } else {
-    purge = tailwindConfig.purge;
+  const themeFont = materialTailwindConfig.theme.fontFamily;
+
+  if (tailwindConfig.theme.fontFamily) {
+    const { sans, serif, body } = tailwindConfig.theme.fontFamily;
+
+    themeFont.sans = sans || themeFont.sans;
+    themeFont.serif = serif || themeFont.serif;
+    themeFont.body = body || themeFont.body;
   }
 
-  return merge(
-    materialTailwindConfig,
-    { ...tailwindConfig, purge },
-    {
-      arrayMerge,
-    },
-  );
+  return merge(materialTailwindConfig, { ...tailwindConfig });
 }
 
 module.exports = withTM;
diff --git a/pages/index.js b/pages/index.js
@@ -226,7 +226,7 @@ export default function Home() {
         <button className="button button-text button-pink" data-ripple-dark>
           Button
         </button>
-        <h2 className="font-sans shadow-md">Hello World</h2>
+        <h2 className="shadow-md">Hello World</h2>
 
         <div className="alert alert-gradient alert-brown">Alert primary</div>
       </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,9 +11,6 @@ module.exports = withMT({
         500: "#ff4444"
       }
     },
-    fontFamily: {
-      sans: ["Roboto Slab", "sans-serif"]
-    },
     extend: {}
   },
   plugins: []