From 317e1c10b7dcf2456f5b2c75f9e1b2e2abc809bd 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: extract plugins into separate files
---
plugins/flex-basis-plugin.js | 11 ++++++
plugins/multi-theme-plugin.js | 71 +++++++++++++++++++++++++++++++++++
tailwind.config.js | 67 +--------------------------------
3 files changed, 84 insertions(+), 65 deletions(-)
create mode 100644 plugins/flex-basis-plugin.js
create mode 100644 plugins/multi-theme-plugin.js
diff --git a/plugins/flex-basis-plugin.js b/plugins/flex-basis-plugin.js
new file mode 100644
index 0000000..da46a0e
--- /dev/null
+++ b/plugins/flex-basis-plugin.js
@@ -0,0 +1,11 @@
+let plugin = require("tailwindcss/plugin");
+
+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}%` } });
+ });
+});
+
+module.exports = flexBasisPlugin;
diff --git a/plugins/multi-theme-plugin.js b/plugins/multi-theme-plugin.js
new file mode 100644
index 0000000..d98a3df
--- /dev/null
+++ b/plugins/multi-theme-plugin.js
@@ -0,0 +1,71 @@
+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 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());
+
+ Object.keys(themes).forEach((themeName) => {
+ addBase(generateForTheme(themeName));
+ });
+});
+
+function generateForRoot() {
+ let defaultThemeName = Object.keys(themes)[0];
+
+ return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
+ return {
+ ":root": {
+ [`--color-${colourName}`]: value,
+ },
+ };
+ });
+}
+
+function generateForTheme(themeName) {
+ return Object.entries(themes[themeName]).map(([colourName, value]) => {
+ return {
+ [`[data-theme=${themeName}]`]: {
+ [`--color-${colourName}`]: value,
+ },
+ };
+ });
+}
+
+module.exports = multiThemePlugin;
diff --git a/tailwind.config.js b/tailwind.config.js
index 7d63e75..0718b7c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
-let plugin = require("tailwindcss/plugin");
+let flexBasisPlugin = require("./plugins/flex-basis-plugin");
+let multiThemePlugin = require("./plugins/multi-theme-plugin");
let colors = {
black: "#333333",
@@ -12,70 +13,6 @@ 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,
- },
-};
-
-let multiThemePlugin = plugin(function ({ addBase }) {
- addBase(generateForRoot());
-
- Object.keys(themes).forEach((themeName) => {
- addBase(generateForTheme(themeName));
- });
-});
-
-function generateForRoot() {
- let defaultThemeName = Object.keys(themes)[0];
-
- return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
- return {
- ":root": {
- [`--color-${colourName}`]: value,
- },
- };
- });
-}
-
-function generateForTheme(themeName) {
- return Object.entries(themes[themeName]).map(([colourName, value]) => {
- return {
- [`[data-theme=${themeName}]`]: {
- [`--color-${colourName}`]: value,
- },
- };
- });
-}
-
-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: [