From e9f8ecabacba3f109305acad89fcc17e8b6e9fd6 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <alberto@balancer.finance>
Date: Tue, 7 Mar 2023 09:20:22 +0100
Subject: [PATCH] Replace tailwind safelist with cjs function (#2982)

* Replace tailwind safelist with cjs function

* Add button-options alias
---
 src/components/_global/BalBtn/BalBtn.vue      |  64 ++++---
 .../_global/BalBtn/button-options.js          | 106 +++++++++++
 .../_global/BalBtn/button-options.spec.ts     | 166 ++++++++++++++++++
 tailwind.config.js                            |  12 +-
 tsconfig.json                                 |   6 +-
 vite.config.ts                                |  20 ++-
 6 files changed, 339 insertions(+), 35 deletions(-)
 create mode 100644 src/components/_global/BalBtn/button-options.js
 create mode 100644 src/components/_global/BalBtn/button-options.spec.ts

diff --git a/src/components/_global/BalBtn/BalBtn.vue b/src/components/_global/BalBtn/BalBtn.vue
index e7bc82b259..ccbbfccd72 100644
--- a/src/components/_global/BalBtn/BalBtn.vue
+++ b/src/components/_global/BalBtn/BalBtn.vue
@@ -22,6 +22,30 @@
 <script lang="ts">
 import BalLoadingIcon from '../BalLoadingIcon/BalLoadingIcon.vue';
 
+import {
+  buttonColors,
+  hoverFrom,
+  hoverTo,
+  loadingFrom,
+  loadingTo,
+  backgroundFlat,
+  darkBackgroundFlat,
+  darkHoverBackgroundFlat,
+  hoverBackgroundFlat,
+  hoverBackground,
+  loadingBackground,
+  loadingDarkBackground,
+  background,
+  darkHoverBackground,
+  darkBackground,
+  border,
+  darkBorder,
+  darkHoverBorder,
+  text,
+  darkText,
+  darkFocusBorder,
+} from 'button-options';
+
 export default defineComponent({
   name: 'BalBtn',
 
@@ -45,17 +69,7 @@ export default defineComponent({
     color: {
       type: String,
       default: 'primary',
-      validator: (val: string): boolean =>
-        [
-          'primary',
-          'gradient',
-          'gradient-reverse',
-          'gradient-pink-yellow',
-          'gray',
-          'red',
-          'white',
-          'blue',
-        ].includes(val),
+      validator: (val: string): boolean => buttonColors.includes(val),
     },
     label: { type: String, default: '' },
     block: { type: Boolean, default: false },
@@ -115,18 +129,22 @@ export default defineComponent({
         return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;
       }
       if (props.loading) {
-        return `bg-gradient-to-tr from-${fromColor}-400 to-${toColor}-400`;
+        return `bg-gradient-to-tr ${loadingFrom(fromColor)} ${loadingTo(
+          toColor
+        )}`;
       }
       return `
         bg-gradient-to-tr from-${fromColor}-600 to-${toColor}-600
-        hover:from-${fromColor}-700 hover:to-${toColor}-700 transition-colors
+        ${hoverFrom(fromColor)} ${hoverTo(toColor)} transition-colors
       `;
     });
 
     const bgFlatClasses = computed(() => {
       return `
-        bg-${props.color}-50 hover:bg-${props.color}-100
-        dark:bg-${props.color}-800 dark:hover:bg-${props.color}-700
+        ${backgroundFlat(props.color)} ${hoverBackgroundFlat(props.color)}
+        ${darkBackgroundFlat(props.color)} ${darkHoverBackgroundFlat(
+        props.color
+      )}
       `;
     });
 
@@ -141,12 +159,14 @@ export default defineComponent({
           return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;
         }
         if (props.loading) {
-          return `bg-${props.color}-400 dark:bg-${props.color}-dark-400`;
+          return `${loadingBackground(props.color)} ${loadingDarkBackground(
+            props.color
+          )}`;
         }
 
         return `
-          bg-${props.color}-600 hover:bg-${props.color}-700
-          dark:bg-${props.color}-gray-400 dark:hover:bg-${props.color}-gray-600
+          ${background(props.color)} ${hoverBackground(props.color)}
+          ${darkBackground(props.color)} ${darkHoverBackground(props.color)}
         `;
       }
     });
@@ -155,7 +175,11 @@ export default defineComponent({
       if (props.outline) {
         if (props.disabled)
           return `border border-gray-200 dark:border-gray-700`;
-        return `border border-${props.color}-200 dark:border-${props.color}-700 dark:hover:border-${props.color}-600 dark:focus:border-${props.color}-600 hover:text-gray-600 dark:hover:text-gray-200 dark:focus:text-gray-200`;
+        return `border ${border(props.color)} dark:border-${darkBorder(
+          props.color
+        )} ${darkHoverBorder(props.color)} ${darkFocusBorder(
+          props.color
+        )} hover:text-gray-600 dark:hover:text-gray-200 dark:focus:text-gray-200`;
       }
       return 'border-none';
     });
@@ -170,7 +194,7 @@ export default defineComponent({
         else return 'text-gray-800 hover:text-blue-600 dark:text-gray-100';
       }
       if (props.outline || props.flat)
-        return `text-${props.color}-500 dark:text-${props.color}-400`;
+        return `${text(props.color)} ${darkText(props.color)}`;
       return 'text-white';
     });
 
diff --git a/src/components/_global/BalBtn/button-options.js b/src/components/_global/BalBtn/button-options.js
new file mode 100644
index 0000000000..698ce3739b
--- /dev/null
+++ b/src/components/_global/BalBtn/button-options.js
@@ -0,0 +1,106 @@
+const buttonColors = [
+  'primary',
+  'gradient',
+  'gradient-reverse',
+  'gradient-pink-yellow',
+  'gray',
+  'red',
+  'white',
+  'blue',
+];
+
+const hoverFrom = fromColor => `hover:from-${fromColor}-700`;
+const hoverTo = toColor => `hover:to-${toColor}-700`;
+
+const loadingFrom = fromColor => `from-${fromColor}-400`;
+const loadingTo = toColor => `to-${toColor}-400`;
+
+const backgroundFlat = color => `bg-${color}-50`;
+const hoverBackgroundFlat = color => `hover:bg-${color}-100`;
+const darkBackgroundFlat = color => `dark:bg-${color}-50`;
+const darkHoverBackgroundFlat = color => `dark:hover:bg-${color}-700`;
+
+const loadingBackground = color => `bg-${color}-400`;
+const loadingDarkBackground = color => `dark:bg-${color}-dark-400`;
+
+const background = color => `bg-${color}-600`;
+const darkBackground = color => `dark:bg-${color}-gray-400`;
+const hoverBackground = color => `hover:bg-${color}-700`;
+const darkHoverBackground = color => `dark:hover:bg-${color}-gray-600`;
+
+const border = color => `border-${color}-200`;
+const darkBorder = color => `dark:border-${color}-700`;
+const darkHoverBorder = color => `dark:hover:border-${color}-600`;
+const darkFocusBorder = color => `dark:focus:border-${color}-600`;
+
+const text = color => `text-${color}-500 `;
+const darkText = color => `dark:text-${color}-400`;
+
+/**
+ *
+ * Tailwind deletes all the dynamic classes like the ones in this file.
+ * We used to use safelist setup:
+ * // https://tailwindcss.com/docs/content-configuration#safelisting-classes
+ * // https://github.com/tailwindlabs/tailwindcss/discussions/10079
+ *
+ * But it was including too many unused styles and it was difficult to maintain.
+ * Using this function is unit tested and easier to maintain.
+ */
+const generateButtonClassSafelist = () => {
+  return buttonColors.reduce((safelist, color) => {
+    return [
+      ...safelist,
+      hoverFrom(color),
+      hoverTo(color),
+
+      loadingFrom(color),
+      loadingTo(color),
+
+      backgroundFlat(color),
+      hoverBackgroundFlat(color),
+      darkBackgroundFlat(color),
+      darkHoverBackgroundFlat(color),
+
+      loadingBackground(color),
+      loadingDarkBackground(color),
+
+      background(color),
+      darkBackground(color),
+      hoverBackground(color),
+      darkHoverBackground(color),
+
+      border(color),
+      darkBorder(color),
+      darkHoverBorder(color),
+      darkFocusBorder(color),
+
+      text(color),
+      darkText(color),
+    ];
+  }, []);
+};
+
+module.exports = {
+  buttonColors,
+  hoverFrom,
+  hoverTo,
+  loadingFrom,
+  loadingTo,
+  backgroundFlat,
+  darkBackgroundFlat,
+  darkHoverBackgroundFlat,
+  hoverBackgroundFlat,
+  hoverBackground,
+  loadingBackground,
+  loadingDarkBackground,
+  background,
+  darkHoverBackground,
+  darkBackground,
+  border,
+  darkBorder,
+  darkHoverBorder,
+  text,
+  darkText,
+  darkFocusBorder,
+  generateButtonClassSafelist,
+};
diff --git a/src/components/_global/BalBtn/button-options.spec.ts b/src/components/_global/BalBtn/button-options.spec.ts
new file mode 100644
index 0000000000..01053d3709
--- /dev/null
+++ b/src/components/_global/BalBtn/button-options.spec.ts
@@ -0,0 +1,166 @@
+import { generateButtonClassSafelist } from './button-options.js';
+
+test('Generates tailwind safelist for dynamic button options', () => {
+  expect(generateButtonClassSafelist()).toEqual([
+    'hover:from-primary-700',
+    'hover:to-primary-700',
+    'from-primary-400',
+    'to-primary-400',
+    'bg-primary-50',
+    'hover:bg-primary-100',
+    'dark:bg-primary-50',
+    'dark:hover:bg-primary-700',
+    'bg-primary-400',
+    'dark:bg-primary-dark-400',
+    'bg-primary-600',
+    'dark:bg-primary-gray-400',
+    'hover:bg-primary-700',
+    'dark:hover:bg-primary-gray-600',
+    'border-primary-200',
+    'dark:border-primary-700',
+    'dark:hover:border-primary-600',
+    'dark:focus:border-primary-600',
+    'text-primary-500 ',
+    'dark:text-primary-400',
+    'hover:from-gradient-700',
+    'hover:to-gradient-700',
+    'from-gradient-400',
+    'to-gradient-400',
+    'bg-gradient-50',
+    'hover:bg-gradient-100',
+    'dark:bg-gradient-50',
+    'dark:hover:bg-gradient-700',
+    'bg-gradient-400',
+    'dark:bg-gradient-dark-400',
+    'bg-gradient-600',
+    'dark:bg-gradient-gray-400',
+    'hover:bg-gradient-700',
+    'dark:hover:bg-gradient-gray-600',
+    'border-gradient-200',
+    'dark:border-gradient-700',
+    'dark:hover:border-gradient-600',
+    'dark:focus:border-gradient-600',
+    'text-gradient-500 ',
+    'dark:text-gradient-400',
+    'hover:from-gradient-reverse-700',
+    'hover:to-gradient-reverse-700',
+    'from-gradient-reverse-400',
+    'to-gradient-reverse-400',
+    'bg-gradient-reverse-50',
+    'hover:bg-gradient-reverse-100',
+    'dark:bg-gradient-reverse-50',
+    'dark:hover:bg-gradient-reverse-700',
+    'bg-gradient-reverse-400',
+    'dark:bg-gradient-reverse-dark-400',
+    'bg-gradient-reverse-600',
+    'dark:bg-gradient-reverse-gray-400',
+    'hover:bg-gradient-reverse-700',
+    'dark:hover:bg-gradient-reverse-gray-600',
+    'border-gradient-reverse-200',
+    'dark:border-gradient-reverse-700',
+    'dark:hover:border-gradient-reverse-600',
+    'dark:focus:border-gradient-reverse-600',
+    'text-gradient-reverse-500 ',
+    'dark:text-gradient-reverse-400',
+    'hover:from-gradient-pink-yellow-700',
+    'hover:to-gradient-pink-yellow-700',
+    'from-gradient-pink-yellow-400',
+    'to-gradient-pink-yellow-400',
+    'bg-gradient-pink-yellow-50',
+    'hover:bg-gradient-pink-yellow-100',
+    'dark:bg-gradient-pink-yellow-50',
+    'dark:hover:bg-gradient-pink-yellow-700',
+    'bg-gradient-pink-yellow-400',
+    'dark:bg-gradient-pink-yellow-dark-400',
+    'bg-gradient-pink-yellow-600',
+    'dark:bg-gradient-pink-yellow-gray-400',
+    'hover:bg-gradient-pink-yellow-700',
+    'dark:hover:bg-gradient-pink-yellow-gray-600',
+    'border-gradient-pink-yellow-200',
+    'dark:border-gradient-pink-yellow-700',
+    'dark:hover:border-gradient-pink-yellow-600',
+    'dark:focus:border-gradient-pink-yellow-600',
+    'text-gradient-pink-yellow-500 ',
+    'dark:text-gradient-pink-yellow-400',
+    'hover:from-gray-700',
+    'hover:to-gray-700',
+    'from-gray-400',
+    'to-gray-400',
+    'bg-gray-50',
+    'hover:bg-gray-100',
+    'dark:bg-gray-50',
+    'dark:hover:bg-gray-700',
+    'bg-gray-400',
+    'dark:bg-gray-dark-400',
+    'bg-gray-600',
+    'dark:bg-gray-gray-400',
+    'hover:bg-gray-700',
+    'dark:hover:bg-gray-gray-600',
+    'border-gray-200',
+    'dark:border-gray-700',
+    'dark:hover:border-gray-600',
+    'dark:focus:border-gray-600',
+    'text-gray-500 ',
+    'dark:text-gray-400',
+    'hover:from-red-700',
+    'hover:to-red-700',
+    'from-red-400',
+    'to-red-400',
+    'bg-red-50',
+    'hover:bg-red-100',
+    'dark:bg-red-50',
+    'dark:hover:bg-red-700',
+    'bg-red-400',
+    'dark:bg-red-dark-400',
+    'bg-red-600',
+    'dark:bg-red-gray-400',
+    'hover:bg-red-700',
+    'dark:hover:bg-red-gray-600',
+    'border-red-200',
+    'dark:border-red-700',
+    'dark:hover:border-red-600',
+    'dark:focus:border-red-600',
+    'text-red-500 ',
+    'dark:text-red-400',
+    'hover:from-white-700',
+    'hover:to-white-700',
+    'from-white-400',
+    'to-white-400',
+    'bg-white-50',
+    'hover:bg-white-100',
+    'dark:bg-white-50',
+    'dark:hover:bg-white-700',
+    'bg-white-400',
+    'dark:bg-white-dark-400',
+    'bg-white-600',
+    'dark:bg-white-gray-400',
+    'hover:bg-white-700',
+    'dark:hover:bg-white-gray-600',
+    'border-white-200',
+    'dark:border-white-700',
+    'dark:hover:border-white-600',
+    'dark:focus:border-white-600',
+    'text-white-500 ',
+    'dark:text-white-400',
+    'hover:from-blue-700',
+    'hover:to-blue-700',
+    'from-blue-400',
+    'to-blue-400',
+    'bg-blue-50',
+    'hover:bg-blue-100',
+    'dark:bg-blue-50',
+    'dark:hover:bg-blue-700',
+    'bg-blue-400',
+    'dark:bg-blue-dark-400',
+    'bg-blue-600',
+    'dark:bg-blue-gray-400',
+    'hover:bg-blue-700',
+    'dark:hover:bg-blue-gray-600',
+    'border-blue-200',
+    'dark:border-blue-700',
+    'dark:hover:border-blue-600',
+    'dark:focus:border-blue-600',
+    'text-blue-500 ',
+    'dark:text-blue-400',
+  ]);
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index 94abdb659d..d0f0e62fcb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,19 +1,15 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
+const {
+  generateButtonClassSafelist,
+} = require('./src/components/_global/BalBtn/button-options.js');
 
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
   safelist: [
-    { pattern: /^shadow/ },
+    ...generateButtonClassSafelist(),
     // https://tailwindcss.com/docs/content-configuration#safelisting-classes
     // https://github.com/tailwindlabs/tailwindcss/discussions/10079
-    {
-      pattern: /(bg|border)-[^/]+$/,
-      variants: ['dark', 'hover', 'focus', 'dark:hover', 'dark:focus'],
-    },
-    { pattern: /^text/ },
-    { pattern: /^from/ },
-    { pattern: /^to/ },
     { pattern: /^mr/ },
     { pattern: /^w/ },
   ],
diff --git a/tsconfig.json b/tsconfig.json
index 1316fe55bc..653fc4847f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,11 +20,9 @@
     "paths": {
       "@/*": ["src/*"],
       "@tests/*": ["tests/*"],
-      // Stubbing react types
-      // https://github.com/johnsoncodehk/volar/discussions/592#discussioncomment-2163786
-      "react": ["src/types/empty-stub.d.ts"],
       // Stubbing vue-slider-component to ignore type errors from that module
-      "vue-slider-component": ["src/types/vue-slider-component-stub.d.ts"]
+      "vue-slider-component": ["./src/types/vue-slider-component-stub.d.ts"],
+      "button-options": ["./src/components/_global/BalBtn/button-options.js"]
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
diff --git a/vite.config.ts b/vite.config.ts
index a97b34a747..1c849b8390 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -90,10 +90,19 @@ export default defineConfig(({ mode }) => {
         // Allows to import tailwind.config.js from useTailwind.ts
         // Check: https://github.com/tailwindlabs/tailwindcss.com/issues/765
         'tailwind.config.js': resolve(__dirname, 'tailwind.config.js'),
+        'button-options': resolve(
+          __dirname,
+          'src/components/_global/BalBtn/button-options'
+        ),
       },
     },
     optimizeDeps: {
-      include: ['tailwind.config.js', 'color', 'mersenne-twister'],
+      include: [
+        'tailwind.config.js',
+        'button-options',
+        'color',
+        'mersenne-twister',
+      ],
     },
     server: {
       port: 8080,
@@ -133,7 +142,12 @@ export default defineConfig(({ mode }) => {
       commonjsOptions: {
         // Allows to import tailwind.config.js from useTailwind.ts
         // Check: https://github.com/tailwindlabs/tailwindcss.com/issues/765
-        include: ['tailwind.config.js', 'node_modules/**'],
+        include: [
+          'tailwind.config.js',
+          'button-options',
+          'node_modules/**',
+          'src/components/_global/BalBtn/button-options.js',
+        ],
         transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
       },
     },
@@ -148,7 +162,7 @@ export default defineConfig(({ mode }) => {
       coverage: {
         reporter: process.env.SILENT_TESTS ? ['lcov'] : ['text', 'lcov'],
       }, // lcov reporter is used by IDE coverage extensions
-      include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+      include: ['./src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     },
   };
 });