fix(module): safelist aliases for input

To make it work when doing `<USelect color="yellow" />` for example

Author: benjamincanac

src/colors.ts

@@ -92,6 +92,11 @@ const safelistByComponent = {
     variants: ['focus-visible']
   }],
   input: (colorsAsRegex) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }, {
     pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
     variants: ['dark', 'dark:focus']
   }, {
@@ -111,6 +116,12 @@ const safelistByComponent = {
   }]
 }
 
+const safelistComponentAliasesMap = {
+  'USelect': 'UInput',
+  'USelectMenu': 'UInput',
+  'UTextarea': 'UInput'
+}
+
 const colorsAsRegex = (colors: string[]): string => colors.join('|')
 
 export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[]
@@ -133,29 +144,35 @@ export const customSafelistExtractor = (prefix, content: string, colors: string[
   const regex = /<(\w+)\s+[^>:]*color=["']([^"']+)["'][^>]*>/gs
   const matches = content.matchAll(regex)
 
+  const components = Object.keys(safelistByComponent).map(component => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`)
+
   for (const match of matches) {
     const [, component, color] = match
 
     if (!colors.includes(color)) {
       continue
     }
 
-    if (Object.keys(safelistByComponent).map(component => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`).includes(component)) {
-      const name = component.replace(prefix, '').toLowerCase()
+    let name = safelistComponentAliasesMap[component] ? safelistComponentAliasesMap[component] : component
+
+    if (!components.includes(name)) {
+      continue
+    }
+
+    name = name.replace(prefix, '').toLowerCase()
 
-      const matchClasses = safelistByComponent[name](color).flatMap(group => {
-        return ['', ...(group.variants || [])].flatMap(variant => {
-          const matches = group.pattern.source.match(/\(([^)]+)\)/g)
+    const matchClasses = safelistByComponent[name](color).flatMap(group => {
+      return ['', ...(group.variants || [])].flatMap(variant => {
+        const matches = group.pattern.source.match(/\(([^)]+)\)/g)
 
-          return matches.map(match => {
-            const colorOptions = match.substring(1, match.length - 1).split('|')
-            return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
-          }).flat()
-        })
+        return matches.map(match => {
+          const colorOptions = match.substring(1, match.length - 1).split('|')
+          return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
+        }).flat()
       })
+    })
 
-      classes.push(...matchClasses)
-    }
+    classes.push(...matchClasses)
   }
 
   return classes