Replace tailwind safelist with cjs function (#2982)

* Replace tailwind safelist with cjs function

* Add button-options alias

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';
     });
 

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,
+};

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',
+  ]);
+});