From a2672313f073633baa56782b366fb9495a050a6e Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 9 Sep 2022 18:00:00 +0100
Subject: [PATCH] refactor: add flex basis plugin

---
 styles/globals.css | 35 -----------------------------------
 tailwind.config.js | 10 +++++++++-
 2 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index 96f2af7..878fcbb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -88,38 +88,3 @@
     }
   }
 }
-
-@layer utilities {
-  @responsive {
-    .flex-basis-10 {
-      flex-basis: 10%;
-    }
-    .flex-basis-20 {
-      flex-basis: 20%;
-    }
-    .flex-basis-30 {
-      flex-basis: 30%;
-    }
-    .flex-basis-40 {
-      flex-basis: 40%;
-    }
-    .flex-basis-50 {
-      flex-basis: 50%;
-    }
-    .flex-basis-60 {
-      flex-basis: 60%;
-    }
-    .flex-basis-70 {
-      flex-basis: 70%;
-    }
-    .flex-basis-80 {
-      flex-basis: 80%;
-    }
-    .flex-basis-90 {
-      flex-basis: 90%;
-    }
-    .flex-basis-100 {
-      flex-basis: 100%;
-    }
-  }
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7312015..7d63e75 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -68,6 +68,14 @@ function generateForTheme(themeName) {
   });
 }
 
+let flexBasisPlugin = plugin(function ({ addBase, addUtilities }) {
+  let values = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+
+  values.forEach((value) => {
+    addUtilities({ [`.flex-basis-${value}`]: { flexBasis: `${value}%` } });
+  });
+});
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -85,5 +93,5 @@ module.exports = {
       tertiary: "var(--color-tertiary)",
     },
   },
-  plugins: [multiThemePlugin],
+  plugins: [flexBasisPlugin, multiThemePlugin],
 };