refactor: multi-theme plugin with options

plugins/multi-theme-plugin.js

@@ -1,52 +1,26 @@
 let plugin = require("tailwindcss/plugin");
 
-let colors = {
-  black: "#333333",
-  blue: "#334982",
-  grey: "#f3f3f3",
-  orange: "#fdb913",
-  pink: "#e40087",
-  purple: "#782b8f",
-  red: "#dd372f",
-  teal: "#00857d",
-  white: "#fff",
-};
+let multiThemePlugin = plugin.withOptions(
+  function (options) {
+    return function ({ addBase }) {
+      let themes = options?.themes ?? [];
 
-let themes = {
-  blue: {
-    quaternary: colors.red,
-    quinary: colors.red,
-    primary: colors.blue,
-    secondary: colors.red,
-    tertiary: colors.white,
-  },
-
-  purple: {
-    quaternary: colors.white,
-    quinary: colors.purple,
-    primary: colors.purple,
-    secondary: colors.orange,
-    tertiary: colors.purple,
-  },
-
-  teal: {
-    quaternary: colors.pink,
-    quinary: colors.pink,
-    primary: colors.teal,
-    secondary: colors.pink,
-    tertiary: colors.white,
-  },
-};
-
-let multiThemePlugin = plugin(function ({ addBase }) {
-  addBase(generateForRoot());
+      addBase(generateForRoot(themes));
 
       Object.keys(themes).forEach((themeName) => {
-    addBase(generateForTheme(themeName));
-  });
+        addBase(generateForTheme(themes, themeName));
       });
+    };
+  },
 
-function generateForRoot() {
+  function (options) {
+    return {
+      themes: options?.themes ?? [],
+    };
+  }
+);
+
+function generateForRoot(themes) {
   let defaultThemeName = Object.keys(themes)[0];
 
   return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
@@ -58,7 +32,7 @@ function generateForRoot() {
   });
 }
 
-function generateForTheme(themeName) {
+function generateForTheme(themes, themeName) {
   return Object.entries(themes[themeName]).map(([colourName, value]) => {
     return {
       [`[data-theme=${themeName}]`]: {

tailwind.config.js

@@ -13,6 +13,32 @@ let colors = {
   white: "#fff",
 };
 
+let themes = {
+  blue: {
+    quaternary: colors.red,
+    quinary: colors.red,
+    primary: colors.blue,
+    secondary: colors.red,
+    tertiary: colors.white,
+  },
+
+  purple: {
+    quaternary: colors.white,
+    quinary: colors.purple,
+    primary: colors.purple,
+    secondary: colors.orange,
+    tertiary: colors.purple,
+  },
+
+  teal: {
+    quaternary: colors.pink,
+    quinary: colors.pink,
+    primary: colors.teal,
+    secondary: colors.pink,
+    tertiary: colors.white,
+  },
+};
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -30,5 +56,5 @@ module.exports = {
       tertiary: "var(--color-tertiary)",
     },
   },
-  plugins: [flexBasisPlugin, multiThemePlugin],
+  plugins: [flexBasisPlugin, multiThemePlugin({ themes })],
 };